/* Preserve the cinematic composition while making its content responsive. */
html{scroll-padding-top:2rem}
body{overflow-wrap:break-word}
a:focus-visible,button:focus-visible,.filmstrip:focus-visible{outline:2px solid #e7b2ad;outline-offset:5px}
.hero{height:auto;min-height:760px;padding:155px 5% 125px}
.hero-photo{inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;object-position:50% 32%}
.hero-copy{position:relative;top:auto;left:auto;width:64%;max-width:850px}
.hero h1{font-size:clamp(4.6rem,8.4vw,8.8rem);line-height:.88;letter-spacing:-.045em}
.hero h2{line-height:1.5;letter-spacing:.32em;margin:28px 0 24px}
.hero h3{line-height:1.5;letter-spacing:.3em}
.hero-copy>p{font:400 1.125rem/1.65 Manrope,Arial,sans-serif;letter-spacing:0;color:#d1cabe}
.hero-copy>a{font-size:.875rem;letter-spacing:.1em;min-height:48px}
.hero nav{gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.hero nav a{font-size:.875rem;letter-spacing:.1em;padding:8px 0}
.hero header>p,.hero aside p{font-size:.75rem;letter-spacing:.15em}
.hero aside{right:4%;top:43%;height:40%}
.principles{width:70%;gap:28px}
.principles span{font-size:.75rem;line-height:1.5;letter-spacing:.08em}
.principles b{margin-right:12px}
.projects{padding-top:64px}
.section-title{gap:24px}
.section-title h2{font-size:clamp(2.8rem,5vw,5.7rem)}
.controls{flex-shrink:0;gap:4px}
.controls button{min-width:44px;min-height:44px;border:1px solid var(--line)}
.controls button:hover:not(:disabled){background:#74161b}
.controls button:disabled{opacity:.3;cursor:default}
.controls span{font-size:.8125rem;letter-spacing:.04em;min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.projects-intro{margin:0 5% 28px 0;max-width:680px;color:#b9b3a9;line-height:1.75}
.filmstrip{padding-top:6px;padding-bottom:14px;scroll-padding-left:0;overscroll-behavior-x:contain}
.project{min-width:0;flex-basis:calc((90vw - 66px)/4)}
.project>div{height:auto;aspect-ratio:1.1;isolation:isolate}
.project h3{font-size:clamp(1.65rem,2.3vw,2.65rem);line-height:1.12}
.project p{font-family:Manrope,Arial,sans-serif;font-size:.75rem;letter-spacing:.035em;line-height:1.6;gap:12px}
.project p i{flex:0 0 28px}
.project em{font-size:.75rem;padding:4px 7px;background:#0d0d0cbb}
.project-note{display:block;font-size:.75rem;line-height:1.6;color:#b9b3a9;margin-top:10px}
.project:focus-visible img{filter:grayscale(0) brightness(.9)}
.image-failed:after{content:attr(data-title);padding:20px;text-align:center;color:#d1cabe}
.blank strong{font-size:clamp(1.5rem,2.5vw,2.4rem);letter-spacing:.05em}
.eyebrow{font-size:.875rem;line-height:1.6;letter-spacing:.12em;color:#b9b3a9}
.about,.services,.expertise{padding-top:88px;padding-bottom:88px;row-gap:28px}
.about h2{font-size:clamp(2.5rem,4.5vw,5.4rem);line-height:1.1}
.about h2 span{color:#ce787b}
.about>p:last-child{font:400 1rem/1.85 Manrope,Arial,sans-serif;margin:0;max-width:760px}
.services article{padding:24px;min-width:0}
.services h3{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.2;margin:26px 0}
.services b{font-size:.75rem;color:#c5bfb5}
.services article p{font-size:1rem;line-height:1.75;color:#c5bfb5}
.services article:nth-child(3) p{color:#f0dedd}
.expertise a span,.expertise a i{font-size:.875rem;line-height:1.6;letter-spacing:.04em}
.expertise a i{color:#e49394;margin-top:28px}
.expertise a:hover{border-color:#c56a6e}
footer{font-family:Manrope,Arial,sans-serif;font-size:.75rem;line-height:1.7;letter-spacing:.08em}
@media(min-width:1600px){.hero{min-height:900px;padding-top:180px}}
@media(max-width:1100px) and (min-width:801px){
  .hero{padding-top:150px;min-height:730px}
  .hero-photo{inset:0 0 0 auto;height:100%;width:65%;object-position:55% 32%}
  .hero-copy{width:75%}.hero aside{display:none}
  .principles{width:90%;gap:20px}
  .project{flex-basis:calc((90vw - 44px)/3)}
  .about,.services,.expertise{grid-template-columns:1fr}
  .about>p:last-child{grid-column:1}
  .expertise{grid-template-columns:1fr 1fr}.expertise>.eyebrow{grid-column:1/-1}
}
@media(max-width:800px){
  .hero{min-height:0;padding:300px 20px 40px}
  .hero-photo{inset:0 0 auto auto;height:470px;width:100%;object-position:60% 28%}
  .hero-shade{background:linear-gradient(0deg,#0d0d0c 0%,#0d0d0c 30%,transparent 85%),linear-gradient(90deg,rgba(13,13,12,.35),transparent)}
  .hero header{padding-top:20px}.hero nav{gap:12px 22px}
  .hero nav a{font-size:.8125rem;letter-spacing:.05em}
  .hero nav a:nth-child(3),.hero nav a:nth-child(4){display:block}
  .hero-copy{width:100%;top:auto;left:auto}
  .hero h1{font-size:clamp(2.9rem,10.8vw,5.4rem);line-height:.95;letter-spacing:-.035em}
  .hero h2{font-size:.9375rem;letter-spacing:.2em;margin-top:22px}
  .hero h3{font-size:1rem;letter-spacing:.18em}
  .hero-copy>p{font-size:1rem}
  .principles{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:40px}
  .principles span{font-size:.75rem}
  .projects{padding-top:40px}
  .section-title{gap:12px;justify-content:space-between;flex-wrap:wrap}
  .section-title h2{font-size:2.8rem}
  .controls span{min-width:86px}
  .project{flex-basis:76vw;max-width:440px}
  .project>div{height:auto;aspect-ratio:1.1}
  .project h3{font-size:2rem}
  .about,.services,.expertise{padding:64px 20px;gap:24px}
  .about h2{font-size:clamp(2.3rem,7vw,3.3rem)}
  .services article{min-height:0;padding:28px}
  .services h3{font-size:2rem}
  .expertise h2{font-size:2.8rem}
  .expertise a b{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project img{transition:none}}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 25px}
.hero-actions a{display:inline-flex;align-items:center;gap:28px;min-height:48px;padding:14px 22px;text-decoration:none;text-transform:uppercase;font-size:.875rem;letter-spacing:.1em}
.hero-actions a b{font-size:1.15rem;font-weight:400}
.hero-actions .hero-contact{background:linear-gradient(90deg,#741318,#a32027)}
.hero-actions .hero-projects{border:1px solid rgba(238,232,220,.45)}
.hero-actions a:focus-visible,.hero nav a:focus-visible,.contacts a:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.contacts{padding:90px 5%;border-top:1px solid var(--line);scroll-margin-top:20px}
.contacts h2{font:400 clamp(2.6rem,5vw,5.5rem)/1 "Cormorant Garamond",serif;margin:18px 0}
.contacts>p:last-of-type{max-width:540px;color:#c7c0b6;line-height:1.65}
.contacts .contact-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.contacts .contact-links a{display:inline-block;border:1px solid var(--line);padding:14px 22px;text-decoration:none}
@media(max-width:800px){.hero-actions{gap:10px}.hero-actions a{gap:14px;font-size:.78rem;padding:12px 15px}.contacts{padding:65px 20px}}