@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@1,500&display=swap');
:root { --ink:#171712; --paper:#f0eee7; --acid:#d9ff43; --orange:#f2613f; --blue:#234ee8; --line:rgba(23,23,18,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Manrope",sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid var(--line); position:absolute; z-index:10; width:100%; color:white; }
.wordmark { display:block; width:174px; }
.wordmark img { width:100%; height:auto; filter:brightness(0) invert(1); }
.site-header nav { display:flex; gap:32px; font:400 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.site-header nav a { opacity:.75; }
.site-header nav a:hover { opacity:1; }
.availability { font:400 11px "DM Mono",monospace; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.availability i { width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(217,255,67,.12); }
.hero { min-height:100vh; background:var(--blue); color:#fff; display:grid; grid-template-columns:58% 42%; position:relative; overflow:hidden; padding-top:82px; }
.hero-copy { padding:10vh 5vw 9vh; z-index:2; }
.kicker,.section-label,.eyebrow { font:400 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.hero h1 { font-size:clamp(64px,7.4vw,126px); letter-spacing:-.07em; line-height:.82; margin:7vh 0 5vh; font-weight:500; max-width:900px; }
.hero h1 em,.work h2 em { font-family:"Playfair Display",serif; font-weight:500; letter-spacing:-.03em; color:var(--acid); }
.hero-intro { max-width:610px; font-size:18px; line-height:1.65; opacity:.84; }
.hero-actions { display:flex; align-items:center; gap:32px; margin-top:36px; }
.button { display:inline-flex; align-items:center; gap:38px; padding:17px 21px; font:500 12px "DM Mono",monospace; text-transform:uppercase; }
.button-dark { background:var(--ink); color:white; }
.button-dark span { color:var(--acid); }
.text-link { font:500 12px "DM Mono",monospace; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:4px; }
.portrait-wrap { height:calc(100vh - 82px); align-self:end; position:relative; background:#b73f29; overflow:hidden; }
.portrait-wrap img { height:100%; object-fit:cover; object-position:center top; }
.portrait-note { position:absolute; z-index:2; bottom:8%; left:8%; font-family:"Playfair Display",serif; font-style:italic; font-size:30px; line-height:1.05; margin:0; }
.vertical-note { position:absolute; z-index:2; top:32px; right:24px; color:var(--ink); writing-mode:vertical-rl; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.15em; }
.scroll-cue { position:absolute; bottom:28px; left:5vw; font:400 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; opacity:.7; }
.manifesto,.work,.evolution,.impact { padding:110px 5vw; }
.section-label { margin:0 0 58px; display:flex; align-items:center; gap:14px; }
.section-label:after { content:""; height:1px; width:60px; background:currentColor; opacity:.5; }
.manifesto-grid,.impact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:10vw; align-items:start; }
.manifesto h2,.impact h2 { font-size:clamp(46px,5.5vw,88px); letter-spacing:-.055em; line-height:.98; margin:0; font-weight:500; }
.manifesto-grid p,.impact-grid p { font-size:16px; line-height:1.75; color:#55554d; }
.manifesto-grid .lead,.impact-grid .lead { font-size:24px; color:var(--ink); line-height:1.45; margin-top:0; }
.discipline-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:100px; border-top:1px solid var(--line); }
.discipline-grid article { padding:32px 30px 34px 0; border-right:1px solid var(--line); }
.discipline-grid article:not(:first-child) { padding-left:24px; }
.discipline-grid article:last-child { border:0; }
.discipline-grid span,.timeline span { font:400 10px "DM Mono",monospace; opacity:.5; }
.discipline-grid h3 { font-size:clamp(36px,3.2vw,52px); letter-spacing:-.04em; margin:32px 0 18px; font-weight:500; }
.discipline-grid p { max-width:290px; color:#55554d; line-height:1.65; font-size:15px; }
.proof-strip { background:var(--acid); display:grid; grid-template-columns:repeat(4,1fr); padding:48px 5vw; }
.proof-strip div { display:flex; gap:18px; align-items:center; border-right:1px solid rgba(23,23,18,.25); padding-left:24px; }
.proof-strip div:first-child { padding-left:0; }
.proof-strip div:last-child { border:0; }
.proof-strip strong { font-size:50px; letter-spacing:-.06em; }
.proof-strip span { font:400 10px/1.5 "DM Mono",monospace; text-transform:uppercase; }
.work { background:var(--ink); color:white; }
.section-heading { display:grid; grid-template-columns:1fr 1.4fr .7fr; gap:5vw; align-items:end; margin-bottom:90px; }
.section-heading .section-label { align-self:start; margin:0; }
.section-heading h2,.journey-intro h2,.evolution h2 { font-size:clamp(54px,7vw,102px); line-height:.9; letter-spacing:-.06em; font-weight:500; margin:0; }
.section-heading>p:last-child { color:#aaa9a0; line-height:1.6; font-size:14px; }
.product { display:grid; grid-template-columns:50px 1.3fr .7fr; gap:4vw; padding:45px 0; border-top:1px solid rgba(255,255,255,.18); align-items:center; }
.product-number { font:400 12px "DM Mono",monospace; color:var(--acid); align-self:start; }
.product-image { overflow:hidden; background:#2b2b26; }
.product-image img { aspect-ratio:7/5; object-fit:cover; object-position:center; transition:transform .5s ease; }
.product-image:hover img { transform:scale(1.025); }
.product-copy h3 { font-size:45px; letter-spacing:-.04em; margin:8px 0 20px; font-weight:500; }
.product-copy>p:not(.eyebrow) { color:#bbb9b0; font-size:14px; line-height:1.65; }
.product-copy>span { display:block; font:400 10px "DM Mono",monospace; color:#817f77; margin:22px 0; }
.product-copy>a { font:500 11px "DM Mono",monospace; text-transform:uppercase; color:var(--acid); }
.work-portfolio-button { margin:48px 0 0 94px; background:var(--acid); color:var(--ink); }
.evolution { background:#e6e1d7; }
.evolution h2 { max-width:720px; margin-bottom:80px; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.timeline article { padding:24px 28px 40px 0; border-right:1px solid var(--line); }
.timeline article:not(:first-child) { padding-left:28px; }
.timeline article:last-child { border-right:0; }
.timeline h3 { font-size:24px; line-height:1.15; min-height:58px; margin:42px 0 14px; }
.timeline p { color:#68675f; font-size:13px; line-height:1.65; }
.skill-line { display:flex; flex-wrap:wrap; gap:9px; padding-top:42px; border-top:1px solid var(--line); }
.skill-line span { border:1px solid var(--line); border-radius:100px; padding:8px 13px; font:400 10px "DM Mono",monospace; text-transform:uppercase; }
.journeys { background:var(--orange); padding:110px 5vw 120px; }
.journey-intro { display:grid; grid-template-columns:1.3fr .7fr; gap:10vw; align-items:end; margin-bottom:70px; }
.journey-intro .section-label { margin-bottom:60px; }
.journey-intro>p { font-size:17px; line-height:1.7; margin:0; }
.scroll-gallery { height:auto; position:relative; }
.photo-grid { position:relative; width:100%; display:flex; flex-direction:column; gap:12px; }
.photo-grid-upper { width:100%; aspect-ratio:10/8; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(8,1fr); gap:12px; overflow:hidden; }
.photo { margin:0; position:relative; overflow:hidden; background:#c34d32; }
.photo img { height:100%; object-fit:cover; filter:saturate(.85); transition:transform .6s ease; }
.photo-swap { backface-visibility:hidden; will-change:transform,opacity,clip-path; }
.effect-flip-x { animation:flipX .62s cubic-bezier(.2,.75,.25,1) both; }
.effect-flip-y { animation:flipY .62s cubic-bezier(.2,.75,.25,1) both; }
.effect-slide-left { animation:slideLeft .55s cubic-bezier(.2,.75,.25,1) both; }
.effect-slide-up { animation:slideUp .55s cubic-bezier(.2,.75,.25,1) both; }
.effect-zoom { animation:zoomIn .55s ease-out both; }
.effect-tilt-left { animation:tiltLeft .62s cubic-bezier(.2,.75,.25,1) both; transform-origin:left center; }
.effect-tilt-right { animation:tiltRight .62s cubic-bezier(.2,.75,.25,1) both; transform-origin:right center; }
.effect-wipe { animation:wipeIn .58s ease-out both; }
@keyframes flipX { from { opacity:.15; transform:perspective(900px) rotateX(78deg) scale(.92); } to { opacity:1; transform:perspective(900px) rotateX(0) scale(1); } }
@keyframes flipY { from { opacity:.15; transform:perspective(900px) rotateY(-78deg) scale(.92); } to { opacity:1; transform:perspective(900px) rotateY(0) scale(1); } }
@keyframes slideLeft { from { opacity:.1; transform:translateX(16%) scale(1.06); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes slideUp { from { opacity:.1; transform:translateY(16%) scale(1.06); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes zoomIn { from { opacity:.15; transform:scale(1.22); } to { opacity:1; transform:scale(1); } }
@keyframes tiltLeft { from { opacity:.15; transform:perspective(900px) rotateY(65deg) scale(.9); } to { opacity:1; transform:perspective(900px) rotateY(0) scale(1); } }
@keyframes tiltRight { from { opacity:.15; transform:perspective(900px) rotateY(-65deg) scale(.9); } to { opacity:1; transform:perspective(900px) rotateY(0) scale(1); } }
@keyframes wipeIn { from { clip-path:inset(0 100% 0 0); transform:scale(1.08); } to { clip-path:inset(0 0 0 0); transform:scale(1); } }
.photo:hover img { transform:scale(1.025); }
.photo figcaption { position:absolute; inset:auto 0 0; padding:45px 16px 14px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.65)); display:flex; justify-content:space-between; align-items:end; }
.photo figcaption span { max-width:72%; font:400 9px/1.35 "DM Mono",monospace; text-transform:uppercase; }
.photo figcaption small { font-size:11px; opacity:.8; }
.photo-1 { grid-column:1/8; grid-row:1/6; }
.photo-2 { grid-column:8/13; grid-row:1/4; }
.photo-3 { grid-column:8/13; grid-row:4/9; }
.photo-4 { grid-column:1/5; grid-row:6/9; }
.photo-5 { grid-column:5/8; grid-row:6/9; }
.photo-6 { width:100%; aspect-ratio:7/5; }
.journeys .button { margin-top:38px; background:var(--paper); }
.impact { background:var(--acid); }
.impact .text-link { display:inline-block; margin-top:20px; }
footer { background:var(--blue); color:white; padding:100px 5vw 30px; text-align:center; }
footer .section-label { margin-bottom:70px; }
footer .section-label { justify-content:center; }
footer h2 { font-size:clamp(56px,8vw,124px); line-height:.9; letter-spacing:-.065em; font-weight:500; margin:0 0 70px; }
.email { appearance:none; padding:0 0 5px; background:none; border:0; border-bottom:2px solid var(--acid); color:var(--acid); font:inherit; font-size:clamp(24px,4vw,62px); letter-spacing:-.04em; cursor:pointer; }
.footer-bottom { margin-top:100px; padding-top:24px; border-top:1px solid rgba(255,255,255,.25); display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:24px; font:400 10px/1.5 "DM Mono",monospace; text-transform:uppercase; }
.footer-bottom p { margin:0; max-width:500px; opacity:.65; }
.footer-bottom div { display:flex; justify-content:center; gap:22px; }
.contact-dialog { width:min(680px,calc(100% - 28px)); padding:54px; border:0; background:var(--paper); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.35); }
.contact-dialog::backdrop { background:rgba(23,23,18,.78); backdrop-filter:blur(6px); }
.contact-dialog h2 { margin:20px 0 38px; font-size:clamp(38px,6vw,64px); line-height:.95; letter-spacing:-.05em; font-weight:500; }
.dialog-close { position:absolute; top:18px; right:22px; border:0; background:none; color:var(--ink); font-size:34px; line-height:1; cursor:pointer; }
.contact-form { display:grid; gap:22px; }
.contact-form label { display:grid; gap:8px; text-align:left; font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.contact-form input,.contact-form textarea { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 0; background:transparent; color:var(--ink); font:400 16px "Manrope",sans-serif; outline:none; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--blue); }
.form-trap { position:absolute!important; left:-9999px!important; }
.form-submit { justify-self:start; border:0; background:var(--blue); color:white; cursor:pointer; }
.form-submit:disabled { opacity:.55; cursor:wait; }
.form-status { min-height:20px; margin:0; color:#55554d; font-size:13px; text-align:left; }

@media (max-width:900px) {
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-bottom:0; }
  .hero-copy { padding:11vh 6vw 7vh; }
  .hero h1 { font-size:clamp(58px,15vw,90px); }
  .portrait-wrap { height:72vh; }
  .scroll-cue { display:none; }
  .manifesto,.work,.evolution,.impact,.journeys { padding:80px 6vw; }
  .manifesto-grid,.impact-grid,.journey-intro,.section-heading { grid-template-columns:1fr; gap:45px; }
  .discipline-grid,.timeline,.proof-strip { grid-template-columns:1fr 1fr; }
  .discipline-grid article:nth-child(2) { border-right:0; }
  .proof-strip div { border-bottom:1px solid rgba(23,23,18,.25); padding:20px; }
  .product { grid-template-columns:35px 1fr; }
  .product-image { grid-column:2; }
  .product-copy { grid-column:2; }
  .photo-grid,.photo-grid-upper { gap:10px; }
  .footer-bottom { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .site-header { padding:0 6vw; }
  .wordmark { width:138px; }
  .availability { font-size:9px; }
  .hero-copy { padding-top:8vh; }
  .hero-intro { font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .manifesto h2,.impact h2 { font-size:44px; }
  .discipline-grid,.timeline,.proof-strip { grid-template-columns:1fr; }
  .discipline-grid article,.discipline-grid article:not(:first-child),.timeline article,.timeline article:not(:first-child) { padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
  .discipline-grid h3,.timeline h3 { margin-top:20px; min-height:0; }
  .proof-strip div { padding:18px 0; border-right:0; }
  .section-heading h2,.journey-intro h2,.evolution h2 { font-size:55px; }
  .product { grid-template-columns:1fr; gap:20px; }
  .product-number,.product-image,.product-copy { grid-column:1; }
  .work-portfolio-button { margin:36px 0 0; width:100%; justify-content:space-between; }
  .photo-grid,.photo-grid-upper { gap:12px; }
  .photo-grid-upper { display:flex; flex-direction:column; aspect-ratio:auto; overflow:visible; }
  .photo-grid-upper .photo { width:100%; flex:none; }
  .photo-1,.photo-3,.photo-6 { aspect-ratio:7/5; }
  .photo-2,.photo-4,.photo-5 { aspect-ratio:4/5; }
  footer h2 { font-size:55px; }
  .email { font-size:20px; }
  .footer-bottom div { flex-wrap:wrap; }
  .contact-dialog { padding:42px 24px 30px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }