:root { --paper:#eae6dc; --ink:#171714; --red:#e6402d; --line:rgba(23,23,20,.25); --sans:'Manrope',sans-serif; --serif:'Playfair Display',serif; --mono:'DM Mono',monospace; }
:root { --sans:'Avenir Next','Helvetica Neue',sans-serif; --serif:'Bodoni 72','Didot','Iowan Old Style','Times New Roman',serif; --mono:'SFMono-Regular','IBM Plex Mono','Courier New',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; }
body.no-scroll { overflow:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; user-select:none; -webkit-user-drag:none; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
.page-pad { padding-left:clamp(24px,5vw,80px); padding-right:clamp(24px,5vw,80px); }
.site-header { position:fixed; inset:0 0 auto; height:96px; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(24px,3.2vw,52px); transition:background .35s,color .35s,height .35s; }
.site-header.scrolled { height:72px; background:rgba(234,230,220,.94); backdrop-filter:blur(14px); color:var(--ink)!important; border-bottom:1px solid rgba(23,23,20,.12); }
.site-header.on-image { color:#fff; }
.wordmark { justify-self:start; font-size:12px; line-height:.86; font-weight:600; letter-spacing:.04em; }
.wordmark span { display:block; }
.desktop-nav { display:flex; gap:36px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.desktop-nav a,.header-contact { position:relative; }
.desktop-nav a:after,.header-contact:after { content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .25s; }
.desktop-nav a:hover:after,.header-contact:hover:after { right:0; }
.header-contact { justify-self:end; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.language-toggle { position:absolute; right:clamp(145px,12vw,190px); border:0; border-bottom:1px solid currentColor; background:none; color:inherit; padding:3px 0; font:10px var(--mono); letter-spacing:.1em; }
.menu-button { display:none; border:0; background:none; width:38px; height:38px; padding:10px 2px; }
.menu-button span { display:block; height:1px; background:currentColor; margin:6px 0; }
.mobile-menu { display:none; }
.hero { position:relative; min-height:82svh; color:#fff; overflow:hidden; display:flex; align-items:flex-end; padding:120px clamp(24px,5vw,80px) 6vh; background:#111; }
.hero-media,.hero-wash { position:absolute; inset:0; }
.hero-media::after,.project-image::after,.home-interlude>div::after,.archive-image::after,.gallery-hero-image::after,.masonry-item::after,.about-portrait::after { content:'© Onnik Versace'; position:absolute; z-index:3; right:8px; bottom:8px; padding:4px 6px; background:rgba(0,0,0,.42); color:rgba(255,255,255,.88); font:7px var(--mono); letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.hero-media img { height:100%; object-fit:contain; filter:saturate(.8) contrast(1.05); }
@keyframes heroZoom { from{transform:scale(1.07)} to{transform:scale(1)} }
.hero-wash { background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 38%,rgba(0,0,0,.5)); }
.hero-kicker { position:absolute; top:130px; left:clamp(24px,5vw,80px); font:11px var(--mono); text-transform:uppercase; letter-spacing:.13em; }
.hero-title { position:relative; z-index:1; margin:0; font-size:clamp(52px,7vw,112px); font-weight:400; letter-spacing:-.055em; line-height:.8; }
.hero-title span,.hero-title em { display:block; }
.hero-title em { font-family:var(--serif); font-weight:500; margin-left:14vw; }
.hero-copy { position:absolute; z-index:2; right:5vw; bottom:13vh; width:min(310px,27vw); font-size:14px; line-height:1.6; }
.hero-index { position:absolute; z-index:2; right:5vw; bottom:7vh; width:min(310px,27vw); padding-top:12px; border-top:1px solid rgba(255,255,255,.7); font:11px var(--mono); text-transform:uppercase; display:flex; justify-content:space-between; }
.hero-number { position:absolute; right:5vw; top:130px; font:10px var(--mono); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s,transform .8s; }
.reveal.visible { opacity:1; transform:none; }
.eyebrow { font:10px var(--mono); text-transform:uppercase; letter-spacing:.13em; }
.manifesto { min-height:55vh; display:grid; grid-template-columns:1fr 3fr 1.15fr; gap:3vw; align-items:center; border-bottom:1px solid var(--line); }
.manifesto-copy { font-size:clamp(28px,3.7vw,56px); line-height:1.08; letter-spacing:-.04em; }
.manifesto-copy span,.manifesto-copy strong { display:block; font-weight:400; }
.manifesto-copy strong { font-family:var(--serif); font-style:italic; }
.manifesto-aside { font-size:12px; line-height:1.7; align-self:end; margin-bottom:9vh; }
.featured { padding-top:10vh; padding-bottom:10vh; }
.section-heading { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; margin-bottom:7vh; }
.section-heading h2 { margin:0; font-size:clamp(44px,5.8vw,86px); line-height:.83; font-weight:400; letter-spacing:-.055em; }
.section-heading h2 em { font-family:var(--serif); font-weight:500; }
.section-heading>a { font:10px var(--mono); text-transform:uppercase; justify-self:end; padding-bottom:5px; border-bottom:1px solid; }
.featured-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,2vw,30px); align-items:start; }
.project-card { grid-column:span 5; margin-bottom:7vh; }
.project-2 { grid-column:8/span 5; margin-top:9vh; }
.project-3 { grid-column:2/span 4; }
.project-4 { grid-column:8/span 4; margin-top:12vh; }
.project-5 { grid-column:3/span 7; }
.project-image { position:relative; background:#d0ccc2; }
.project-image img { height:auto; }
.project-meta { display:grid; grid-template-columns:34px 1fr auto; align-items:baseline; padding-top:13px; }
.project-meta span,.project-meta p { font:9px var(--mono); text-transform:uppercase; margin:0; }
.project-meta h3 { margin:0; font-size:16px; font-weight:500; }
.home-interlude { min-height:65vh; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; background:#111; }
.home-interlude>div { position:absolute; inset:0; }
.home-interlude img { width:100%; height:100%; object-fit:contain; filter:brightness(.55) saturate(.65); }
.home-interlude blockquote { position:relative; width:min(820px,85%); margin:0; text-align:center; font-size:clamp(34px,4.8vw,66px); line-height:1.08; letter-spacing:-.04em; }
.home-interlude em { font-family:var(--serif); }
.services { padding-top:10vh; padding-bottom:10vh; background:#d8d2c6; }
.service-list { margin-left:25%; border-top:1px solid var(--ink); }
.service-list article { display:grid; grid-template-columns:7% 38% 1fr; gap:2vw; border-bottom:1px solid var(--line); padding:32px 0; align-items:start; }
.service-list span { font:10px var(--mono); }
.service-list h3 { font-size:clamp(24px,2.7vw,42px); font-weight:400; margin:0; letter-spacing:-.035em; }
.service-list p { margin:0; font-size:12px; line-height:1.7; max-width:440px; }
.services-cta { display:flex; justify-content:space-between; width:75%; margin:70px 0 0 25%; padding:18px 0; border-bottom:1px solid var(--ink); text-transform:uppercase; font:11px var(--mono); }
.about-teaser { min-height:55vh; display:grid; grid-template-columns:1.1fr 2fr 1fr; gap:3vw; align-items:center; }
.about-number { font-size:clamp(65px,9vw,130px); font-weight:300; letter-spacing:-.1em; line-height:.68; color:var(--red); }
.about-number span { margin-left:25%; }
.about-teaser h2 { font-size:clamp(48px,6vw,88px); line-height:.84; letter-spacing:-.055em; font-weight:400; margin:24px 0; }
.about-teaser h2 em { font-family:var(--serif); }
.about-teaser>div:last-child { align-self:end; margin-bottom:12vh; font-size:13px; line-height:1.7; }
.about-teaser a { display:inline-block; margin-top:35px; font:10px var(--mono); text-transform:uppercase; border-bottom:1px solid; }
.site-footer { background:var(--ink); color:#f0ece3; padding:10vh clamp(24px,5vw,80px) 35px; }
.footer-pitch { font-size:clamp(46px,6.8vw,98px); line-height:.82; letter-spacing:-.055em; }
.footer-pitch span,.footer-pitch em { display:block; }
.footer-pitch em { font-family:var(--serif); margin-left:12vw; }
.circle-link { width:160px; height:160px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; position:relative; margin:80px 8vw 80px auto; font:11px var(--mono); text-transform:uppercase; transition:transform .3s; }
.circle-link:hover { transform:rotate(-8deg) scale(1.04); }
.circle-link>span:last-child { position:absolute; right:32px; top:32px; }
.circle-copy { width:80px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.25); padding-top:25px; display:grid; grid-template-columns:1fr 1fr 1fr; font:9px/1.7 var(--mono); text-transform:uppercase; }
.footer-bottom div { display:flex; flex-direction:column; }
.footer-bottom p:last-child { text-align:right; }
.archive-hero,.text-hero { padding-top:18vh; padding-bottom:9vh; min-height:52vh; display:grid; grid-template-columns:1fr 2.1fr 1fr; align-items:end; }
.archive-hero h1,.text-hero h1 { margin:0; font-size:clamp(64px,9vw,138px); font-weight:400; line-height:.74; letter-spacing:-.07em; }
.archive-hero h1 em,.text-hero h1 em { font-family:var(--serif); }
.archive-hero>p:last-child { font-size:12px; line-height:1.7; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8vh 2vw; padding-bottom:12vh; }
.archive-card { display:grid; grid-template-columns:35px 1fr auto; align-items:baseline; }
.archive-card:nth-child(3n+2) { margin-top:7vh; }
.archive-image { position:relative; grid-column:1/-1; margin-bottom:14px; }
.archive-image img { height:auto; }
.archive-card span,.archive-card p { font:9px var(--mono); text-transform:uppercase; }
.archive-card h2 { font-size:22px; font-weight:400; margin:0; }
.gallery-hero { height:76svh; position:relative; color:#fff; background:#111; }
.gallery-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(0,0,0,.55)); }
.gallery-hero-image,.gallery-hero-image img { width:100%; height:100%; }
.gallery-hero-image { position:relative; }
.gallery-hero-image img { object-fit:contain; }
.gallery-back { position:absolute; z-index:2; top:130px; left:5vw; font:10px var(--mono); text-transform:uppercase; }
.gallery-title { position:absolute; z-index:2; left:5vw; right:5vw; bottom:6vh; display:flex; align-items:end; justify-content:space-between; }
.gallery-title h1 { font-size:clamp(52px,7.5vw,112px); line-height:.84; letter-spacing:-.06em; margin:0; font-weight:400; }
.gallery-title p { order:2; font:10px var(--mono); text-transform:uppercase; }
.gallery-intro { min-height:34vh; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; border-bottom:1px solid var(--line); }
.gallery-intro>p:last-child { grid-column:2; font-size:clamp(20px,2.2vw,32px); line-height:1.3; letter-spacing:-.02em; }
.gallery-section { padding-top:8vh; padding-bottom:4vh; }
.gallery-section-title { display:grid; grid-template-columns:8% 1fr auto; border-top:1px solid; padding:18px 0 70px; align-items:baseline; }
.gallery-section-title span,.gallery-section-title p { font:9px var(--mono); text-transform:uppercase; }
.gallery-section-title h2 { font-size:34px; font-weight:400; margin:0; }
.masonry { columns:var(--gallery-columns,4); column-gap:clamp(8px,1vw,16px); }
.masonry-item { position:relative; display:block; border:0; padding:0; margin:0 0 clamp(8px,1vw,16px); width:100%; background:#d0cbc0; cursor:zoom-in; break-inside:avoid; }
.masonry-item img { height:auto; transition:filter .4s; }
.masonry-item:hover img { filter:brightness(.9); }
.lightbox { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:35px; border:0; background:rgba(12,12,10,.98); color:#fff; }
.lightbox::backdrop { background:#111; }
.lightbox figure { height:100%; margin:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.lightbox img { width:auto; max-width:calc(100vw - 160px); max-height:calc(100vh - 90px); object-fit:contain; }
.lightbox figcaption { font:9px var(--mono); margin-top:12px; }
.lightbox button { position:absolute; z-index:2; border:0; background:none; color:#fff; font:10px var(--mono); text-transform:uppercase; cursor:pointer; }
.lightbox-close { top:25px; right:30px; }
.lightbox-prev { left:25px; top:50%; font-size:24px!important; }
.lightbox-next { right:25px; top:50%; font-size:24px!important; }
.text-hero { display:block; }
.text-hero h1 { margin-top:7vh; font-size:clamp(52px,7.5vw,110px); line-height:.85; }
.process { padding-top:10vh; padding-bottom:10vh; }
.process>div { margin:60px 0 0 25%; }
.process article { display:grid; grid-template-columns:8% 35% 1fr; border-top:1px solid var(--line); padding:30px 0 80px; }
.process span { font:10px var(--mono); }
.process h2 { margin:0; font-size:38px; font-weight:400; }
.process p { font-size:13px; line-height:1.7; margin:0; }
.quote-banner { min-height:50vh; padding:9vh 5vw; background:var(--red); display:flex; flex-direction:column; justify-content:center; }
.quote-banner p { font:10px var(--mono); text-transform:uppercase; }
.quote-banner h2 { font:clamp(52px,9vw,128px)/.84 var(--serif); margin:24px 0; letter-spacing:-.055em; }
.quote-banner a { align-self:flex-end; font:11px var(--mono); text-transform:uppercase; border-bottom:1px solid; }
.about-hero { padding-top:19vh; min-height:82vh; position:relative; }
.about-hero h1 { position:relative; z-index:2; font-size:clamp(62px,9vw,136px); font-weight:400; letter-spacing:-.07em; line-height:.75; margin:10vh 0 0; }
.about-hero h1 em { font-family:var(--serif); margin-left:17vw; }
.about-portrait { position:absolute; width:30vw; top:17vh; right:8vw; }
.about-portrait img { height:auto; }
.about-story { min-height:58vh; padding-top:10vh; padding-bottom:10vh; display:grid; grid-template-columns:1fr 2fr 1fr; background:#d8d2c6; }
.about-story>div { grid-column:2/4; display:grid; grid-template-columns:1.2fr 1fr; gap:6vw; }
.about-story h2 { margin:0; font-size:clamp(38px,4.8vw,68px); line-height:.98; font-weight:400; letter-spacing:-.045em; }
.about-story div p { grid-column:2; line-height:1.8; font-size:14px; margin:0 0 24px; }
.about-values { display:grid; grid-template-columns:repeat(3,1fr); gap:4vw; padding-top:10vh; padding-bottom:10vh; }
.about-values article { border-top:1px solid; padding-top:18px; }
.about-values span { font:10px var(--mono); }
.about-values h3 { font:34px var(--serif); margin:42px 0 22px; }
.about-values p { font-size:12px; line-height:1.7; }
.contact-page { padding-top:17vh; padding-bottom:10vh; display:grid; grid-template-columns:1fr 1fr; gap:8vw; }
.contact-intro h1 { font-size:clamp(48px,6.5vw,92px); font-weight:400; line-height:.82; letter-spacing:-.055em; margin:7vh 0 5vh; }
.contact-intro h1 em { font-family:var(--serif); }
.contact-intro>p:not(.eyebrow) { max-width:440px; line-height:1.7; font-size:14px; }
.contact-intro>a { display:inline-block; margin-top:45px; font:11px var(--mono); text-transform:uppercase; border-bottom:1px solid; }
.contact-form { padding-top:9vh; }
.contact-form label { display:block; border-bottom:1px solid var(--line); margin-bottom:28px; }
.contact-form label span { display:block; font:9px var(--mono); text-transform:uppercase; margin-bottom:12px; }
.contact-form input,.contact-form textarea,.contact-form select { width:100%; border:0; background:transparent; padding:7px 0 16px; outline:none; resize:vertical; font-size:16px; color:var(--ink); }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { box-shadow:0 1px 0 var(--ink); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.contact-form button { width:100%; border:0; background:var(--ink); color:#fff; padding:20px 24px; display:flex; justify-content:space-between; cursor:pointer; text-transform:uppercase; font:10px var(--mono); }
.contact-form button:disabled { opacity:.5; }
.form-status { min-height:20px; font:10px var(--mono); margin-top:15px; }
.honeypot { position:absolute!important; left:-9999px; }
.error-page { min-height:80vh; padding:25vh 5vw 15vh; }
.error-page p { font:10px var(--mono); }
.error-page h1 { font-size:clamp(48px,7vw,100px); font-weight:400; max-width:900px; line-height:.94; }
.error-page a,.error-page button { border:0; border-bottom:1px solid; background:none; padding:5px 0; font:11px var(--mono); text-transform:uppercase; }
.loading-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; font:38px var(--serif); }
.loading-line { width:100px; height:1px; background:var(--line); margin-top:15px; overflow:hidden; }
.loading-line:after { content:''; display:block; width:50%; height:100%; background:var(--red); animation:load 1.1s infinite alternate; }
@keyframes load { from{transform:translateX(-100%)} to{transform:translateX(200%)} }

@media (max-width:800px) {
  .site-header { height:72px; grid-template-columns:1fr auto; }
  .desktop-nav,.header-contact { display:none; }
  .language-toggle { right:72px; }
  .menu-button { display:block; justify-self:end; }
  .mobile-menu { display:flex; position:fixed; z-index:40; inset:0; background:var(--red); padding:120px 25px 35px; flex-direction:column; justify-content:space-between; transform:translateY(-100%); transition:transform .45s cubic-bezier(.7,0,.2,1); }
  .mobile-menu.open { transform:none; }
  .mobile-menu nav { display:flex; flex-direction:column; }
  .mobile-menu nav a { font-size:13vw; letter-spacing:-.055em; line-height:1.15; border-bottom:1px solid rgba(0,0,0,.2); }
  .mobile-menu small { font:9px var(--mono); vertical-align:top; margin-right:15px; }
  .mobile-menu p { font:9px var(--mono); text-transform:uppercase; }
  .hero { min-height:86svh; padding-bottom:10vh; }
  .hero-title { font-size:13vw; line-height:.86; }
  .hero-title em { margin-left:9vw; }
  .hero-kicker { top:105px; }
  .hero-number { display:none; }
  .hero-copy { left:24px; right:24px; bottom:24vh; width:auto; font-size:12px; }
  .hero-index { left:24px; right:24px; bottom:9vh; width:auto; }
  .manifesto { grid-template-columns:1fr; padding-top:13vh; padding-bottom:13vh; min-height:auto; }
  .manifesto-copy { font-size:8.5vw; }
  .manifesto-aside { margin:40px 0 0 20%; }
  .featured { padding-top:11vh; }
  .section-heading { grid-template-columns:1fr; gap:30px; }
  .section-heading h2 { font-size:14vw; }
  .section-heading>a { justify-self:start; }
  .featured-grid { display:block; }
  .project-card,.project-2,.project-3,.project-4,.project-5 { display:block; margin:0 0 8vh; }
  .project-meta { grid-template-columns:28px 1fr auto; }
  .home-interlude { min-height:70vh; }
  .home-interlude blockquote { font-size:9vw; }
  .services { padding-top:12vh; padding-bottom:12vh; }
  .service-list,.services-cta { margin-left:0; width:100%; }
  .service-list article { grid-template-columns:35px 1fr; }
  .service-list article p { grid-column:2; }
  .about-teaser { grid-template-columns:1fr; padding-top:13vh; padding-bottom:13vh; }
  .about-number { position:absolute; opacity:.12; }
  .about-teaser>div:last-child { margin:0 0 0 20%; }
  .footer-pitch { font-size:14vw; }
  .footer-pitch em { margin-left:0; }
  .circle-link { width:130px; height:130px; margin-right:0; }
  .footer-bottom { grid-template-columns:1fr 1fr; gap:30px; }
  .footer-bottom p:last-child { display:none; }
  .archive-hero,.text-hero { display:block; padding-top:19vh; min-height:auto; }
  .archive-hero h1 { margin:8vh 0 6vh; font-size:18vw; }
  .archive-grid { grid-template-columns:1fr; gap:7vh; }
  .archive-card:nth-child(3n+2) { margin-top:0; }
  .gallery-hero { height:68svh; }
  .gallery-back { top:95px; left:24px; }
  .gallery-title { left:24px; right:24px; display:block; }
  .gallery-title h1 { font-size:13vw; }
  .gallery-intro { grid-template-columns:1fr; min-height:34vh; }
  .gallery-intro>p:last-child { grid-column:1; font-size:5.8vw; }
  .gallery-section-title { grid-template-columns:35px 1fr; }
  .gallery-section-title p { grid-column:2; }
  .masonry { columns:2; }
  .lightbox { padding:20px; }
  .lightbox img { max-width:100%; max-height:85vh; }
  .lightbox-prev,.lightbox-next { top:auto; bottom:25px; }
  .process>div { margin-left:0; }
  .process article { grid-template-columns:35px 1fr; padding-bottom:50px; }
  .process p { grid-column:2; margin-top:20px; }
  .about-hero { min-height:72vh; }
  .about-portrait { width:52vw; right:0; height:auto; top:18vh; }
  .about-hero h1 { font-size:16vw; margin-top:9vh; }
  .about-story { grid-template-columns:1fr; }
  .about-story>div { grid-column:1; display:block; }
  .about-story h2 { margin:60px 0; }
  .about-values { grid-template-columns:1fr; gap:70px; }
  .about-values h3 { margin-top:35px; }
  .contact-page { grid-template-columns:1fr; padding-top:16vh; }
  .contact-intro h1 { font-size:14vw; }
  .form-row { grid-template-columns:1fr; gap:0; }
}

@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } .reveal{opacity:1;transform:none} }