/* Epik Studio · site. Palette measured from the real logo; Cinzel (the logo's capitals) over Jost (the catalogue labels). */
:root {
  --ground: #F6F7F7; --tint: #E8EDEC; --ink: #10343A; --ink-2: #3E5B60; --line: #B9C7C6;
  --accent: #D77F5E; --accent-strong: #E3967A; --accent-ink: #10343A; --accent-text: #A04A2C;
  --field: #10343A; --on-field: #F6F7F7; --on-field-2: #AFC5C7;
  --studio: #EBC9C1; --on-studio: #10343A; --on-studio-2: #5A3B33; --mark-field: #D77F5E;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.76, 0, 0.24, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --pad: clamp(20px, 4vw, 40px);
  --sec: clamp(72px, 10vw, 128px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; font-family: 'Jost', system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .07em; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input { caret-color: var(--accent); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.disp { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .01em; line-height: 1.08; text-wrap: balance; }
.sec { padding: var(--sec) 0; }
.meta { font-size: 15px; color: var(--ink-2); }
.lede { font-size: 18px; color: var(--ink-2); max-width: 52ch; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 2px; text-decoration: none; }
.skip:focus { top: 12px; }

/* buttons: one corner language (2px), flat fills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 2px;
  background: var(--accent); color: var(--accent-ink); font: 600 16px/1.1 'Jost', sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn--onfield { background: var(--on-field); color: var(--field); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-strong); }
  .btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .btn--onfield:hover { background: color-mix(in srgb, var(--on-field) 84%, var(--field)); }
  .nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
}

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--ground); }
.head-row { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.brand { flex: 0 0 auto; display: block; }
.brand img { width: 150px; height: 70px; object-fit: cover; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; letter-spacing: .02em; }
.head-cta { min-height: 46px; padding: 0 20px; font-size: 15px; }
.menu-btn { display: none; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); font: 600 15px 'Jost', sans-serif; cursor: pointer; }
@media (max-width: 960px) {
  .head-row { gap: 12px; min-height: 72px; }
  .brand img { width: 128px; height: 60px; }
  .head-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--pad) 20px; background: var(--ground); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; font-size: 18px; }
}
@media (max-width: 520px) {
  .head-row { gap: 10px; min-height: 64px; }
  .brand img { width: 112px; height: 52px; }
  .head-cta, .menu-btn { min-height: 42px; padding: 0 13px; white-space: nowrap; }
}
@media (max-width: 349px) { .head-cta { display: none; } }

/* HERO: headline, the film on its mat, the pitch */
.hero { padding: clamp(24px, 4vw, 56px) 0 clamp(92px, 9vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title stage" "copy stage"; column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero-title { grid-area: title; align-self: end; font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(50px, 6.8vw, 104px); line-height: 1.0; letter-spacing: -.005em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .line > span { display: inline-block; }
.hero-copy { grid-area: copy; align-self: start; margin-top: clamp(20px, 2.4vw, 32px); max-width: 520px; }
.hero-lede { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-contact { margin-top: 22px; font-weight: 600; }
.hero-contact a { color: var(--accent-text); text-decoration: none; }
.hero-contact a:hover { text-decoration: underline; }
.stage { grid-area: stage; position: relative; }
/* the film is a sketchbook page taped onto the hero, like the photos inside the film */
.stage-mat { position: relative; background: #FFFFFF; padding: 12px; height: min(78vh, 780px); aspect-ratio: 9 / 16; transform: rotate(-1.4deg); transition: transform 700ms var(--ease-out); }
.stage:hover .stage-mat, .stage.sound .stage-mat { transform: none; }
.tape { position: absolute; z-index: 3; width: 150px; height: 44px; top: -16px; pointer-events: none; }
.tape-l { left: -34px; transform: rotate(-20deg); }
.tape-r { right: -34px; transform: rotate(17deg); }
.note { position: absolute; right: calc(100% + 18px); bottom: 16%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 700 30px/1.05 'Caveat', cursive; color: var(--ink-2); text-align: right; transform: rotate(-4deg); white-space: nowrap; }
.note-arrow { width: 110px; height: 64px; margin-right: -26px; }
.hero-title .swoosh { display: block; width: 4.7em; max-width: 100%; height: .3em; margin-top: .02em; overflow: visible; }
.stage video { width: 100%; height: 100%; object-fit: cover; background: var(--tint); }
@media (max-width: 1180px) { .note { display: none; } }
.vid-btn { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 2px;
  background: var(--ink); color: var(--ground); font: 600 15px 'Jost', sans-serif; cursor: pointer; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.vid-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .vid-btn:hover { background: #1D4C54; } }
@media (max-width: 860px) {
  .hero { padding-top: 20px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "copy" "stage"; }
  .hero-title { align-self: start; }
  .hero-copy { max-width: 560px; margin-top: 18px; }
  .hero-lede { font-size: 18px; }
  .hero-actions { margin-top: 24px; }
  .hero-contact { margin-top: 18px; }
  .stage { width: min(100% - 48px, 400px); margin: 52px auto 0; }
  .stage-mat { width: 100%; height: auto; aspect-ratio: auto; padding: 8px 8px 66px; transform: rotate(-1.2deg); }
  .stage video { height: auto; aspect-ratio: 9 / 16; }
  .tape { width: 104px; height: 31px; top: -13px; } .tape-l { left: -20px; } .tape-r { right: -20px; }
  .vid-btn { left: auto; top: auto; right: 10px; bottom: 11px; }
  .note { display: flex; right: auto; left: 18px; bottom: 11px; align-items: flex-start; text-align: left; font-size: 23px; line-height: 1; transform: rotate(-2.5deg); }
  .note-arrow { display: none; }
}

/* marquee */
.marq { background: var(--field); color: var(--on-field); overflow: hidden; display: flex; align-items: center; height: clamp(96px, 11vw, 150px); }
.marq-track { display: flex; align-items: center; gap: clamp(26px, 3.5vw, 48px); white-space: nowrap; font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(38px, 4.8vw, 66px); line-height: 1; padding-left: var(--pad); }
.marq-track .dot { color: var(--mark-field); font-size: .8em; }

/* catalogue */
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.plate { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--tint); }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; transition: opacity 450ms var(--ease-out), transform 900ms var(--ease-soft); }
.shot.on { opacity: 1; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .plate:hover .shot.on { transform: scale(1.04); } }
.cat-body { display: flex; flex-direction: column; gap: 28px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; min-height: 48px; padding: 10px 14px; font: 500 17px 'Jost', sans-serif; color: var(--ink-2); transition: color 180ms ease, border-color 260ms var(--ease-out); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab:hover { color: var(--ink); }
.cstack { display: grid; }
.ctext { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.ctext.on { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease-out) 140ms, visibility 0s; }
.cat-title { font-size: clamp(40px, 5vw, 64px); }
.ctext p { margin-top: 16px; max-width: 40ch; font-size: 18px; }
.ctext .meta { margin-top: 12px; font-size: 15px; }
.cells { display: flex; }
.cell { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 68px; font-weight: 600; text-decoration: none; transition: transform 140ms var(--ease-out); }
.cell:active { transform: scale(.98); }
.cell--ink { background: var(--ink); color: var(--ground); }
.cell--tint { background: var(--tint); color: var(--ink); }
@media (max-width: 760px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 calc(var(--pad) - 14px); } .tab { flex: 0 0 auto; } }

/* work */
.work { background: var(--field); color: var(--on-field); }
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.work-head h2 { font-size: clamp(32px, 3.6vw, 46px); }
.work-head p { color: var(--on-field-2); max-width: 40ch; }
.work-head a { color: var(--on-field); font-weight: 600; }
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.gal figure { overflow: hidden; }
.gal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .gal figure:hover img { transform: scale(1.05); } }
.gal figcaption { margin-top: 12px; font-size: 15px; color: var(--on-field-2); }
@media (max-width: 760px) {
  .gal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 12px; margin-top: 32px; }
  .gal figure:first-child { grid-column: 1 / -1; }
  .gal figcaption { font-size: 14px; margin-top: 8px; }
}

/* process */
.process { background: var(--tint); }
.process-title { font-size: clamp(32px, 3.6vw, 46px); max-width: 16ch; }
.steps { list-style: none; padding: 0; margin-top: 36px; }
.steps li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; padding: 22px 0; align-items: baseline; }
.steps h3 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(22px, 2vw, 27px); }
.steps p { max-width: 56ch; }
@media (max-width: 760px) { .steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; } }

/* studio */
.studio { background: var(--studio); color: var(--on-studio); }
.studio-row { display: flex; align-items: center; gap: clamp(32px, 5vw, 64px); }
.studio-logo { flex: 0 0 auto; width: 180px; height: 180px; }
.studio-text { flex: 1 1 0; min-width: 0; }
.statement { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; font-weight: 500; max-width: 22ch; }
.studio-text p + p { margin-top: 20px; max-width: 56ch; color: var(--on-studio-2); }
.studio-text a { color: var(--on-studio); font-weight: 600; }
.studio-photo { flex: 0 0 min(32%, 360px); overflow: hidden; }
.studio-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 860px) { .studio-row { flex-direction: column; align-items: flex-start; } .studio-photo { flex-basis: auto; width: 100%; max-width: 440px; } .studio-logo { width: 150px; height: 150px; margin-left: -10px; } }

/* rent or own */
.own h2 { font-size: clamp(34px, 3.8vw, 48px); }
.own .lede { margin-top: 14px; }
.own-row { display: flex; gap: 24px; margin-top: 44px; align-items: stretch; }
.own-rent, .own-buy { padding: clamp(28px, 3.6vw, 46px); display: flex; flex-direction: column; }
.own-rent { flex: 1.45 1 0; background: var(--tint); }
.own-buy { flex: 1 1 0; background: var(--field); color: var(--on-field); }
.own h3 { font-size: clamp(26px, 2.4vw, 32px); }
.own-rent > p, .own-buy > p { margin: 12px 0 16px; max-width: 44ch; }
.own-buy > p { color: var(--on-field-2); }
.ticks { list-style: none; padding: 0; }
.ticks li { padding: 7px 0; }
.own-foot { margin-top: auto; padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .own-row { flex-direction: column; gap: 12px; } }

/* contact + brief builder */
.contact-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.contact-intro h2 { font-size: clamp(34px, 3.8vw, 48px); }
.contact-intro > p { margin-top: 20px; font-size: 18px; max-width: 34ch; }
.direct { margin-top: 36px; display: grid; gap: 18px; }
.direct dt { font-weight: 600; }
.direct dd { margin-top: 4px; }
.direct dd a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.direct dd a:hover { text-decoration: underline; }
.builder { background: var(--tint); padding: clamp(24px, 3.4vw, 40px); }
.grp { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.grp legend, .flabel { display: block; font-weight: 600; font-size: 15px; margin: 0 0 10px; padding: 0; }
.grp-row { display: flex; gap: 28px; flex-wrap: wrap; }
.grp-date { flex: 1 1 220px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; cursor: pointer; min-height: 46px; padding: 0 16px; border-radius: 2px; border: 1.5px solid var(--line); background: var(--ground); color: var(--ink-2); font: 500 16px 'Jost', sans-serif;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 140ms var(--ease-out); }
.chip:active { transform: scale(.97); }
.chip.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--ink); } .chip.on:hover { color: var(--ground); } }
.field { width: 100%; min-height: 52px; padding: 0 48px 0 14px; border: 1.5px solid var(--line); border-radius: 2px; background: var(--ground); color: var(--ink); font: 400 16px 'Jost', sans-serif; color-scheme: light; accent-color: var(--accent); }
.field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.datewrap { position: relative; display: block; }
.dicon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.field::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 48px; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.field.empty::-webkit-datetime-edit { color: var(--ink-2); }
.msg { margin: 0; padding: 18px 20px; background: var(--ground); border-radius: 2px; line-height: 1.6; white-space: pre-line; }
.builder-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* footer */
.site-foot { background: var(--field); color: var(--on-field); padding: clamp(56px, 7vw, 80px) 0 32px; }
.foot-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px; }
.logo-plate { display: inline-flex; background: #F6F7F7; border-radius: 2px; padding: 8px 12px; }
.logo-plate img { width: 150px; height: 68px; object-fit: cover; }
.foot-brand p { margin-top: 18px; max-width: 30ch; color: var(--on-field-2); }
.foot-nav { display: flex; flex-direction: column; gap: 10px; }
.foot-nav a, .foot-nav span { color: var(--on-field-2); text-decoration: none; }
.foot-nav a:hover { color: var(--on-field); text-decoration: underline; text-decoration-color: var(--accent); }
.foot-h { font-weight: 600; margin-bottom: 4px; }
.foot-base { margin-top: 48px; font-size: 14px; color: var(--on-field-2); }
@media (max-width: 760px) { .foot-row { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- motion: from a visible default, dropped under reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .stage-mat { animation: stagecurtain 1300ms var(--ease-io) 120ms both; }
  .js .hero-title .line > span { animation: rise 1000ms var(--ease-out) both; }
  .js .hero-title .line:nth-child(2) > span { animation-delay: 110ms; }
  .js .hero-copy { animation: fadeup 900ms var(--ease-out) 420ms both; }
  .js .hero-title .swoosh path { stroke-dasharray: 560; animation: draw 900ms var(--ease-out) 650ms both; }
  .js .tape { animation: tapeon 420ms var(--ease-out) 1250ms both; }
  .js .note { animation: fadeup 900ms var(--ease-out) 1500ms both; }
  .chip.on { animation: pick 320ms var(--ease-out); }
}
@keyframes curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
/* the reveal ends past the mat so the tape and the tilted corners stay whole */
@keyframes stagecurtain { from { clip-path: inset(100% -80px -80px -80px); } to { clip-path: inset(-80px); } }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pick { 40% { transform: scale(1.07); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
@keyframes tapeon { from { opacity: 0; scale: 1.25; } to { opacity: 1; scale: 1; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .marq-track { animation: marq linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .plate { animation: plateopen linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .cat-body > * { animation: rise-s linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
    .gal figure:nth-child(1) { animation: para-a linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .gal figure:nth-child(3) { animation: para-b linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .steps li { animation: stepin linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .studio-photo img { animation: settleup linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .own-rent { animation: fromL linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .own-buy { animation: fromR linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-38%); } }
@keyframes plateopen { from { clip-path: inset(0 0 0 30%); } to { clip-path: inset(0); } }
@keyframes rise-s { from { transform: translateY(32px); } to { transform: none; } }
@keyframes para-a { from { transform: translateY(46px); } to { transform: translateY(-46px); } }
@keyframes para-b { from { transform: translateY(-36px); } to { transform: translateY(36px); } }
@keyframes stepin { from { transform: translateX(-48px); } to { transform: none; } }
@keyframes settleup { from { transform: translateY(8%) scale(1.08); } to { transform: none; } }
@keyframes fromL { from { transform: translateX(-40px); } to { transform: none; } }
@keyframes fromR { from { transform: translateX(40px); } to { transform: none; } }
@media (max-width: 760px) { .gal figure { animation: none !important; } }