@charset "UTF-8";
  
:root {
  --paper:#f3f0e9;
  --ink:#282723;
  --accent:#672f40;
  --line:#c7c4bb;
  --sans:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --serif:'Hiragino Mincho ProN','Yu Mincho',serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.9 var(--sans)
}
body.menu-open {
  overflow:hidden
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-weight:400
}
h2 {
  font:400 clamp(32px,3.8vw,58px)/1.65 var(--serif);
  letter-spacing:-.03em
}
h3 {
  font:400 clamp(25px,2.5vw,38px)/1.6 var(--serif)
}
button {
  color:inherit;
  background:none;
  border:0
}
fieldset {
  border:0;
  padding:0;
  margin:0
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
.wrap {
  width:88%;
  max-width:1560px;
  margin-inline:auto
}
.eyebrow {
  font-size:10px;
  letter-spacing:.18em;
  line-height:1.6
}
.fine-print {
  font-size:11px;
  line-height:1.9;
  color:#6f6d67
}
.skip {
  position:fixed;
  top:10px;
  left:10px;
  background:var(--paper);
  padding:10px;
  z-index:30;
  transform:translateY(-160%)
}
.skip:focus {
  transform:none
}
.header {
  height:100px;
  padding:20px 6%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--paper)
}
.header.scrolled {
  background:#f3f0e9ed;
  color:var(--ink);
  backdrop-filter:blur(12px)
}
.menu-open .header.scrolled {
  background:transparent;
  backdrop-filter:none
}
.brand {
  display:flex;
  gap:14px;
  align-items:center;
  font:24px/1.2 var(--serif);
  letter-spacing:.08em
}
.brand small {
  display:block;
  font:8px/2 var(--sans);
  letter-spacing:.18em;
  margin-top:6px
}
.brand-symbol {
  display:block;
  width:25px;
  height:34px;
  position:relative
}
.brand-symbol i {
  position:absolute;
  border:1px solid currentColor;
  width:15px;
  height:27px;
  left:0;
  top:0
}
.brand-symbol i+ i {
  left:10px;
  top:7px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:35px
}
.header-actions #motion {
  font-size:9px;
  opacity:.8
}
.header-brief {
  font-size:11px;
  border-bottom:1px solid;
  padding:8px 0;
  display:flex;
  gap:30px
}
.header button#menu-toggle {
  position:relative;
  width:75px;
  height:40px;
  padding:0
}
.menu-label {
  position:absolute;
  left:0;
  top:14px;
  font-size:9px;
  letter-spacing:.1em
}
.header button#menu-toggle i {
  position:absolute;
  right:0;
  top:16px;
  width:23px;
  border-top:1px solid;
  transition:transform .6s,top .6s
}
.header button#menu-toggle i+i {
  top:24px
}
.menu-open .header {
  position:fixed;
  color:var(--ink)
}
.menu-open #menu-toggle i {
  top:20px!important;
  transform:rotate(45deg)
}
.menu-open #menu-toggle i+i {
  transform:rotate(-45deg)
}
.menu-open .header-brief,.menu-open #motion {
  visibility:hidden
}
.menu {
  position:fixed;
  inset:0;
  z-index:19;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s .8s
}
.menu-open .menu {
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s
}
.menu-sheets {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:34% 33% 33%
}
.menu-sheets i {
  background:#e5e0d5;
  transform:rotateY(90deg);
  transform-origin:left center;
  transition:transform .8s cubic-bezier(.65,0,.2,1);
  box-shadow:1px 0 0 #c8c2b5
}
.menu-sheets i:nth-child(2) {
  background:#eeeae1;
  transition-delay:.08s
}
.menu-sheets i:nth-child(3) {
  background:#f7f4ed;
  transition-delay:.16s
}
.menu-open .menu-sheets i {
  transform:rotateY(0)
}
.menu-inner {
  position:relative;
  height:100%;
  padding:15vh 10% 6vh;
  display:grid;
  grid-template-columns:1fr .35fr;
  grid-template-rows:auto 1fr auto;
  column-gap:9vw;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .35s,transform .65s
}
.menu-open .menu-inner {
  opacity:1;
  transform:none;
  transition-delay:.3s
}
.menu-inner>.eyebrow {
  grid-column:1/-1;
  margin-bottom:30px
}
.menu nav a {
  display:flex;
  gap:20px;
  align-items:center;
  font:clamp(24px,3.3vw,50px)/1.7 var(--serif);
  padding:10px 0;
  border-bottom:1px solid #cbc6bb;
  transition:color .3s,transform .4s
}
.menu nav a:hover {
  color:var(--accent);
  transform:translateX(8px)
}
.menu nav small {
  font:9px var(--sans)
}
.menu nav span {
  font:25px var(--sans);
  margin-left:auto
}
.menu-photo {
  align-self:center;
  aspect-ratio:3/5;
  overflow:hidden;
  transform:translateY(20px) rotate(4deg);
  transition:transform .9s .1s;
  max-height:400px
}
.menu-open .menu-photo {
  transform:translateY(0) rotate(0)
}
.menu-photo img {
  transition:transform .8s
}
.menu-photo:hover img {
  transform:scale(1.08)
}
.menu-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  padding-top:25px
}
.hero {
  height:1050px;
  min-height:100svh;
  max-height:1300px;
  background:#282824;
  position:relative;
  overflow:hidden;
  color:var(--paper)
}
.hero-photo {
  position:absolute;
  inset:0;
  overflow:hidden;
  animation:opening 1.9s cubic-bezier(.65,0,.2,1) both
}
.hero-photo img {
  object-position:50% 50%;
  animation:hero-zoom 3s ease-out both
}
.hero-photo:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.48),transparent 65%),linear-gradient(0deg,rgba(0,0,0,.38),transparent 50%)
}
.hero-copy {
  position:absolute;
  left:10%;
  top:21%;
  max-width:660px
}
.hero-copy>.eyebrow {
  margin-bottom:45px
}
h1 {
  font:400 clamp(50px,5.2vw,82px)/1.55 var(--serif);
  letter-spacing:-.03em
}
h1 span {
  display:block;
  animation:hero-text 1.4s .45s both
}
h1 span:nth-child(2) {
  animation-delay:.6s
}
h1 span:nth-child(3) {
  animation-delay:.75s
}
.hero-description {
  font-size:12px;
  line-height:2.1;
  margin-top:35px
}
.hero-side {
  writing-mode:vertical-rl;
  font-size:9px;
  letter-spacing:.23em;
  position:absolute;
  right:3%;
  top:38%
}
.hero-link {
  position:absolute;
  bottom:9%;
  left:10%;
  display:flex;
  align-items:center;
  gap:40px;
  font-size:11px
}
.hero-link b {
  display:grid;
  place-items:center;
  border:1px solid #bdb9aa;
  border-radius:50%;
  font-size:23px;
  width:52px;
  height:52px;
  font-weight:400;
  transition:transform .4s
}
.hero-link:hover b {
  transform:translateY(6px)
}
.hero-caption {
  position:absolute;
  right:6%;
  bottom:9%;
  font-size:8px;
  letter-spacing:.2em
}
@keyframes opening {
  from {
  clip-path:inset(0 43%)
}
to {
  clip-path:inset(0)
}

}
@keyframes hero-zoom {
  from {
  transform:scale(1.12)
}
to {
  transform:scale(1)
}

}
@keyframes hero-text {
  from {
  opacity:0;
  transform:translateY(45px);
  clip-path:inset(0 0 100%)
}
to {
  opacity:1;
  transform:none;
  clip-path:inset(0)
}

}
.philosophy {
  padding-block:150px 130px
}
.phrase {
  display:flex;
  gap:2.8vw;
  margin-top:70px;
  font-size:clamp(26px,3.5vw,55px)
}
.phrase span {
  display:block;
  white-space:nowrap;
  transition:transform 1s,opacity 1s
}
.js .phrase:not(.visible) span {
  opacity:0;
  transform:translateY(40px)
}
.phrase span:nth-child(2) {
  transition-delay:.1s
}
.phrase span:nth-child(3) {
  transition-delay:.2s
}
.philosophy-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15%;
  margin-top:80px;
  font-size:13px
}
.philosophy-bottom>p {
  font:22px/2 var(--serif)
}
.philosophy-bottom div p+p {
  margin-top:25px
}
.scene-heading {
  padding-block:60px 80px;
  position:relative
}
.scene-heading h2 {
  margin-top:30px
}
.scene-tabs {
  display:flex;
  gap:40px;
  position:absolute;
  right:0;
  bottom:85px
}
.scene-tabs button {
  font-size:16px;
  padding:12px 0;
  position:relative;
  border-bottom:1px solid #bab7ae;
  min-width:140px;
  text-align:left
}
.scene-tabs button small {
  font-size:8px;
  display:block;
  margin-bottom:10px
}
.scene-tabs button[aria-pressed=true] {
  color:var(--accent);
  border-bottom:3px solid var(--accent)
}
.scene-gallery {
  display:grid;
  grid-template-columns:60% 40%;
  grid-template-rows:360px 300px;
  background:#e4e0d7;
  overflow:hidden
}
.scene-main {
  grid-column:1;
  grid-row:1/3;
  position:relative;
  overflow:hidden
}
.scene-main img {
  transition:transform 1.2s;
  object-position:50% 50%
}
.scene-main:hover img {
  transform:scale(1.025)
}
.scene-gallery.switching .scene-main img {
  animation:scene-wipe .85s cubic-bezier(.65,0,.2,1)
}
@keyframes scene-wipe {
  0% {
  clip-path:inset(0 100% 0 0);
  transform:scale(1.06)
}
100% {
  clip-path:inset(0);
  transform:scale(1)
}

}
.scene-word {
  position:absolute;
  left:30px;
  bottom:25px;
  color:white;
  font:52px/1 Georgia,serif;
  letter-spacing:.03em
}
.scene-description {
  grid-column:2;
  grid-row:1;
  padding:40px 10%;
  position:relative
}
.scene-description h3 {
  margin:15px 0;
  font-size:30px
}
.scene-description>p:not(.eyebrow) {
  font-size:12px;
  max-width:400px
}
.text-link {
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid;
  padding:12px 0;
  max-width:330px;
  margin-top:20px
}
.text-link span {
  font-size:17px
}
.scene-detail {
  grid-column:2;
  grid-row:2;
  display:grid;
  grid-template-columns:1fr 70px;
  overflow:hidden
}
.scene-detail figcaption {
  writing-mode:vertical-rl;
  font-size:9px;
  padding:16px 20px
}
.sequence {
  height:260vh;
  min-height:1950px;
  background:#252723;
  color:var(--paper)
}
.sequence-sticky {
  height:100vh;
  min-height:760px;
  position:sticky;
  top:0;
  padding-block:130px 25px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:25px
}
.sequence-head {
  display:grid;
  grid-template-columns:.65fr 1fr 1fr;
  align-items:end;
  gap:4vw
}
.sequence-head .eyebrow {
  align-self:start;
  margin-top:15px
}
.sequence-head h2 {
  font-size:clamp(30px,3vw,46px);
  line-height:1.55
}
.sequence-head>p:last-child {
  font-size:11px
}
.sequence-window {
  position:relative;
  width:72%;
  margin-left:18%;
  overflow:hidden;
  min-height:260px
}
.sequence-view {
  position:absolute;
  inset:0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s cubic-bezier(.65,0,.2,1);
  z-index:1
}
.sequence-view.active {
  clip-path:inset(0);
  z-index:2
}
.sequence-view img {
  object-position:50% 55%;
  transform:scale(1.04);
  transition:transform 1.4s
}
.sequence-view.active img {
  transform:scale(1)
}
.sequence-frame {
  position:absolute;
  inset:7% 6%;
  border:1px solid #fff8;
  z-index:3;
  pointer-events:none;
  transform:translateX(calc(var(--seq,0)*-10%));
  transition:transform .4s
}
.sequence-count {
  position:absolute;
  bottom:6%;
  left:4%;
  color:white;
  z-index:4;
  font-size:10px
}
.sequence-count b {
  font:45px Georgia,serif;
  margin-right:12px
}
.sequence-controls {
  display:flex;
  gap:7vw;
  align-items:center
}
.sequence-controls>div {
  display:flex;
  gap:25px;
  flex:1
}
.sequence-controls button {
  font-size:11px;
  padding:15px 0;
  border-bottom:1px solid #777;
  white-space:nowrap;
  flex:1
}
.sequence-controls button[aria-pressed=true] {
  border-color:#e1d6bd;
  color:#e1d6bd
}
.sequence-controls>p {
  font-size:11px;
  width:40%
}
.model-section {
  padding-block:150px
}
.model-heading {
  display:grid;
  grid-template-columns:.7fr 1fr 1fr;
  gap:4vw;
  align-items:end;
  margin-bottom:70px
}
.model-heading .eyebrow {
  align-self:start;
  margin-top:15px
}
.model-heading>p:last-child {
  font-size:12px
}
.model-photo {
  position:relative;
  background:#dedacf;
  aspect-ratio:3/2;
  overflow:hidden
}
.model-photo img {
  clip-path:inset(10% 16%);
  transition:clip-path 1.7s cubic-bezier(.65,0,.2,1),transform 1.8s;
  transform:scale(1.06)
}
.model-photo.visible img {
  clip-path:inset(0);
  transform:scale(1)
}
.model-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  stroke:var(--accent);
  stroke-width:1;
  fill:none;
  stroke-dasharray:3600;
  stroke-dashoffset:3600;
  transition:stroke-dashoffset 1.8s,opacity .7s .7s;
  pointer-events:none
}
.model-photo.visible .model-lines {
  stroke-dashoffset:0;
  opacity:0
}
.model-photo figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  padding:20px 30px;
  color:var(--ink);
  background:#eee9dfd9;
  font-size:11px
}
.material {
  position:relative;
  min-height:850px;
  padding:110px 8%;
  display:flex;
  align-items:center
}
.material-photo {
  position:absolute;
  inset:0;
  overflow:hidden
}
.parallax {
  height:calc(100% + 100px);
  position:relative;
  top:-50px;
  transform:translateY(var(--parallax,0px));
  will-change:transform
}
.material-note {
  position:relative;
  margin-left:auto;
  width:40%;
  max-width:590px;
  background:#f3f0e9f2;
  padding:60px 45px
}
.material-note h2 {
  font-size:clamp(30px,3vw,45px);
  margin:35px 0
}
.material-note>p:not(.eyebrow) {
  font-size:12px;
  margin-top:25px
}
.scope {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:10%;
  padding-block:150px
}
.section-intro h2 {
  margin:35px 0
}
.section-intro>p:last-child {
  font-size:12px
}
.role-tabs {
  display:flex;
  border-bottom:1px solid var(--line)
}
.role-tabs button {
  font-size:12px;
  flex:1;
  padding:15px 0
}
.role-tabs button[aria-pressed=true] {
  background:var(--accent);
  color:white
}
.role-description {
  padding:40px 0;
  position:relative;
  min-height:320px;
  border-bottom:1px solid var(--line)
}
#role-number {
  font:70px/1 Georgia,serif;
  color:#bcb9b0;
  display:block;
  margin-bottom:25px
}
.role-description h3 {
  font-size:30px
}
.role-description p {
  font-size:13px;
  max-width:500px;
  margin-top:20px
}
.scope-body>.fine-print {
  margin-top:25px;
  max-width:500px
}
.process {
  padding-block:130px;
  background:#e4dfd4
}
.process-title h2 {
  margin:30px 0 60px
}
.process-layout {
  display:grid;
  grid-template-columns:42% 1fr;
  gap:10%;
  align-items:start
}
.process-layout figure {
  height:650px;
  overflow:hidden
}
.process-list details {
  border-top:1px solid #bfb8aa
}
.process-list details:last-child {
  border-bottom:1px solid #bfb8aa
}
summary {
  cursor:pointer;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
.process-list summary {
  padding:27px 0;
  display:flex;
  gap:25px;
  align-items:center;
  font:25px var(--serif)
}
.process-list summary small {
  font:9px var(--sans)
}
.process-list summary b {
  margin-left:auto;
  font:20px var(--sans);
  font-weight:400;
  transition:transform .4s
}
.process-list details[open] summary b {
  transform:rotate(45deg)
}
.process-list details p {
  font-size:12px;
  padding:0 0 30px 42px
}
.brief {
  padding-block:150px
}
.brief-heading {
  display:grid;
  grid-template-columns:.7fr 1.5fr 1fr;
  gap:4vw;
  align-items:end;
  margin-bottom:70px
}
.brief-heading .eyebrow {
  align-self:start;
  margin-top:15px
}
.brief-heading h2 {
  font-size:clamp(30px,3.2vw,48px)
}
.brief-heading>p:last-child {
  font-size:12px
}
.brief-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  align-items:start
}
.brief-fields fieldset {
  border-top:1px solid var(--line);
  padding:25px 0 30px
}
.brief-fields legend {
  float:left;
  width:100%;
  font-size:14px;
  margin-bottom:20px
}
.brief-fields legend small {
  font-size:9px;
  margin-right:10px
}
.brief-fields legend small:last-child:not(:first-child) {
  float:right;
  margin:5px 0 0;
  color:#777
}
.brief-fields label {
  display:inline-block;
  position:relative;
  margin:0 8px 10px 0;
  cursor:pointer
}
.brief-fields label span {
  display:block;
  border:1px solid var(--line);
  padding:12px 18px;
  font-size:11px;
  transition:background .25s,color .25s
}
.brief-fields input {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.brief-fields input:checked+span {
  background:var(--accent);
  color:white;
  border-color:var(--accent)
}
.brief-fields input:focus-visible+span {
  outline:2px solid var(--ink);
  outline-offset:3px
}
.button {
  background:var(--accent);
  color:white;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  padding:22px 28px;
  font-size:12px;
  position:relative;
  overflow:hidden;
  transition:background .3s,transform .3s
}
.button:hover {
  background:#452330;
  transform:translateY(-3px)
}
.button span {
  font-size:20px
}
.brief-paper {
  background:#fffdf7;
  padding:50px 40px;
  box-shadow:10px 12px 0 #dfdace;
  position:sticky;
  top:130px;
  border:1px solid #e1ded3
}
.paper-mark {
  position:absolute;
  right:30px;
  top:24px;
  font:13px Georgia,serif;
  color:#929083
}
.brief-paper h3 {
  margin:30px 0;
  font-size:30px
}
.brief-paper dl {
  margin:0
}
.brief-paper dl div {
  border-bottom:1px solid #d7d2c5;
  padding:17px 0
}
.brief-paper dt {
  font-size:9px;
  color:#777
}
.brief-paper dd {
  margin:8px 0 0;
  font:19px/1.8 var(--serif)
}
#brief-advice {
  font-size:11px;
  margin-top:25px
}
.brief-actions {
  display:flex;
  justify-content:space-between;
  margin-top:25px;
  gap:15px
}
.brief-actions button {
  font-size:10px;
  border-bottom:1px solid;
  padding:5px 0
}
.brief-paper>.fine-print {
  margin-top:20px
}
.brief-paper.highlight {
  animation:paper-highlight .9s
}
@keyframes paper-highlight {
  50% {
  box-shadow:10px 12px 0 #b69da4
}

}
.questions {
  padding-block:80px 150px;
  display:grid;
  grid-template-columns:.5fr 1fr;
  column-gap:10%
}
.questions>.eyebrow {
  grid-column:1/-1;
  margin-bottom:40px
}
.questions h2 {
  font-size:clamp(27px,2.8vw,42px);
  max-width:350px
}
.faq details {
  border-top:1px solid var(--line)
}
.faq details:last-child {
  border-bottom:1px solid var(--line)
}
.faq summary {
  font-size:13px;
  padding:25px 0;
  display:flex;
  gap:25px;
  align-items:center
}
.faq summary span {
  margin-left:auto;
  transition:transform .3s;
  font-size:20px
}
.faq details[open] summary span {
  transform:rotate(45deg)
}
.faq details p {
  font-size:12px;
  padding:0 30px 25px 0
}
.closing {
  position:relative;
  text-align:center;
  background:#d8d2c4;
  padding:160px 6%;
  overflow:hidden
}
.closing h2 {
  font-size:clamp(40px,5.3vw,80px);
  margin:55px 0 45px;
  position:relative
}
.closing>.eyebrow,.closing>.button,.closing>p {
  position:relative
}
.closing>p:last-child {
  font-size:12px;
  margin-top:40px
}
.closing-line {
  position:absolute;
  inset:40px 25%;
  border:1px solid #aaa08b;
  transform:scaleX(.3);
  transition:transform 1.5s;
  pointer-events:none
}
.closing.visible .closing-line {
  transform:scaleX(1)
}
.footer {
  padding-block:65px;
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap:35px;
  font-size:10px;
  align-items:center
}
.footer>.brand {
  font-size:25px
}
.footer>p,.footer>small {
  text-align:right
}
.footer>small {
  font-size:8px
}
.footer>a:not(.brand) {
  font-size:10px
}
html[data-motion=quiet] {
  scroll-behavior:auto
}
html[data-motion=quiet] * {
  animation:none!important;
  transition:none!important
}
html[data-motion=quiet] .hero-photo {
  clip-path:inset(0)
}
html[data-motion=quiet] .hero-photo img,html[data-motion=quiet] h1 span {
  transform:none;
  opacity:1;
  clip-path:inset(0)
}
html[data-motion=quiet] .phrase span {
  opacity:1!important;
  transform:none!important
}
html[data-motion=quiet] .sequence {
  height:auto;
  min-height:0
}
html[data-motion=quiet] .sequence-sticky {
  position:relative;
  height:auto;
  min-height:0;
  padding-block:100px 50px
}
html[data-motion=quiet] .sequence-window {
  height:52vw;
  max-height:650px
}
html[data-motion=quiet] .model-photo img {
  clip-path:inset(0);
  transform:none
}
html[data-motion=quiet] .model-lines {
  display:none
}
html[data-motion=quiet] .parallax {
  transform:none!important
}
html[data-motion=quiet] .closing-line {
  transform:none
}

@media(min-width:1800px) {
  .hero {
  height:1150px
}
.scene-gallery {
  grid-template-rows:420px 360px
}

}

@media(max-width:1000px) {
  .header {
  padding-inline:6%
}
.header-actions {
  gap:20px
}
.hero {
  height:950px
}
.hero-copy {
  left:8%;
  top:23%
}
.hero-copy>.eyebrow {
  margin-bottom:35px
}
.hero-link {
  left:8%
}
.phrase {
  gap:2vw;
  font-size:3.4vw
}
.scene-gallery {
  grid-template-columns:56% 44%;
  grid-template-rows:390px 240px
}
.scene-description {
  padding:35px 8%
}
.scene-description h3 {
  font-size:26px
}
.scene-tabs {
  gap:25px
}
.scene-tabs button {
  min-width:100px
}
.sequence-head {
  grid-template-columns:1fr 1.4fr
}
.sequence-head>.eyebrow {
  grid-column:1/-1
}
.sequence-window {
  width:88%;
  margin-left:6%
}
.model-heading,.brief-heading {
  grid-template-columns:1.3fr 1fr
}
.model-heading>.eyebrow,.brief-heading>.eyebrow {
  grid-column:1/-1
}
.material-note {
  width:50%;
  padding:40px 30px
}
.scope {
  gap:7%
}
.brief-grid {
  gap:6%
}
.brief-paper {
  padding:35px 25px
}
.brief-fields label span {
  padding:12px
}
.questions {
  column-gap:6%
}
.menu-photo {
  max-height:330px
}
.menu-inner {
  padding:18vh 9% 5vh
}
.process-layout {
  gap:7%
}
.process-list summary {
  font-size:22px
}
.process-layout figure {
  height:620px
}

}

@media(max-width:600px) {
  html {
  scroll-padding-top:100px
}
body {
  font-size:13px
}
.wrap {
  width:86%
}
.header {
  height:84px;
  padding:18px 7%;
  align-items:center
}
.brand {
  font-size:20px;
  gap:10px
}
.brand-symbol {
  width:20px;
  height:30px
}
.brand-symbol i {
  width:12px;
  height:24px
}
.brand-symbol i+i {
  left:8px;
  top:6px
}
.brand small {
  font-size:7px
}
.header-actions {
  gap:10px
}
.header-brief {
  display:none
}
.header-actions #motion {
  font-size:8px
}
.header button#menu-toggle {
  width:52px
}
.menu-label {
  font-size:7px;
  left:0
}
.header button#menu-toggle i {
  width:17px
}
.hero {
  height:900px;
  max-height:none;
  min-height:100svh
}
.hero-photo img {
  object-position:56% 50%
}
.hero-photo:after {
  background:linear-gradient(90deg,#0006,transparent 90%),linear-gradient(0deg,#0008,transparent 55%)
}
.hero-copy {
  left:7%;
  top:20%;
  max-width:90%
}
.hero-copy>.eyebrow {
  font-size:9px;
  margin-bottom:42px
}
h1 {
  font-size:clamp(35px,10.3vw,52px);
  line-height:1.7
}
.hero-description {
  font-size:10px;
  margin-top:38px;
  line-height:2.1
}
.hero-link {
  left:7%;
  bottom:10%;
  gap:28px;
  font-size:10px
}
.hero-link b {
  width:44px;
  height:44px;
  font-size:21px
}
.hero-side {
  right:3%;
  font-size:7px;
  top:62%
}
.hero-caption {
  font-size:6px;
  right:7%;
  bottom:5%
}
.philosophy {
  padding-block:95px 75px
}
.phrase {
  display:block;
  margin-top:45px;
  font-size:clamp(28px,8vw,38px);
  line-height:1.9
}
.phrase span:nth-child(2) {
  margin-left:6vw
}
.phrase span:nth-child(3) {
  margin-left:12vw
}
.philosophy-bottom {
  display:block;
  margin-top:45px;
  font-size:11px
}
.philosophy-bottom>p {
  font-size:19px;
  line-height:1.9
}
.philosophy-bottom>div {
  margin-top:35px
}
.philosophy-bottom div p {
  line-height:2
}
.philosophy-bottom div p br {
  display:none
}
.scene-heading {
  padding-block:30px 40px
}
.scene-heading h2 {
  font-size:30px;
  margin:25px 0 35px
}
.scene-tabs {
  position:static;
  gap:30px
}
.scene-tabs button {
  font-size:14px;
  min-width:0;
  flex:1
}
.scene-tabs button small {
  font-size:7px
}
.scene-gallery {
  display:grid;
  grid-template-columns:1fr 31%;
  grid-template-rows:380px auto;
  background:transparent;
  padding-bottom:75px
}
.scene-main {
  grid-column:1/-1;
  grid-row:1;
  height:380px
}
.scene-main img {
  object-position:58% 50%
}
.scene-word {
  font-size:38px;
  left:7%;
  bottom:20px
}
.scene-description {
  grid-column:1;
  grid-row:2;
  padding:35px 14% 0 10%;
  background:var(--paper)
}
.scene-description .eyebrow {
  font-size:8px
}
.scene-description h3 {
  font-size:23px;
  line-height:1.6
}
.scene-description>p:not(.eyebrow) {
  font-size:10px;
  line-height:1.9
}
.scene-description .text-link {
  font-size:9px;
  gap:8px;
  line-height:1.8
}
.scene-detail {
  grid-column:2;
  grid-row:2;
  display:block;
  margin-top:35px;
  align-self:start;
  height:240px;
  padding-bottom:20px
}
.scene-detail img {
  object-position:65% 50%
}
.scene-detail figcaption {
  writing-mode:horizontal-tb;
  font-size:7px;
  padding:8px 3px;
  line-height:1.5
}
.sequence {
  height:220vh;
  min-height:1700px
}
.sequence-sticky {
  min-height:780px;
  height:100svh;
  gap:25px;
  padding-block:115px 35px
}
.sequence-head {
  display:block
}
.sequence-head h2 {
  font-size:29px;
  line-height:1.6;
  margin:23px 0
}
.sequence-head>p:last-child {
  font-size:10px;
  line-height:1.9
}
.sequence-window {
  width:100%;
  margin:0;
  min-height:300px
}
.sequence-view img {
  object-position:55% 50%
}
.sequence-frame {
  inset:8% 7%
}
.sequence-controls {
  display:block
}
.sequence-controls>div {
  gap:16px
}
.sequence-controls button {
  font-size:9px;
  white-space:normal;
  text-align:left;
  line-height:1.6;
  padding:10px 0;
  max-width:33.3%
}
.sequence-controls>p {
  font-size:10px;
  width:100%;
  margin-top:18px
}
.sequence-count {
  left:7%;
  bottom:10%;
  font-size:8px
}
.sequence-count b {
  font-size:35px
}
.model-section {
  padding-block:90px
}
.model-heading {
  display:block;
  margin-bottom:35px
}
.model-heading h2 {
  font-size:31px;
  margin:25px 0
}
.model-heading>p:last-child {
  font-size:11px;
  line-height:1.9
}
.model-photo {
  aspect-ratio:4/5;
  width:116.28%;
  margin-left:-8.14%
}
.model-photo img {
  object-position:51% 50%
}
.model-photo figcaption {
  font-size:8px;
  padding:17px 7%;
  gap:10px
}
.material {
  min-height:820px;
  padding:370px 7% 70px;
  align-items:end
}
.material-photo img {
  object-position:35% 50%
}
.material-note {
  margin:0;
  width:100%;
  padding:35px 28px;
  background:#f3f0e9ed
}
.material-note h2 {
  font-size:29px;
  margin:25px 0
}
.material-note>p:not(.eyebrow) {
  font-size:10px;
  line-height:2
}
.material-note>p br {
  display:none
}
.material-note .text-link {
  font-size:10px
}
.scope {
  display:block;
  padding-block:90px
}
.section-intro h2 {
  font-size:32px;
  margin:25px 0
}
.section-intro>p:last-child {
  font-size:11px
}
.scope-body {
  margin-top:35px
}
.role-tabs button {
  font-size:11px;
  padding:15px 5px
}
.role-description {
  padding-block:30px;
  min-height:315px
}
#role-number {
  font-size:58px;
  margin-bottom:15px
}
.role-description h3 {
  font-size:27px
}
.role-description p {
  font-size:11px;
  margin-top:20px
}
.scope-body>.fine-print {
  font-size:9px
}
.process {
  padding-block:85px
}
.process-title h2 {
  font-size:32px;
  margin:25px 0 40px
}
.process-layout {
  display:block
}
.process-layout figure {
  height:340px;
  margin-bottom:35px
}
.process-layout figure img {
  object-position:75% 50%
}
.process-list summary {
  font-size:22px;
  padding:25px 0;
  gap:18px
}
.process-list details p {
  font-size:11px;
  padding-left:33px
}
.brief {
  padding-block:95px
}
.brief-heading {
  display:block;
  margin-bottom:40px
}
.brief-heading h2 {
  font-size:28px;
  line-height:1.65;
  margin:25px 0
}
.brief-heading>p:last-child {
  font-size:11px
}
.brief-grid {
  display:block
}
.brief-fields legend {
  font-size:12px
}
.brief-fields legend small {
  font-size:8px
}
.brief-fields label {
  margin:0 6px 8px 0
}
.brief-fields label span {
  font-size:10px;
  padding:10px 12px
}
.brief-fields fieldset {
  padding:22px 0 25px
}
.brief-view {
  width:100%;
  font-size:11px;
  padding:20px 25px
}
.brief-paper {
  position:relative;
  top:0;
  margin-top:40px;
  box-shadow:6px 8px 0 #dfdace;
  padding:35px 25px
}
.brief-paper h3 {
  font-size:28px
}
.brief-paper dd {
  font-size:18px
}
.brief-paper>.fine-print {
  font-size:9px
}
.questions {
  display:block;
  padding-block:30px 90px
}
.questions>.eyebrow {
  margin-bottom:25px
}
.questions h2 {
  font-size:28px;
  margin-bottom:35px
}
.faq summary {
  font-size:11px;
  line-height:1.9;
  padding:22px 0;
  gap:20px
}
.faq summary span {
  font-size:18px
}
.faq details p {
  font-size:10px;
  padding-right:20px
}
.closing {
  padding:110px 7%;
  text-align:left
}
.closing h2 {
  font-size:clamp(31px,9.5vw,45px);
  line-height:1.8;
  margin:40px 0 35px
}
.closing-line {
  inset:25px 15%;
  transform:scaleX(.2)
}
.closing>.eyebrow {
  font-size:8px
}
.closing>.button {
  font-size:11px;
  width:100%;
  padding:22px 25px
}
.closing>p:last-child {
  font-size:10px;
  margin-top:35px
}
.footer {
  display:block;
  padding-block:50px
}
.footer>.brand {
  font-size:24px
}
.footer>p {
  font-size:10px;
  text-align:left;
  margin:25px 0
}
.footer>a:not(.brand) {
  display:block;
  font-size:9px
}
.footer>small {
  display:block;
  text-align:left;
  margin-top:30px
}
.menu-sheets {
  grid-template-columns:33.33% 33.33% 33.33%
}
.menu-inner {
  padding:130px 7% 40px;
  display:block;
  overflow:auto
}
.menu-inner>.eyebrow {
  font-size:7px;
  margin-bottom:30px
}
.menu nav a {
  font-size:clamp(22px,6.8vw,29px);
  line-height:1.5;
  padding:16px 0;
  gap:15px
}
.menu nav span {
  font-size:20px
}
.menu nav small {
  font-size:7px
}
.menu-photo {
  width:32%;
  height:110px;
  margin-top:35px;
  aspect-ratio:auto;
  transform:translateX(25px) rotate(5deg);
  float:right;
  max-height:none
}
.menu-bottom {
  display:block;
  font-size:8px;
  clear:both;
  padding-top:25px
}
.menu-bottom a {
  display:block;
  margin-top:15px
}
html[data-motion=quiet] .sequence-window {
  height:350px
}
html[data-motion=quiet] .sequence-sticky {
  padding-block:65px 35px
}

}

@media(max-width:350px) {
  .brand {
  font-size:18px
}
.header-actions {
  gap:8px
}
.header-actions #motion {
  font-size:7px
}
.hero {
  height:850px
}
.hero-copy {
  top:21%
}
.hero-copy>.eyebrow {
  margin-bottom:35px
}
h1 {
  font-size:35px
}
.hero-description {
  font-size:9px;
  line-height:2.2
}
.hero-link {
  font-size:9px
}
.phrase {
  font-size:27px
}
.scene-heading h2 {
  font-size:27px
}
.scene-gallery {
  grid-template-columns:1fr 25%
}
.scene-description h3 {
  font-size:21px
}
.scene-description {
  padding-left:9.4%;
  padding-right:12%
}
.scene-description .text-link {
  font-size:8px
}
.sequence-head h2 {
  font-size:27px
}
.model-heading h2,.section-intro h2,.process-title h2 {
  font-size:29px
}
.brief-heading h2 {
  font-size:24px
}
.brief-fields legend {
  font-size:11px
}
.brief-fields label span {
  font-size:9px;
  padding:10px
}
.brief-fields legend small:last-child:not(:first-child) {
  float:none;
  display:block;
  margin-top:7px
}
.material-note {
  padding:32px 23px
}
.material-note h2 {
  font-size:26px
}
.questions h2 {
  font-size:26px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  animation:none!important;
  transition:none!important
}
.hero-photo {
  clip-path:inset(0)
}
.hero-photo img,h1 span {
  opacity:1;
  transform:none;
  clip-path:inset(0)
}
.phrase span {
  opacity:1!important;
  transform:none!important
}
.sequence {
  height:auto;
  min-height:0
}
.sequence-sticky {
  position:relative;
  height:auto;
  min-height:0;
  padding-block:100px 50px
}
.sequence-window {
  height:52vw;
  min-height:350px
}
.model-photo img {
  clip-path:inset(0);
  transform:none
}
.model-lines {
  display:none
}
.parallax {
  transform:none!important
}
.closing-line {
  transform:none
}

}

/* A drawing desk, then the imagined room */
.hero-photo img{object-position:57% center}.drawing-desk{background:#e6e2d8;color:#272b29;padding:clamp(75px,9vw,145px) 5vw;display:grid;grid-template-columns:1fr 1.2fr .45fr;gap:2.8vw;align-items:end;overflow:hidden}.drawing-desk-intro{align-self:center}.drawing-desk-intro h2{font-family:serif;font-weight:500;font-size:clamp(34px,3.8vw,66px);letter-spacing:-.07em;line-height:1.45;margin:24px 0}.drawing-desk-intro>p:not(.eyebrow){max-width:29em;line-height:2.1}.drawing-desk-intro a{display:inline-flex;gap:2em;color:inherit;border-bottom:1px solid currentColor;padding-bottom:10px;margin-top:30px;text-decoration:none}.drawing-desk-image{margin:0;position:relative;aspect-ratio:.9;overflow:hidden}.drawing-desk-image img{width:100%;height:100%;object-fit:cover}.drawing-desk-image figcaption{position:absolute;bottom:20px;left:20px;color:white;text-shadow:0 1px 8px #333;font-size:10px;letter-spacing:.15em}.drawing-desk-plan{align-self:start;padding-top:45px;opacity:.7}.drawing-desk-plan svg{width:100%;stroke:#616961;stroke-width:1.4}.drawing-desk-plan span{font-size:8px;letter-spacing:.14em;white-space:nowrap}
@media(max-width:800px){.drawing-desk{grid-template-columns:1fr 1fr}.drawing-desk-plan{display:none}}@media(max-width:560px){.drawing-desk{display:block;padding:72px 23px}.drawing-desk-intro h2{font-size:34px}.drawing-desk-intro>p:not(.eyebrow){font-size:13px}.drawing-desk-image{aspect-ratio:1.2;margin-top:40px}.hero-photo img{object-position:52% center}}