@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&display=swap');
:root{--bg:#10120f;--ink:#eeebdf;--muted:#a8aca1;--line:#34382f;--accent:#c3cbaa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{height:98px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:30px;font-weight:500;letter-spacing:.2em;line-height:1}.wordmark span{font-size:8px;display:block;letter-spacing:.6em;margin-top:9px}nav{display:flex;gap:38px;align-items:center;font-size:12px}nav a:hover{color:var(--accent)}.nav-cta{border:1px solid #66705d;border-radius:30px;padding:12px 21px}.nav-cta span{margin-left:20px}.hero{height:min(840px,83vh);min-height:600px;position:relative;overflow:hidden;margin:0 2%}.hero-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 43%;filter:brightness(.65) saturate(.7)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,10,.77),rgba(7,13,10,.1) 85%),linear-gradient(0deg,#10120f,transparent 35%)}.hero-body{position:relative;padding:85px 5% 40px;height:90%;display:flex;flex-direction:column;justify-content:space-between}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:500;color:var(--accent);line-height:1.8}h1,h2,p{margin-top:0}h1{font-size:clamp(65px,8.5vw,136px);line-height:1.02;letter-spacing:-.065em;font-weight:400;margin:22px 0}h1 em,h2 em{font-family:'Italiana',Georgia,serif;font-weight:400;letter-spacing:-.045em}.hero-bottom{display:flex;justify-content:space-between;align-items:end}.hero-bottom p{line-height:1.7;font-size:14px;color:#d2d6ca;margin:0}.circle-link{display:grid;place-items:center;border:1px solid #a1a99a;border-radius:50%;width:57px;height:57px;font-size:24px}.circle-link:hover{background:var(--ink);color:var(--bg)}.hero-caption{position:absolute;bottom:20px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:#aeb4a6}.section{padding:100px 7%}.section-heading{display:flex;justify-content:space-between;align-items:end}.section-heading h2,h2{font-size:clamp(42px,5vw,72px);line-height:1.05;font-weight:400;letter-spacing:-.05em;margin-bottom:0}.section-intro{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:0}.filters{display:flex;gap:30px;margin:42px 0 28px;border-bottom:1px solid var(--line)}.filters button{border:0;background:none;padding:0 0 17px;color:var(--muted);font-size:12px}.filters button.active{color:var(--ink);border-bottom:1px solid var(--ink)}.filters small{font-size:9px;margin-left:6px;color:var(--accent)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.project[hidden]{display:none}.project-visual{padding:0;border:0;width:100%;aspect-ratio:16/10;display:block;overflow:hidden;position:relative;text-align:left;background:#1a211b}.project-visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s,filter .7s;filter:brightness(.85)}.project-visual:hover img{transform:scale(1.04);filter:brightness(1)}.project-tag{position:absolute;top:21px;left:21px;font-size:8px;letter-spacing:.14em;background:#10120f99;padding:8px 10px;border:1px solid #ffffff22}.play{position:absolute;right:22px;bottom:22px;width:45px;height:45px;border-radius:50%;border:1px solid #eee9;display:grid;place-items:center;font-size:25px;background:#10120f55}.image-caption{position:absolute;bottom:28px;left:25px;font-size:14px;letter-spacing:.16em;line-height:1.6;text-shadow:0 2px 20px #000}.image-caption b{font-size:25px;letter-spacing:.03em}.project-meta{display:flex;justify-content:space-between;align-items:center;margin:24px 0 10px;gap:10px}.project-meta h3{font-size:21px;font-weight:400;margin:0;letter-spacing:-.035em}.project-meta>span{font-size:9px;color:var(--muted);white-space:nowrap}.project>p{font-size:12px;line-height:1.8;color:var(--muted);max-width:380px}.project-links{display:flex;gap:22px}.text-link{border:0;border-bottom:1px solid #7b8372;padding:6px 0;background:none;font-size:11px}.text-link span{margin-left:12px}.studio{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10%;background:#171b15}.studio-copy{padding-top:24px}.studio-copy .statement{font-size:25px;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}.studio-copy p{color:var(--muted);font-size:14px;line-height:1.9}.disciplines{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-top:30px}.disciplines span{font-size:11px;padding:15px 0;border-bottom:1px solid var(--line)}.contact{text-align:center;border-bottom:1px solid var(--line);padding-top:110px;padding-bottom:110px}.contact h2{font-size:clamp(40px,5vw,74px);margin:25px 0}.contact>p:not(.eyebrow){color:var(--muted);font-size:13px}.contact-link{font-size:12px;border-bottom:1px solid var(--accent);display:inline-block;padding:15px 0;margin-top:12px}.contact-link span{margin-left:40px}#contact-details{margin-top:24px;color:var(--accent)}footer{padding:38px 7%;display:flex;justify-content:space-between;align-items:center;gap:25px}footer .wordmark{font-size:22px}footer p,footer>span{font-size:10px;color:var(--muted);margin:0}dialog{width:min(1100px,94vw);max-height:92vh;padding:48px 30px 30px;border:1px solid #505648;background:#11150f;color:var(--ink)}dialog::backdrop{background:#000c;backdrop-filter:blur(7px)}.close{position:absolute;right:17px;top:12px;background:none;border:0;font-size:22px;padding:6px}dialog video,dialog img{width:100%;max-height:65vh;object-fit:contain;background:#060806}dialog h2{font-size:32px;margin:22px 0 12px}dialog p{font-size:14px;line-height:1.8;color:var(--muted);max-width:760px}.dialog-label{display:block;font-size:10px;letter-spacing:.15em;color:var(--accent);margin-top:18px}body.modal-open{overflow:hidden}@media(max-width:700px){header{height:80px;padding:0 6%}nav{gap:18px;font-size:10px}nav .nav-cta{display:none}.wordmark{font-size:25px}.hero{min-height:590px;height:78svh;margin:0}.hero-image{object-position:58% center}.hero-body{padding:65px 7% 45px}.hero-caption{left:7%;right:7%;font-size:7px}h1{font-size:clamp(58px,12vw,90px)}.hero .eyebrow{font-size:8px}.section{padding:65px 7%}.section-heading{display:block}.section-intro{margin-top:25px}.project-grid{grid-template-columns:1fr;gap:45px}.filters{gap:24px;margin-top:32px}.studio{grid-template-columns:1fr;gap:20px}.studio-copy{padding-top:10px}.studio-copy .statement{font-size:23px}.contact h2{font-size:40px}footer{align-items:start;flex-wrap:wrap}footer p{display:none}dialog{padding:48px 15px 20px}.image-caption b{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.intro-actions{display:flex;align-items:center;gap:24px;margin-top:22px}.intro-play{background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:15px 23px;border-radius:2px;font-size:12px}.intro-play:hover{background:var(--accent)}.intro-actions>a{font-size:11px;border-bottom:1px solid #aaa;padding:7px 0}dialog iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}.intro-fallback{display:inline-block;border-bottom:1px solid var(--accent);padding-bottom:5px;font-size:12px;margin:12px 0}.hero-image{object-position:center}

/* Separate editable hero typography from text embedded in the video thumbnail. */
.hero.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:5%;height:auto;min-height:640px;margin:0;padding:70px 7%;align-items:center;overflow:visible;background:radial-gradient(ellipse at 80% 30%,#222b21 0,transparent 60%),#10120f}
.hero-split .hero-body{padding:0;height:auto;display:block;min-width:0}
.hero-split h1{font-size:clamp(56px,6.5vw,110px);margin:30px 0 35px;line-height:1.1}
.hero-split .hero-bottom{display:block}.hero-split .eyebrow{font-size:9px}
.intro-preview{min-width:0}.intro-preview>button{width:100%;display:block;padding:0;border:1px solid #ffffff20;background:#080b08;position:relative;aspect-ratio:16/9;overflow:hidden}
.hero-split .hero-image{position:static;display:block;width:100%;height:100%;object-fit:contain;filter:none}
.preview-play{position:absolute;right:20px;bottom:20px;width:50px;height:50px;background:#10120fcc;border:1px solid #eeebdf88;border-radius:50%;display:grid;place-items:center;font-size:27px}
.intro-preview-caption{display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:.14em;color:var(--muted);padding:17px 0;border-bottom:1px solid var(--line)}
@media(max-width:900px){.hero.hero-split{grid-template-columns:1fr;gap:42px;min-height:0;padding:52px 7% 60px}.hero-split h1{font-size:clamp(50px,10vw,82px);margin:26px 0}.intro-preview{width:100%}.hero-split .hero-body{height:auto}.hero-split .intro-actions{flex-wrap:wrap;gap:18px}}

.filters{flex-wrap:wrap;row-gap:12px}

/* Title posters with baked-in text: show the whole frame and keep the play button off the title. */
.project-visual.poster img{object-fit:contain}.project-visual.poster .play{top:22px;bottom:auto}
@media(max-width:700px){.project-visual.poster .project-tag{top:auto;bottom:14px;left:14px}}

/* Creative section: link tiles to Instagram posts. */
.creative{border-top:1px solid var(--line)}
.creative-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:42px}
.creative-tile{display:flex;flex-direction:column;justify-content:space-between;min-width:0;aspect-ratio:4/5;padding:24px;position:relative;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 85% 15%,#222b21 0,transparent 65%),#141812;transition:border-color .4s,background-color .4s}
.creative-tile:hover{border-color:#66705d}
.creative-kind{font-size:8px;letter-spacing:.14em;color:var(--accent)}
.creative-name{font-family:'Italiana',Georgia,serif;font-size:clamp(30px,3vw,42px);letter-spacing:-.03em;line-height:1.1}
.creative-open{align-self:flex-start;font-size:11px;border-bottom:1px solid #7b8372;padding:6px 0}
.creative-tile>*{position:relative;z-index:1}
.creative-tile>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9);transition:transform .7s,filter .7s}
.creative-tile.has-image{justify-content:flex-end;padding:20px}
.creative-tile.has-image>img{filter:none}
.creative-tile.has-image:hover>img{transform:scale(1.04)}
.creative-tile.has-image .creative-kind,.creative-tile.has-image .creative-name{display:none}
.creative-tile.has-image .creative-open{background:#10120fcc;border:1px solid #ffffff22;padding:10px 13px}
@media(max-width:700px){.creative-grid{grid-template-columns:1fr;gap:20px;margin-top:32px}.creative-tile{aspect-ratio:auto;min-height:170px}.creative-tile.has-image{aspect-ratio:4/5;min-height:0}}
@media(max-width:700px){.project-visual.poster.tag-top .project-tag{top:14px;bottom:auto}}
/* Poster with baked-in title at the top right: show the whole frame, keep the default play button at the bottom. */
.project-visual.fit img{object-fit:contain}

/* Contact details (filled from portfolio-config.js). */
#contact-details{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:10px}
#contact-details .contact-name{font-family:'Italiana',Georgia,serif;font-size:clamp(28px,3vw,36px);letter-spacing:-.03em;color:var(--ink)}
#contact-details a{font-size:14px;color:var(--accent);overflow-wrap:anywhere;border-bottom:1px solid transparent;padding:3px 0}
#contact-details a:hover{border-bottom-color:var(--accent)}

/* ---- UX pass 2026-11-01 ---- */
/* All project art is 16:9: match the frame so nothing is letterboxed or cropped. */
.project-visual{aspect-ratio:16/9;background:#0c0f0b}
.project-visual.poster img,.project-visual.fit img{object-fit:cover}
/* Keep the on-image title clear of the watermark baked into the Rhythm frame. */
.project-visual .image-caption{bottom:auto;top:52%;transform:translateY(-50%)}
/* Tighter, consistent CTA icon spacing. */
.text-link span{margin-left:8px}
/* Less dead space between hero and the work section. */
.hero.hero-split{min-height:0;padding-top:80px;padding-bottom:40px}
#work.section{padding-top:80px}
.contact-link{min-width:180px}
@media(max-width:700px){
  /* Filters: one swipeable row instead of an orphaned wrap. */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:22px;margin-right:-7%;padding-right:7%}
  .filters::-webkit-scrollbar{display:none}
  .filters button{white-space:nowrap;padding:8px 0 15px}
  /* Bigger touch targets. */
  nav{gap:16px;font-size:11px}nav a{padding:14px 0}
  .text-link{padding:11px 0}
  .project-links{gap:24px}
  #contact-details a{padding:10px 0}
  #work.section{padding-top:56px}
  .hero.hero-split{padding-bottom:36px}
}