@import url('./tokens.css');
*{box-sizing:border-box}html{background:var(--black);color:#fff;scroll-behavior:smooth}body{margin:0;background:var(--black);font:300 var(--body)/1.65 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}button,input,textarea{font:inherit}.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:linear-gradient(#050505b8,transparent);transition:.3s}.site-header.scrolled{background:#050505e8;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff12}.brand img{width:82px;height:94px;object-fit:contain}.site-header nav{display:flex;gap:38px}.site-header nav a,.menu-btn{font-size:14px;letter-spacing:.16em;text-transform:uppercase}.site-header nav a:hover{color:var(--red)}.menu-btn{display:none;border:0;background:none;color:#fff}.mobile-menu{position:fixed;z-index:150;inset:0;background:var(--red);display:none;flex-direction:column;justify-content:center;padding:9vw}.mobile-menu.open{display:flex}.mobile-menu a{font:400 clamp(46px,10vw,90px)/1.08 var(--serif)}.close-menu{position:absolute;right:6vw;top:5vw;background:none;border:0;color:#fff;font-size:42px}.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}.hero-media,.hero-media:after{position:absolute;inset:0}.hero-media:after{content:'';background:linear-gradient(90deg,#0009 0,#0003 50%,#0004),linear-gradient(0deg,#000b 0,transparent 52%)}.hero-media img{position:absolute;inset:0;animation:slowZoom 16s ease-out both}.hero-copy{position:relative;z-index:2;width:var(--page);margin:0 auto;padding:0 0 clamp(58px,9vh,120px)}.eyebrow,.kicker{margin:0 0 18px;font-size:var(--small);letter-spacing:.18em;text-transform:uppercase;color:#eee}.hero h1,.display{font:400 var(--hero)/.88 var(--serif);letter-spacing:-.045em;margin:0;max-width:1300px}.hero h1 em,.display em,h2 em{font-weight:400;color:var(--red)}.hero-sub{margin:28px 0 0;max-width:720px;font-size:clamp(17px,1.45vw,22px);color:#ddd}.hero-actions{display:flex;gap:12px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid #fff;background:#fff;color:#000;font-size:10px;letter-spacing:.17em;text-transform:uppercase;transition:.25s}.button:hover{background:var(--red);border-color:var(--red);color:#fff}.button.ghost{background:transparent;color:#fff}.scroll-index{position:absolute;z-index:3;right:4vw;bottom:40px;font-size:11px;letter-spacing:.16em;writing-mode:vertical-rl;color:#aaa}.section{width:var(--page);margin:auto;padding:var(--section) 0}.section-head{display:grid;grid-template-columns:.7fr 1.5fr;gap:var(--gap);margin-bottom:clamp(52px,7vw,100px)}.section-head h2{font:400 var(--h2)/1.02 var(--serif);letter-spacing:-.03em;margin:0}.section-head p{max-width:620px;color:#bbb}.section-head>h2{font-size:clamp(36px,4.65vw,70px)}.work-grid{width:min(1640px,96vw);margin:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,64px) 18px;padding-bottom:var(--section)}.work-card{grid-column:span 6}.work-card.wide{grid-column:span 12}.work-media{position:relative;aspect-ratio:1.28;overflow:hidden;background:#111}.work-card.wide .work-media{aspect-ratio:2/1}.work-media img{transition:transform .8s var(--ease),filter .5s}.work-card:hover img{transform:scale(1.035);filter:brightness(.78)}.work-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(22px,3vw,42px);background:linear-gradient(transparent 35%,#000d);opacity:0;transition:.35s}.work-card:hover .work-overlay{opacity:1}.work-title-overlay{position:absolute;left:clamp(22px,3vw,42px);right:clamp(22px,3vw,42px);bottom:clamp(20px,2.7vw,38px);z-index:2;text-shadow:0 2px 20px #0008}.work-title-overlay h3{font:400 clamp(28px,3.4vw,54px)/.98 var(--serif);letter-spacing:-.03em;margin:0}.work-title-overlay p{margin:8px 0 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#ddd}.work-meta{display:flex;justify-content:space-between;gap:20px;padding:16px 1px 0}.work-meta h3{font:400 var(--h3)/1.05 var(--serif);margin:0}.work-meta p{margin:4px 0 0;color:#888;font-size:13px;letter-spacing:.06em}.manifesto{background:#f1eee8;color:#111}.manifesto .inner{width:var(--page);margin:auto;padding:var(--section) 0;display:grid;grid-template-columns:.65fr 1.6fr;gap:var(--gap)}.manifesto h2{font:400 var(--display)/.98 var(--serif);letter-spacing:-.04em;margin:0}.manifesto p{max-width:680px;font-size:clamp(18px,1.7vw,25px);line-height:1.55}.making{min-height:86vh;position:relative;display:flex;align-items:end;background-size:cover;background-position:center;background-attachment:fixed}.making:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000b,#0003),linear-gradient(0deg,#000b,transparent)}.making-copy{position:relative;z-index:2;width:var(--page);margin:auto;padding:var(--section) 0}.making-copy h2{max-width:980px;font:400 var(--display)/.98 var(--serif);letter-spacing:-.04em;margin:0 0 30px}.making-copy p{max-width:620px;color:#ddd}.capabilities{width:var(--page);margin:auto;padding:var(--section) 0}.cap-list{border-top:1px solid var(--line)}.cap-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:var(--gap);padding:34px 0;border-bottom:1px solid var(--line);transition:.25s}.cap-row:hover{padding-left:16px;background:#ffffff04}.cap-row .n{color:var(--red);font-size:13px}.cap-row h3{font:400 var(--h3)/1 var(--serif);margin:0}.cap-row p{margin:0;color:#aaa}.china{background:var(--red);color:#fff}.china .inner{width:var(--page);margin:auto;padding:var(--section) 0}.china h2{font:400 var(--display)/.96 var(--serif);letter-spacing:-.04em;margin:0;max-width:1200px}.china h2 em{color:#000}.china p{max-width:660px;margin:42px 0 0;font-size:clamp(18px,1.7vw,25px)}.cta{width:var(--page);margin:auto;padding:var(--section) 0;display:grid;grid-template-columns:1.4fr .6fr;gap:var(--gap);align-items:end}.cta h2{font:400 var(--display)/.95 var(--serif);letter-spacing:-.04em;margin:0}.cta p{color:#aaa;max-width:480px}.filters{width:min(1640px,96vw);margin:0 auto 50px;display:flex;flex-wrap:wrap;gap:8px}.filters button{border:1px solid #444;border-radius:99px;background:none;color:#fff;padding:9px 16px;font-size:12px;letter-spacing:.08em;cursor:pointer}.filters button.active,.filters button:hover{background:var(--red);border-color:var(--red)}.service-hero,.page-hero{min-height:72svh}.service-grid{width:var(--page);margin:auto;padding-bottom:var(--section)}.service-item{display:grid;grid-template-columns:90px 1fr 1fr;gap:var(--gap);padding:clamp(40px,5vw,76px) 0;border-top:1px solid var(--line)}.service-item:last-child{border-bottom:1px solid var(--line)}.service-item .n{color:var(--red)}.service-item h2{font:400 var(--h2)/1 var(--serif);margin:0}.service-item .tags{color:#fff}.service-item .desc{color:#aaa;max-width:560px}.contact-grid{width:100%;margin:auto;padding:var(--section) max(4vw,calc((100vw - 1480px)/2));display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,140px);background:#f1eee8;color:#111;align-items:start}.contact-grid .contact-copy{order:2}.contact-grid form{order:1}.contact-grid .display{font-size:clamp(42px,5.2vw,78px);line-height:1}.contact-grid .contact-copy>p:last-child{max-width:520px;color:#555}.contact-grid .kicker{color:#555}form{display:grid;gap:26px}label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#333}input,textarea{display:block;width:100%;margin-top:8px;padding:14px 0;background:transparent;border:0;border-bottom:1px solid #999;color:#111;outline:0}input:focus,textarea:focus{border-color:var(--red)}textarea{min-height:130px}.contact-red{background:var(--red);padding:var(--section) 4vw;text-align:center}.contact-red a{font:400 clamp(34px,6vw,86px)/1 var(--serif)}footer{width:var(--page);margin:auto;padding:44px 0 60px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#888;font-size:13px}.missing{width:100%;height:100%;min-height:300px;background:#111;display:grid;place-items:center;color:#555}.missing span{font-size:44px}@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(max-width:900px){.site-header nav{display:none}.menu-btn{display:block}.section-head,.manifesto .inner,.cta,.contact-grid{grid-template-columns:1fr}.work-card{grid-column:span 12}.work-card.wide .work-media,.work-media{aspect-ratio:1.2}.cap-row,.service-item{grid-template-columns:50px 1fr}.cap-row p,.service-item>div:last-child{grid-column:2}.making{background-attachment:scroll}}
@media(max-width:600px){.site-header{padding:0 6vw}.brand img{width:66px;height:76px}.hero-copy{width:88vw}.hero-actions{flex-direction:column;align-items:flex-start}.work-grid,.section,.capabilities,.cta,.contact-grid,.filters,footer{width:88vw}.manifesto .inner,.making-copy,.china .inner,.service-grid{width:88vw}.work-grid{gap:44px}.work-meta{display:block}.cap-row,.service-item{grid-template-columns:36px 1fr}.scroll-index{display:none}footer{display:block}footer a{display:block;margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* V8.4 — unified typography hierarchy */
:root{
  --ui-label-size:16px;
  --ui-label-weight:500;
  --ui-label-tracking:.12em;
  --support-weight:300;
}

.site-header nav a,
.menu-btn,
.kicker,
label,
.btn,
.filters button,
.project-meta,
.card-meta,
.eyebrow,
.overline,
.surtitle {
  font-family:var(--sans);
  font-size:var(--ui-label-size);
  font-weight:var(--ui-label-weight);
  line-height:1.2;
  letter-spacing:var(--ui-label-tracking);
  text-transform:uppercase;
}

.hero-sub,
.section-head p,
.contact-grid .contact-copy>p:last-child,
.editorial-copy,
.intro-copy,
.lead-copy {
  font-weight:var(--support-weight);
}

.hero-sub {
  font-family:var(--sans);
  letter-spacing:0;
}

.contact-grid label {
  color:#333;
}

.contact-grid .kicker {
  color:#555;
}


/* V8.5 — interaction polish, deliberately restrained */
.hero-sub,
.section-head p,
.contact-grid .contact-copy>p:last-child,
.editorial-copy,
.intro-copy,
.lead-copy {
  font-weight:300 !important;
}

/* Project cards: keep title and action in distinct zones */
.work-card,
.project-card {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.work-card .work-info,
.project-card .work-info,
.work-card .project-info,
.project-card .project-info {
  position:relative;
  z-index:3;
}

.work-card .view-project,
.project-card .view-project,
.work-card [class*="view"],
.project-card [class*="view"] {
  margin-left:auto;
}

/* A restrained reinterpretation of the historic red flip-box language:
   a red panel turns into view on hover, without covering the project title. */
.work-card::after,
.project-card::after {
  content:"VIEW PROJECT";
  position:absolute;
  right:18px;
  bottom:18px;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  font-family:var(--sans);
  font-size:var(--ui-label-size);
  font-weight:var(--ui-label-weight);
  line-height:1.15;
  letter-spacing:var(--ui-label-tracking);
  text-transform:uppercase;
  text-align:center;
  transform:perspective(500px) rotateY(90deg);
  transform-origin:right center;
  opacity:0;
  z-index:4;
  transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .18s ease;
  pointer-events:none;
}

.work-card:hover::after,
.project-card:hover::after {
  transform:perspective(500px) rotateY(0);
  opacity:1;
}

.work-card img,
.project-card img {
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s ease;
}

.work-card:hover img,
.project-card:hover img {
  transform:scale(1.025);
  filter:brightness(.88);
}

/* Small movement cues elsewhere, without turning the site into an animation demo */
.btn,
.site-header nav a {
  transition:opacity .2s ease, transform .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.site-header nav a:hover { opacity:.58; }

@media (prefers-reduced-motion:reduce){
  .work-card::after,.project-card::after,
  .work-card img,.project-card img,.btn,.site-header nav a{transition:none!important}
}


/* V9 — Design · Material · Craft · Industry */
.philosophy{width:var(--page);margin:auto;padding:var(--section) 0}
.philosophy-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.philosophy-grid article{min-height:330px;padding:34px 28px 40px 0;border-right:1px solid var(--line);position:relative}
.philosophy-grid article+article{padding-left:28px}
.philosophy-grid article:last-child{border-right:0}
.philosophy-grid span,.journey-steps span{color:var(--red);font-size:var(--ui-label-size);letter-spacing:var(--ui-label-tracking)}
.philosophy-grid h3,.journey-steps h3{font:400 clamp(30px,3vw,48px)/1 var(--serif);margin:72px 0 18px}
.philosophy-grid p{color:#aaa;max-width:270px;margin:0}
.material-section{background:#f1eee8;color:#111;padding:var(--section) 0}
.material-intro{width:var(--page);margin:auto;display:grid;grid-template-columns:.65fr 1.15fr .8fr;gap:var(--gap);align-items:end;margin-bottom:70px}
.material-intro h2{font:400 var(--display)/.98 var(--serif);letter-spacing:-.04em;margin:0}
.material-intro p:last-child{color:#555;max-width:430px}
.material-strip{width:min(1640px,96vw);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.material-tile{aspect-ratio:.9;background-size:cover;background-position:center;position:relative;overflow:hidden}
.material-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 55%);transition:.45s}
.material-tile:after{content:"";position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:0;transition:.4s}
.material-tile:hover:after{opacity:.34}
.material-tile:hover:before{opacity:.65}
.material-tile span{position:absolute;z-index:2;left:24px;bottom:22px;color:#fff;font-size:var(--ui-label-size);font-weight:var(--ui-label-weight);letter-spacing:var(--ui-label-tracking)}
.journey{background:var(--red);color:#fff;padding:var(--section) max(4vw,calc((100vw - 1480px)/2))}
.journey-head{display:grid;grid-template-columns:.65fr 1.4fr .65fr;gap:var(--gap);align-items:end;margin-bottom:90px}
.journey-head h2{font:400 var(--display)/.96 var(--serif);letter-spacing:-.04em;margin:0}
.journey-head h2 em{color:#000}
.journey-head>p:last-child{max-width:330px}
.journey-steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #ffffff55}
.journey-steps article{padding:26px 18px 22px 0;border-right:1px solid #ffffff55;transition:.3s}
.journey-steps article+article{padding-left:18px}
.journey-steps article:last-child{border-right:0}
.journey-steps span{color:#000}
.journey-steps h3{font-size:clamp(24px,2.2vw,36px);margin:58px 0 12px}
.journey-steps p{font-size:14px;line-height:1.5;margin:0;opacity:.82}
.journey-steps article:hover{background:#000;color:#fff;padding-left:18px}
.journey-steps article:hover span{color:var(--red)}
.network{width:var(--page);margin:auto;padding:var(--section) 0;display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(60px,10vw,170px);align-items:end}
.network h2{font:400 var(--display)/.96 var(--serif);letter-spacing:-.04em;margin:0 0 38px}
.network-copy>p:not(.kicker){max-width:690px;color:#bbb;font-size:clamp(18px,1.5vw,23px)}
.network .button{margin-top:22px}
.network-side{border-left:1px solid var(--line);padding-left:34px}
.network-side p:last-child{color:#aaa}
.service-network{background:#f1eee8;color:#111;padding:var(--section) max(4vw,calc((100vw - 1480px)/2));display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap)}
.service-network h2{font:400 var(--display)/.98 var(--serif);letter-spacing:-.04em;margin:0}
.service-network>div:last-child{padding-top:42px;color:#444;max-width:620px;font-size:clamp(18px,1.5vw,23px)}
@media(max-width:900px){
 .philosophy-grid{grid-template-columns:1fr 1fr}
 .philosophy-grid article{border-bottom:1px solid var(--line)}
 .material-intro,.journey-head,.network,.service-network{grid-template-columns:1fr}
 .journey-steps{grid-template-columns:1fr}
 .journey-steps article{border-right:0;border-bottom:1px solid #ffffff55}
 .material-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .philosophy-grid,.material-strip{grid-template-columns:1fr}
 .philosophy-grid article{min-height:240px;border-right:0;padding-left:0!important}
 .philosophy-grid h3{margin-top:42px}
 .material-intro,.network{width:88vw}
 .material-strip{width:88vw}
}
/* V10 — conversion layer */
.offer-section{padding:var(--section) max(4vw,calc((100vw - 1480px)/2));background:#f1eee8;color:#111}.offer-section .section-head{margin-bottom:46px}.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#c9c5bd}.offer-card{min-height:420px;position:relative;overflow:hidden;background:#111;color:#fff;display:flex;align-items:flex-end;padding:34px;text-decoration:none}.offer-card .offer-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s ease;opacity:.72}.offer-card:hover .offer-bg{transform:scale(1.035)}.offer-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.72))}.offer-copy{position:relative;z-index:2;max-width:520px}.offer-copy span{font-size:11px;letter-spacing:.14em}.offer-copy h3{font:400 clamp(32px,4vw,62px)/.95 var(--serif);letter-spacing:-.04em;margin:10px 0}.offer-copy p{margin:0;color:#ddd;max-width:440px}.offer-arrow{position:absolute;right:34px;bottom:34px;z-index:3;font-size:30px}.offer-detail{padding:var(--section) max(4vw,calc((100vw - 1480px)/2));display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw}.offer-detail h1{font:400 var(--display)/.95 var(--serif);letter-spacing:-.05em;margin:0}.offer-meta{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:48px}.offer-meta h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.offer-meta p{color:#aaa}.project-builder{background:#111;color:#fff;padding:var(--section) max(4vw,calc((100vw - 1480px)/2))}.builder-wrap{max-width:1000px}.builder-step{display:none}.builder-step.active{display:block}.builder-progress{font-size:11px;letter-spacing:.15em;color:#999;margin-bottom:30px}.builder-step h2{font:400 clamp(42px,6vw,86px)/.95 var(--serif);letter-spacing:-.045em;margin:0 0 38px}.builder-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.builder-option{border:1px solid #555;background:transparent;color:#fff;text-align:left;padding:22px;font:inherit;cursor:pointer}.builder-option:hover,.builder-option.selected{background:#fff;color:#111}.builder-actions{margin-top:32px;display:flex;gap:12px}.builder-summary{color:#bbb;line-height:1.8;margin-bottom:28px}.micro-proof{padding:38px max(4vw,calc((100vw - 1480px)/2));display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-bottom:1px solid var(--line)}.micro-proof div{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.micro-proof strong{display:block;font:400 28px var(--serif);letter-spacing:-.03em;text-transform:none;margin-bottom:6px}.contact-choice{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:28px 0}.contact-choice label{border:1px solid var(--line);padding:16px;cursor:pointer}.contact-choice input{width:auto;margin-right:8px}
@media(max-width:900px){.offer-grid,.offer-detail{grid-template-columns:1fr}.offer-card{min-height:330px}.micro-proof{grid-template-columns:1fr 1fr}.contact-choice{grid-template-columns:1fr 1fr}.builder-options{grid-template-columns:1fr}}
@media(max-width:600px){.micro-proof,.contact-choice{grid-template-columns:1fr}.offer-card{min-height:290px;padding:24px}.offer-arrow{right:24px;bottom:24px}}

/* V10.1 — broader offer architecture */
.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}