@font-face{font-family:Suisse;src:url('fonts/SuisseIntl-Medium.otf') format('opentype');font-style:normal;font-weight:500;font-display:swap}
:root{--ink:#000;--muted:rgba(0,0,0,.6);--surface:#f5f5f5;--column:577px;--gallery:1172px;--section-space:240px;--radius:4px;--corner-smoothing:.6}
/* Change this multiplier to tune the hero type; 1 matches Figma at 1500px. */
:root{--hero-font-scale:1;--hero-font-min:1.25rem;--hero-font-max:4.5rem;--hero-font-size:clamp(var(--hero-font-min),calc(3.333333vw * var(--hero-font-scale)),var(--hero-font-max))}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#fff;color:var(--muted);font-family:Suisse,Arial,sans-serif;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:.24px;font-feature-settings:'dlig' 1;-webkit-font-smoothing:antialiased}
h1,h2,p,figure{margin:0;font-size:inherit;font-weight:inherit}
a{color:var(--ink);text-decoration:none}
a:focus-visible{outline:2px solid #4e8da0;outline-offset:5px}
.skip-link{position:absolute;z-index:3;top:12px;left:16px;padding:12px;background:var(--surface);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.header{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2}
.navigation{width:300px;padding:16px;border-radius:var(--radius);background:var(--surface);display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:16px;letter-spacing:.24px}
.about-link{color:var(--muted)}
.navigation a,.contact a{transition:opacity .15s ease}
.navigation a:hover,.contact a:hover{opacity:.65}
.hero{height:95vh;height:95dvh;position:relative;display:flex;align-items:center;justify-content:center;padding:0 16px;overflow:hidden}
.dream-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero h1{position:relative;width:calc(var(--hero-font-size) * 19.76);max-width:100%;font-size:var(--hero-font-size);line-height:1.2;color:#1a1a1a;text-align:center;text-wrap:balance;pointer-events:none;background:transparent}
.project-heading{padding:var(--section-space) 16px 80px;text-align:center;display:flex;flex-direction:column;align-items:center}
.project-heading h2{color:var(--ink)}
.project-heading p{max-width:var(--column);text-wrap:balance}
.gallery{width:calc(100% - 32px);max-width:var(--gallery);margin:0 auto;display:flex;flex-direction:column;gap:8px}
.gallery figure{background:var(--surface);position:relative;border-radius:var(--radius);overflow:hidden}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.gallery .landscape{aspect-ratio:192/108}
.gallery .contain img{object-fit:contain}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.triptych figure{aspect-ratio:300/400}
.gallery picture{position:absolute;inset:0;display:block}
.gallery .case-study-image img{object-fit:contain}
.engagement{padding:var(--section-space) 16px 0}
.text-column{width:100%;max-width:var(--column);margin:0 auto}
.ways{margin-top:24px}
.engagement-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.engagement-card{aspect-ratio:280/281;padding:16px;border-radius:var(--radius);background:var(--surface);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;font-size:16px}
.card-top p,.price{color:var(--muted)}
.card-icon{display:block;flex:none;width:24px;height:24px;color:rgba(0,0,0,.5)}
.card-icon svg{display:block}
.engagement-details{margin-top:32px}
.engagement-details p+p{margin-top:24px}
.about{padding:var(--section-space) 16px;scroll-margin-top:0}
.contact{margin-top:24px}
@media(max-width:800px){
  .triptych{grid-template-columns:minmax(0,1fr)}
  .gallery .landscape{aspect-ratio:1}
  .gallery .landscape.case-study-image img{transform:scale(var(--mobile-hero-zoom,1.4))}
  .gallery [data-image="trim-hero"]{--mobile-hero-zoom:1.75}
  .engagement-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .header{left:16px;right:16px;transform:none}
  .navigation{width:100%}
  .project-heading p{text-wrap:balance}
  .project:first-child .project-heading{padding-left:32px;padding-right:32px}
  .text-column{max-width:none}
  .engagement-card{aspect-ratio:280/281;min-height:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a{transition:none!important}}

.navigation.smooth-corners,.gallery figure.smooth-corners,.engagement-card.smooth-corners{border-radius:0}