@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root { --charcoal:#171918; --ink:#f2f0e8; --muted:#b8c2bc; --line:rgba(242,240,232,.24); --blue:#112c3c; --green:#315b45; --green-light:#a8c6ad; --header-space:70px; --footer-space:54px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--charcoal); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; font-size:16px; line-height:1.5; margin:0; overflow-x:hidden; padding-bottom:var(--footer-space); }
a { color:inherit; text-decoration:none; }
h1,h2,p { margin-top:0; }
h1,h2 { font-weight:500; letter-spacing:-.055em; line-height:.98; }

.site-header { align-items:center; backdrop-filter:blur(10px); background:color-mix(in srgb,var(--charcoal) 94%,transparent); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:20px 4vw; position:sticky; top:0; z-index:20; }
.wordmark { font-family:"Playfair Display",serif; font-size:24px; font-weight:600; letter-spacing:-.04em; opacity:0; transform:translateY(-5px); transition:opacity .22s ease,transform .22s ease,visibility .22s; visibility:hidden; }
.site-header.wordmark-visible .wordmark { opacity:1; transform:translateY(0); visibility:visible; }
.site-nav { display:flex; font-size:13px; gap:22px; }
.site-nav a:hover,.arrow-link:hover,.email-link:hover { color:var(--green-light); }
.menu-button { background:none; border:0; color:var(--ink); display:none; font:inherit; }

.hero,.section,.contact-section { padding-left:8vw; padding-right:8vw; }
.hero { background:var(--charcoal); display:flex; flex-direction:column; justify-content:center; min-height:calc(100svh - 69px); padding-bottom:90px; padding-top:80px; position:relative; z-index:1; }
.hero-main { align-items:center; display:grid; gap:4vw; grid-template-columns:.75fr 1.25fr; }
.hero-logo { display:block; justify-self:start; max-width:440px; transform:translateY(clamp(24px,3vw,52px)); width:100%; }
.eyebrow { color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.02em; margin-bottom:15px; text-transform:uppercase; }
h1 { font-size:clamp(48px,8.3vw,130px); margin-bottom:0; max-width:1100px; }
h1 em { color:var(--green-light); font-family:"Playfair Display",serif; font-weight:500; }
.hero-copy { display:grid; gap:22px 4vw; grid-template-columns:.75fr 1.25fr; margin-top:55px; }
.hero-copy p,.hero-copy .arrow-link { grid-column:2; }
.hero-copy p { color:var(--muted); max-width:410px; }
.arrow-link { border-bottom:1px solid currentColor; font-size:14px; justify-self:start; padding-bottom:5px; }
.arrow-link span { color:var(--green-light); margin-left:8px; }

.work-scroll { --banner-width:min(88vw,calc(117svh - 145px)); --banner-edge:max(24px,6vw,calc(50vw - 58.5svh + 72.5px)); height:calc(300svh + 480vw); margin-top:-100svh; position:relative; z-index:0; }
.work-sticky { height:100svh; overflow:hidden; padding:var(--header-space) 0 var(--footer-space); position:sticky; top:0; }
.work-track { align-items:center; display:flex; gap:var(--banner-edge); height:100%; padding:0 var(--banner-edge); transform:translate3d(0,0,0); width:max-content; will-change:transform; }
.work-banner { background:var(--charcoal); flex:0 0 var(--banner-width); margin:0; overflow:visible; transform:scale(var(--banner-scale,1)); transform-origin:center; transition:transform .18s ease-out; width:var(--banner-width); }
.work-banner a { display:block; width:100%; }
.work-banner img { aspect-ratio:3 / 2; display:block; height:auto; object-fit:cover; width:100%; }
.work-banner a:focus-visible { outline:5px solid var(--green-light); outline-offset:-9px; }
.sr-only { height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; clip:rect(0,0,0,0); white-space:nowrap; }

.section { border-top:1px solid var(--line); padding-bottom:110px; padding-top:95px; }
.section-heading h2,.future-section h2 { font-size:clamp(38px,5vw,75px); margin-bottom:0; max-width:760px; }
.future-section { background:var(--blue); margin-top:-100svh; min-height:65svh; position:relative; z-index:1; }
.future-heading { margin-bottom:58px; max-width:760px; }
.future-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.future-copy,.future-image { margin:0; min-height:0; overflow:hidden; }
.future-copy { align-self:center; aspect-ratio:1 / .68; background:#173749; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px,2.7vw,46px); }
.future-image { aspect-ratio:1 / .68; }
.future-copy:nth-of-type(2),.future-copy:nth-of-type(3),.future-copy:nth-of-type(6) { background:#173042; }
.future-copy h3 { color:var(--ink); font-family:"Playfair Display",serif; font-size:clamp(27px,3vw,50px); font-weight:500; letter-spacing:-.045em; line-height:.98; margin:10px 0 13px; }
.future-copy > p:not(.status) { color:#b7c5cd; line-height:1.4; margin:0; max-width:270px; }
.future-image img { display:block; height:100%; object-fit:cover; width:100%; }
.branding-image img { object-position:89% 51%; transform:scale(1.85); }
.textile-image img { object-position:28% 30%; transform:scale(1.65); }
.artist-book-image img { object-position:75% 50%; transform:scale(2.25); }
.logos-image { background:#d6ad53; }
.logos-image img { object-position:50% 50%; transform:scale(1.8); }
.blogs-image img { object-position:55% 51%; transform:scale(1.2); }
.systems-image img { object-position:50% 48%; transform:scale(1.28); }
.status { color:var(--green-light); font:11px "DM Mono",monospace; letter-spacing:.02em; text-transform:uppercase; }
.split-section { display:grid; gap:10vw; grid-template-columns:1fr 1fr; min-height:65svh; }
.body-copy { font-size:20px; max-width:500px; }
.contact-section { background:var(--green); color:#fff8ee; padding-bottom:115px; padding-top:105px; }
.contact-section .eyebrow,.contact-note { color:var(--green-light); }
.contact-section h2 { font-size:clamp(42px,6vw,92px); margin-bottom:55px; }
.email-link { border-bottom:1px solid #fff8ee; font-size:clamp(22px,3vw,43px); padding-bottom:8px; }
.contact-note { font:11px "DM Mono",monospace; letter-spacing:.02em; margin:35px 0 0; }
footer { align-items:center; background:color-mix(in srgb,var(--charcoal) 96%,transparent); border-top:1px solid var(--line); bottom:0; color:var(--muted); display:flex; font:11px "DM Mono",monospace; height:var(--footer-space); justify-content:space-between; left:0; padding:0 4vw; position:fixed; right:0; z-index:30; }

@media (max-width:760px) {
  :root { --header-space:67px; --footer-space:42px; }
  .site-header { padding:17px 6vw; }
  .wordmark { font-size:21px; }
  .menu-button { display:block; }
  .site-nav { background:var(--charcoal); border-bottom:1px solid var(--line); display:none; flex-direction:column; gap:16px; left:0; padding:20px 6vw; position:absolute; right:0; top:67px; }
  .site-nav.open { display:flex; }
  .hero,.section,.contact-section { padding-left:6vw; padding-right:6vw; }
  .hero { min-height:75svh; padding-top:50px; }
  .hero-main,.hero-copy,.split-section { display:block; }
  .hero-logo { margin:38px auto 60px; max-width:300px; transform:none; }
  .hero-copy { margin-top:38px; }
  .hero-copy .arrow-link { display:inline-block; margin-top:18px; }
  .work-scroll { --banner-width:min(76vw,calc((100svh - 128px) * .6667)); --banner-edge:calc((100vw - var(--banner-width)) / 2); display:block; height:calc(300svh + 500vw); margin-top:-100svh; }
  .work-sticky { height:100svh; max-height:none; overflow:hidden; padding:var(--header-space) 0 var(--footer-space); position:sticky; scroll-snap-type:none; width:auto; }
  .work-track { gap:var(--banner-edge); padding:0 var(--banner-edge); transform:translate3d(0,0,0); }
  .work-banner { flex-basis:var(--banner-width); scroll-snap-align:none; width:var(--banner-width); }
  .work-banner img { aspect-ratio:auto; object-position:center; }
  .section { padding-bottom:75px; padding-top:66px; }
  .future-section { margin-top:-100svh; }
  .future-section,.split-section { min-height:0; }
  .future-heading { margin-bottom:38px; }
  .future-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .future-copy { aspect-ratio:1 / .76; }
  .future-image { aspect-ratio:1 / .76; }
  .future-copy { padding:22px; }
  .future-copy h3 { font-size:clamp(26px,7.4vw,42px); }
  .future-copy > p:not(.status) { font-size:14px; }
  .body-copy { margin-top:35px; }
  .contact-section { padding-bottom:80px; padding-top:75px; }
  footer { font-size:9px; padding:0 6vw; }
  .footer-note { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .work-scroll { height:auto; margin-top:0; }
  .future-section { margin-top:0; }
  .work-sticky { height:auto; overflow:visible; position:static; }
  .work-track { display:block; transform:none !important; }
  .work-banner { height:auto; transform:none; width:100%; }
  .work-banner a { padding:0; }
  .work-banner img { height:auto; object-fit:contain; width:100%; }
}