@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-extralight.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}
:root {
  --yellow: #ffd400;
  --black: #101010;
  --white: #fff;
  --line: #d7d7d2;
  --muted: #686864;
  --gutter: max(2.2vw, 22px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--black); font-family: Arial, Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { color: var(--black); background: var(--yellow); }
[hidden] { display: none !important; }
.skip-link { position: absolute; z-index: 5; top: 10px; left: var(--gutter); padding: 12px; background: var(--yellow); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-nav { position: relative; z-index: 2; min-height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; padding: 0 var(--gutter); border-bottom: 1px solid; background: var(--white); }
.logo { display: inline-flex; align-items: center; gap: 9px; width: max-content; font-size: 21px; font-weight: 900; letter-spacing: -.065em; }
.logo img { width: 40px; height: auto; }
.nav-links { display: flex; gap: clamp(20px, 3.4vw, 60px); }
.nav-links a, .nav-cta { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.nav-cta { justify-self: end; gap: 11px; }
.nav-cta:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-cta .arrow { background: var(--yellow); padding: 5px 7px; font-size: 13px; }
.eyebrow { margin: 0; font-size: 10px; font-weight: 900; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow .section-no { margin-right: 12px; color: var(--muted); }

.hero { min-height: min(760px, calc(100svh - 78px)); display: grid; grid-template-columns: 1.02fr .98fr; border-bottom: 1px solid; }
.hero-copy { padding: clamp(60px, 7vw, 110px) 2.2vw clamp(55px, 6vw, 95px) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero h1 { margin: 32px 0 0; font-size: clamp(56px, 6.75vw, 143px); font-weight: 900; line-height: .84; letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero-intro { max-width: 480px; margin: 34px 0 26px; font-size: clamp(16px, 1.36vw, 22px); line-height: 1.36; letter-spacing: -.02em; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 17px; border: 1px solid var(--black); background: var(--white); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.button:hover, .button[aria-pressed="true"] { background: var(--yellow); color: var(--black); }
.button-black { color: var(--white); background: var(--black); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; font-size: 11px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover { text-decoration-thickness: 2px; }
.hero-media { position: relative; overflow: hidden; border-left: 1px solid; background: var(--black); min-width: 0; min-height: 570px; }
.hero-media > a { display: block; position: absolute; inset: 0; }
.hero-media > a:focus-visible { outline: 3px solid var(--yellow); outline-offset: -5px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero-media::after { pointer-events: none; content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, #1010108a); }
.play-mark { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 47px; height: 47px; background: var(--white); color: var(--black); border: 1px solid var(--black); font-size: 14px; }
a:hover .play-mark { background: var(--yellow); }
.hero-controls { position: absolute; z-index: 1; left: 15px; bottom: 15px; display: flex; gap: 5px; }
.hero-controls button { width: 44px; height: 44px; border: 1px solid var(--black); background: var(--white); cursor: pointer; font-size: 10px; font-weight: 900; }
.hero-controls button[aria-pressed="true"], .hero-controls button:hover { background: var(--yellow); }
.media-stamp { position: absolute; z-index: 1; right: 0; bottom: 0; padding: 13px 16px; background: var(--yellow); color: var(--black); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; pointer-events: none; }

.section { padding: clamp(68px, 8.5vw, 130px) var(--gutter); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 25px; margin-bottom: clamp(38px, 5vw, 72px); }
.section-head h2, .feature h2, .inner-head h1 { margin: 0; font-size: clamp(46px, 7vw, 112px); line-height: .89; letter-spacing: -.07em; text-transform: uppercase; }
.section-head p:not(.eyebrow), .feature p:not(.eyebrow), .inner-head p:not([class]), .body-copy { max-width: 590px; margin: 22px 0 0; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.45; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4.2vw, 60px) clamp(16px, 2.2vw, 36px); }
.work-card { min-width: 0; }
.work-card a { display: block; }
.work-image { position: relative; aspect-ratio: 16/9; background: #eee; overflow: hidden; }
.work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.work-card a:hover img { transform: scale(1.035); }
.work-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0 0; }
.work-caption h3 { margin: 0; font-size: clamp(17px, 2.2vw, 29px); line-height: 1.04; letter-spacing: -.045em; }
.work-caption small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .075em; text-align: right; text-transform: uppercase; }

.feature { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid; }
.feature-copy { padding: clamp(43px, 6vw, 95px) 4vw clamp(43px, 6vw, 95px) var(--gutter); background: var(--yellow); }
.feature h2 { font-size: clamp(44px, 5.7vw, 95px); margin-top: 28px; }
.feature p:not(.eyebrow) { margin-bottom: 30px; }
.feature-media { position: relative; min-width: 0; min-height: 330px; border-left: 1px solid; background: #242424; }
.feature-media img { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid; }
.service-list li { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, .95fr); align-items: baseline; gap: 18px; padding: 26px 0; border-bottom: 1px solid; }
.service-list li > span { font-size: 11px; font-weight: 900; }
.service-list h3 { margin: 0; font-size: clamp(20px, 3.1vw, 45px); line-height: 1; letter-spacing: -.055em; }
.service-list p { margin: 0; max-width: 490px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 15px; border-top: 1px solid; }
.process-grid article { padding: 22px 24px 8px 0; border-right: 1px solid; }
.process-grid article + article { padding-left: 24px; }
.process-grid article:last-child { border-right: 0; }
.process-grid h3 { margin: 34px 0 11px; font-size: clamp(20px, 2.8vw, 39px); line-height: .98; letter-spacing: -.045em; }
.process-grid p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.5; }

.studio { border-block: 1px solid; }
.studio-statement {
  max-width: 1420px;
  margin: 25px 0 0;
  font-family: "Poppins", "Avenir Next", Arial, sans-serif;
  font-size: clamp(25px, 4.35vw, 66px);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: 1.6;
  text-wrap: pretty;
}
.studio-statement mark {
  padding-inline: .1em;
  background: var(--yellow);
  color: inherit;
  white-space: nowrap;
}
@media (min-width: 741px) {
  .studio-statement-home { font-size: clamp(25px, 3.7vw, 61px); }
  .studio-statement-home > span { display: block; }
}
.section-link { margin-top: clamp(24px, 3.5vw, 50px); }

.inner-head { padding-bottom: clamp(42px, 5vw, 75px); }
.inner-head .eyebrow { margin-bottom: 22px; }
.inner-head .studio-statement { margin-top: clamp(25px, 4.7vw, 70px); }
.inner-content { padding-block: 0 clamp(50px, 6vw, 95px); }
.collection { border-top: 1px solid var(--black); padding-block: clamp(42px, 6.2vw, 95px); }
.collection h2 { margin: 0 0 clamp(24px, 3.8vw, 56px); font-size: clamp(30px, 4.7vw, 72px); line-height: .97; letter-spacing: -.065em; }
.collection .eyebrow + h2 { margin-top: 18px; }
.collection .body-copy { margin-top: 0; }
.contact-guide { grid-template-columns: repeat(2, 1fr); }
.contact-section { min-height: 540px; display: grid; align-content: center; justify-items: start; background: var(--yellow); }
.contact-section :is(h1, h2) { max-width: 1250px; margin: 24px 0 0; font-size: clamp(59px, 10vw, 160px); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.contact-section p:not(.eyebrow) { max-width: 580px; margin: 28px 0 21px; font-size: 18px; line-height: 1.45; }
.contact-section .button:hover { background: var(--white); }
footer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: 35px var(--gutter); background: var(--black); color: var(--white); }
footer .brand { font-size: clamp(28px, 6vw, 80px); line-height: .9; font-weight: 900; letter-spacing: -.07em; }
.footer-details { display: grid; justify-items: end; }
.footer-social { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.footer-social:hover { color: var(--yellow); }
footer small { color: #d7d7d2; font-size: 10px; line-height: 1.5; letter-spacing: .06em; text-align: right; text-transform: uppercase; }

.project { max-width: 1600px; margin: 0 auto; padding: 44px var(--gutter) 85px; }
.project .back-link { margin-bottom: 24px; }
.project h1 { margin: 15px 0 12px; font-size: clamp(45px, 7.7vw, 112px); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.project p:not(.eyebrow) { max-width: 650px; font-size: 18px; line-height: 1.45; }
.project-media { margin: 32px 0; background: var(--black); }
.project-media video, .project-media img { width: 100%; max-height: 80svh; object-fit: contain; }
.project-media video { aspect-ratio: 16/9; }
.project-media.project-portrait video { display: block; width: min(100%, 45svh); margin: 0 auto; aspect-ratio: 9/16; }
.project p.project-credit { font-size: 13px; color: var(--muted); }

/* The two portfolio chapters share the site's grid, with a distinct lead for each discipline. */
.work-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 660px;
  margin-top: clamp(28px, 4vw, 54px);
  border-block: 1px solid var(--black);
}
.work-index a {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
  min-height: 54px;
  padding: 10px 14px;
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 700;
}
.work-index a + a { border-left: 1px solid var(--black); }
.work-index a:hover { background: var(--yellow); }
.work-index a span { font-size: 10px; }
.work-index a b { margin-left: auto; font-size: 14px; }
.work-chapter .chapter-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2.5vw, 40px);
  margin-bottom: clamp(28px, 4.5vw, 64px);
}
.chapter-number {
  display: grid;
  place-items: center;
  flex: 0 0 clamp(36px, 4vw, 60px);
  aspect-ratio: 1;
  color: var(--white);
  background: var(--black);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}
.design-chapter .chapter-number { color: var(--black); background: var(--yellow); }
.chapter-head h2 { margin: 0; }
.chapter-head p { margin: 10px 0 0; color: var(--muted); line-height: 1.45; }
.design-chapter { background: #f7f6f3; }

.studio-photo { margin: clamp(30px, 5vw, 78px) 0 0; }
.studio-interior { width: 100%; height: auto; }
.studio-photo figcaption { margin-top: 9px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.project-still { background: #f5f4f1; }
.project-gallery { margin: 40px 0; }
.project-gallery > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 25px);
  margin-top: 16px;
}
.project-gallery img, .project-gallery video { width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.enquiry { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(25px, 6vw, 95px); }
.enquiry .body-copy { margin: 0; }
.enquiry-form { min-width: 0; }
.enquiry-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.enquiry-form label { display: block; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.5; }
.enquiry-form .optional { color: var(--muted); font-weight: 400; }
.enquiry-form :is(input:not([type="hidden"],[type="checkbox"]), select, textarea) {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid #817f79;
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.enquiry-form textarea { resize: vertical; }
.enquiry-wide { grid-column: 1/-1; }
.enquiry-note, .enquiry-status { font-size: 13px; line-height: 1.45; }
.enquiry-note { color: var(--muted); }
.enquiry-note a { text-decoration: underline; text-underline-offset: 2px; }
.enquiry-status:empty { margin: 0; }
.enquiry-form .button:disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 1020px) {
  .hero h1 { font-size: clamp(45px, 6.85vw, 88px); }
  .hero-media { min-height: 550px; }
  .actions { gap: 13px 18px; }
}
@media (max-width: 740px) {
  :root { --gutter: 18px; }
  .site-nav { grid-template-columns: 1fr auto; min-height: 0; gap: 0 10px; padding-top: 8px; }
  .nav-links { grid-column: 1/-1; grid-row: 2; justify-content: space-between; gap: 9px; border-top: 1px solid var(--line); margin-top: 6px; }
  .nav-links a { font-size: 10px; }
  .nav-cta { grid-column: 2; grid-row: 1; font-size: 10px; }
  .logo { font-size: 19px; }
  .logo img { width: 33px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 49px var(--gutter) 35px; }
  .hero h1 { margin-top: 22px; font-size: clamp(49px, 11.4vw, 88px); }
  .hero-intro { margin-top: 22px; }
  .hero-media { min-height: 0; aspect-ratio: 6/5; border-left: 0; border-top: 1px solid; }
  .section-head { grid-template-columns: 1fr; gap: 14px; }
  .work-grid { gap: 26px 14px; }
  .work-caption { flex-direction: column; gap: 5px; }
  .work-caption small { text-align: left; }
  .feature { grid-template-columns: 1fr; }
  .feature-copy { padding: 47px var(--gutter); }
  .feature-media { min-height: 0; aspect-ratio: 1.7; border-left: 0; border-top: 1px solid; }
  .service-list li { grid-template-columns: 34px 1fr; gap: 9px; padding-block: 19px; }
  .service-list p { grid-column: 2; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article, .process-grid article + article { padding: 18px 0; border-right: 0; border-bottom: 1px solid; }
  .process-grid h3 { margin-top: 10px; }
  .contact-section { min-height: 0; }
  .enquiry { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .work-grid { grid-template-columns: 1fr; gap: 29px; }
  .work-index a { padding-inline: 8px; }
  .enquiry-form fieldset { grid-template-columns: 1fr; }
  .project-gallery > div { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .work-caption h3 { font-size: 17px; }
  .work-caption small { font-size: 9px; }
  .hero h1 { font-size: clamp(42px, 11.6vw, 48px); }
  .contact-section :is(h1, h2) { font-size: clamp(47px, 12vw, 57px); }
  .media-stamp { font-size: 8px; padding-inline: 10px; }
}
@media (max-width: 370px) {
  .logo { gap: 5px; font-size: 16px; }
  .logo img { width: 28px; }
  .nav-cta { gap: 6px; font-size: 9px; }
  .nav-cta .arrow { padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}