:root {
  color-scheme:dark;
  --bg:#0b0b0b;
  --paper:#eeece5;
  --ink:#181918;
  --muted:#92928c;
  --line:#30312c;
  --accent:#f08c72;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font:15px/1.4 var(--sans);
  -webkit-font-smoothing:antialiased
}

body:has(dialog[open]),body.menu-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea,select {
  font:inherit
}

button {
  background:none;
  border:0;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button:disabled {
  cursor:default
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

button,input,textarea,select {
  border-radius:0
}

::selection {
  background:var(--accent);
  color:var(--ink)
}

[hidden] {
  display:none!important
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--paper);
  color:#111;
  padding:15px;
  z-index:30
}

.skip-link:focus {
  top:14px
}

.site-header {
  height:93px;
  padding:0 3.3%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid #ffffff0d;
  position:relative;
  z-index:10
}

.wordmark {
  font:35px/.9 var(--serif);
  letter-spacing:-2px;
  display:inline-flex;
  align-items:flex-start;
  gap:7px
}

.brand-star {
  font:25px/1 var(--sans);
  color:var(--accent);
  display:inline-block
}

.site-nav {
  display:flex;
  align-items:center;
  gap:35px;
  font-size:11px
}

.site-nav>a {
  padding:12px 0;
  color:#d4d3ca
}

.site-nav>a:hover {
  color:var(--accent)
}

.header-contact {
  background:#242521;
  border:1px solid #363730;
  border-radius:40px;
  padding:13px 20px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:30px
}

.header-contact span {
  font-size:19px;
  color:var(--accent)
}

.header-contact:hover {
  background:var(--paper);
  color:#111
}

.menu-toggle {
  display:none
}

.hero {
  position:relative;
  min-height:745px;
  height:min(57vw,900px);
  padding:38px 3.3% 30px;
  overflow:hidden;
  isolation:isolate
}

.hero-eyebrow,.eyebrow {
  font-size:9px;
  font-weight:500;
  letter-spacing:1.6px
}

.hero-eyebrow {
  display:flex;
  gap:10px;
  align-items:center;
  color:#92968b;
  margin-top:5px
}

.status-dot {
  height:5px;
  width:5px;
  display:inline-block;
  background:var(--accent);
  border-radius:50%
}

.hero-title {
  position:relative;
  z-index:2;
  margin-top:45px;
  width:65%;
  pointer-events:none
}

.hero h1 {
  font:clamp(95px,10.8vw,173px)/.83 var(--serif);
  font-weight:400;
  letter-spacing:-.067em;
  margin:0
}

.hero h1>span {
  display:block
}

.hero h1>span+span {
  margin-top:8px
}

.hero h1 i {
  font-weight:400;
  color:var(--accent);
  letter-spacing:-.075em
}

.title-footnote {
  font-size:9px;
  letter-spacing:3.2px;
  display:block;
  margin:34px 0 0 7px;
  color:#b9bcb0
}

.hero-art {
  position:absolute;
  top:4%;
  right:-5%;
  width:66%;
  height:86%;
  z-index:-1;
  transform:translate(var(--pointer-x,0),var(--pointer-y,0));
  transition:transform .8s cubic-bezier(.2,.8,.2,1)
}

.hero-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  animation:sculpture-float 12s ease-in-out infinite
}

.art-annotation {
  position:absolute;
  right:14%;
  bottom:9%;
  font-size:7px;
  letter-spacing:1.2px;
  color:#777e76;
  display:flex;
  gap:12px;
  align-items:center
}

.art-annotation>span {
  font-size:18px;
  color:var(--accent)
}

.hero-bottom {
  position:absolute;
  bottom:34px;
  left:3.3%;
  right:3.3%;
  display:grid;
  grid-template-columns:1fr 1.1fr 1fr;
  gap:30px;
  align-items:end;
  z-index:3
}

.hero-bottom p {
  font-size:13px;
  line-height:1.7;
  color:#b5b7ad;
  margin:0
}

.reel-trigger {
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  justify-self:start;
  font-size:13px;
  padding:0
}

.reel-trigger>span:last-child {
  padding-top:2px
}

.reel-trigger small {
  display:block;
  font-size:7px;
  letter-spacing:1.4px;
  color:#777e74;
  margin-top:7px
}

.play-disc {
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  border:1px solid #6d7364;
  border-radius:50%;
  font-size:27px;
  transition:background .3s,color .3s,transform .3s
}

.reel-trigger:hover .play-disc {
  background:var(--accent);
  border-color:var(--accent);
  color:#111;
  transform:rotate(45deg)
}

.scroll-cue {
  display:flex;
  gap:24px;
  align-items:center;
  justify-self:end;
  font-size:8px;
  letter-spacing:1.2px;
  color:#a0a598
}

.scroll-cue>span:last-child {
  font-size:23px;
  line-height:1;
  color:var(--paper)
}

.hero-index {
  position:absolute;
  right:3.3%;
  top:40px;
  font-size:8px;
  letter-spacing:2px;
  color:#777e73;
  writing-mode:vertical-rl
}

.discipline-strip {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:24px;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 3.3%;
  color:#a7aa9f;
  font-size:11px;
  letter-spacing:3px;
  white-space:nowrap
}

.discipline-strip>span:nth-child(even) {
  font-size:22px;
  color:var(--accent);
  line-height:1
}

.section-shell {
  padding-left:3.3%;
  padding-right:3.3%
}

.work {
  padding-top:105px;
  padding-bottom:95px
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:30px;
  align-items:start
}

.section-heading .eyebrow {
  color:#83897a;
  padding-top:10px
}

.section-heading h2,.services-intro h2 {
  font:clamp(42px,4.3vw,70px)/1.02 var(--serif);
  font-weight:400;
  letter-spacing:-2.5px;
  margin:0
}

.section-heading h2 i {
  color:#bfc4b5
}

.work-toolbar {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin:54px 0 32px;
  border-top:1px solid var(--line);
  padding-top:22px;
  gap:30px
}

.work-toolbar>p {
  font-size:12px;
  line-height:1.6;
  color:#91998a;
  margin:0
}

.work-filters {
  display:flex;
  gap:7px;
  align-items:center
}

.work-filters button {
  font-size:10px;
  padding:10px 16px;
  border:1px solid transparent;
  border-radius:30px;
  color:#8d9586
}

.work-filters button[aria-pressed=true] {
  color:var(--paper);
  border-color:#646d5a
}

.work-filters button:hover {
  color:var(--paper);
  background:#20231c
}

.work-filters button span {
  font-size:7px;
  margin-left:6px;
  opacity:.65
}

.projects-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:65px 26px;
  align-items:start
}

.project-card {
  min-width:0
}

.project-offset {
  margin-top:85px
}

.project-art {
  padding:0;
  width:100%;
  display:block;
  aspect-ratio:1.36;
  position:relative;
  overflow:hidden;
  background:#171916;
  border-radius:5px;
  text-align:left
}

.project-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1s cubic-bezier(.2,.7,.2,1)
}

.project-art:hover img {
  transform:scale(1.04)
}

.project-number {
  position:absolute;
  top:20px;
  left:20px;
  font-size:7px;
  letter-spacing:1.3px;
  background:#0a0a0aa3;
  color:#ecebe4;
  border:1px solid #b7b7ad38;
  padding:6px 8px;
  border-radius:3px
}

.project-open {
  position:absolute;
  bottom:20px;
  right:20px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eeece5;
  color:#171916;
  font-size:24px;
  transform:translateY(65px);
  transition:transform .3s
}

.project-art:hover .project-open,.project-art:focus-visible .project-open {
  transform:translateY(0)
}

.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:21px
}

.project-meta h3 {
  font-size:19px;
  font-weight:400;
  letter-spacing:.2px;
  margin:0
}

.project-meta button {
  padding:0;
  letter-spacing:inherit
}

.project-meta button:hover {
  color:var(--accent)
}

.project-meta>span {
  font-size:7px;
  letter-spacing:1.3px;
  color:#939b88
}

.project-card>p {
  margin:9px 0 0;
  color:#8d9584;
  font-size:11px
}

.concept-note {
  font-size:9px;
  letter-spacing:.2px;
  color:#69715f;
  margin-top:46px
}

.field-composition {
  position:absolute;
  inset:0;
  background:#9ca284;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.field-paper {
  position:relative;
  background:#f0e9d5;
  color:#252923;
  width:71%;
  height:82%;
  padding:6%;
  transform:rotate(-7deg);
  box-shadow:20px 20px 0 #333b2c35
}

.field-paper>span {
  font-size:clamp(4px,.55vw,8px);
  letter-spacing:1.5px
}

.field-paper strong {
  display:block;
  font:clamp(38px,6vw,90px)/.81 var(--serif);
  font-weight:400;
  letter-spacing:-3px;
  margin-top:10%;
  position:relative;
  z-index:2
}

.field-paper small {
  font-size:clamp(4px,.5vw,7px);
  letter-spacing:1px;
  display:block;
  position:absolute;
  bottom:7%;
  left:8%
}

.field-landscape {
  position:absolute;
  bottom:14%;
  right:8%;
  width:47%;
  height:43%;
  background:#bdc39d;
  overflow:hidden
}

.field-landscape span {
  position:absolute;
  bottom:0;
  left:-10%;
  width:120%;
  height:95%;
  background:#4e6544;
  clip-path:polygon(0 100%,55% 0,100% 100%)
}

.field-landscape span:nth-child(2) {
  transform:translate(35%,20%);
  background:#7d8b57
}

.field-landscape span:nth-child(3) {
  background:#e9d8a0;
  width:20%;
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  left:65%;
  bottom:68%;
  clip-path:none
}

.field-side {
  position:absolute;
  right:4%;
  top:16%;
  font-size:9px;
  line-height:2;
  letter-spacing:1px;
  color:#edf0df;
  writing-mode:vertical-rl
}

.studio {
  padding-top:70px;
  padding-bottom:85px;
  background:var(--paper);
  color:var(--ink);
  overflow:hidden
}

.studio>.eyebrow {
  color:#73766c
}

.studio-layout {
  display:grid;
  grid-template-columns:1.15fr 1fr .5fr;
  gap:50px;
  position:relative;
  margin-top:50px;
  align-items:start
}

.studio h2 {
  font:clamp(56px,6.5vw,104px)/.91 var(--serif);
  font-weight:400;
  letter-spacing:-4px;
  margin:0
}

.studio h2 i {
  color:#a15e4c
}

.studio-copy {
  max-width:400px
}

.studio-copy>.large-copy {
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.8px;
  margin:0 0 25px;
  color:#242820
}

.studio-copy>p {
  font-size:12px;
  line-height:1.8;
  color:#73776b
}

.text-button {
  padding:11px 0;
  border-bottom:1px solid #7d846e;
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:11px;
  line-height:1.2
}

.text-button>span {
  font-size:22px;
  line-height:1
}

.text-button:hover {
  color:var(--accent)
}

.studio-copy .text-button {
  margin-top:13px;
  border-color:#b2b6a7
}

.studio-copy .text-button:hover {
  color:#a15e4c
}

.studio-mark {
  font-size:clamp(110px,15vw,230px);
  line-height:.8;
  color:#bd6e58;
  animation:slow-turn 80s linear infinite;
  align-self:center;
  justify-self:center
}

.services {
  padding-top:95px;
  padding-bottom:90px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:8%
}

.services-intro .eyebrow {
  color:#8c947e;
  margin-bottom:30px
}

.services-intro h2 {
  font-size:clamp(38px,3.2vw,53px);
  letter-spacing:-1.5px
}

.services-intro>p {
  color:#89937c;
  font-size:12px;
  line-height:1.8;
  margin-top:28px
}

.service-list details {
  border-top:1px solid #3c4430
}

.service-list details:last-child {
  border-bottom:1px solid #3c4430
}

.service-list summary {
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:26px 1fr 22px;
  gap:16px;
  align-items:center;
  padding:25px 0;
  font-size:23px;
  letter-spacing:-.7px
}

.service-list summary::-webkit-details-marker {
  display:none
}

.service-number {
  font:8px var(--sans);
  letter-spacing:.5px;
  color:#879272
}

.service-plus {
  font-size:25px;
  color:#aab693;
  transition:transform .25s
}

.service-list details[open] .service-plus {
  transform:rotate(45deg)
}

.service-body {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:30px;
  padding:1px 0 25px 42px;
  font-size:11px;
  line-height:1.8;
  color:#909d7f
}

.service-body p {
  margin:0
}

.service-body ul {
  list-style:none;
  margin:0;
  padding:0;
  color:#c4ccb8
}

.service-body li::before {
  content:'↗';
  display:inline-block;
  color:var(--accent);
  width:18px
}

.process {
  padding-top:55px;
  padding-bottom:70px;
  border-top:1px solid #313a26
}

.process-title {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:30px
}

.process-title .eyebrow {
  font-size:8px;
  color:#7f8d6d
}

.process-title h2 {
  font:clamp(37px,3.5vw,56px)/1.05 var(--serif);
  font-weight:400;
  letter-spacing:-1.8px;
  margin:0
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:55px
}

.process-grid article {
  border-top:1px solid #3a472c;
  padding-top:19px
}

.process-grid article>span {
  font-size:7px;
  letter-spacing:1px;
  color:#81926a
}

.process-grid h3 {
  font-size:18px;
  font-weight:400;
  letter-spacing:-.5px;
  margin:25px 0 13px
}

.process-grid p {
  font-size:11px;
  color:#8c9e77;
  line-height:1.8;
  margin:0;
  max-width:280px
}

.contact-section {
  padding-top:65px;
  padding-bottom:50px;
  background:#c88670;
  color:#1c2119
}

.contact-section>.eyebrow {
  font-size:8px;
  color:#4e5842
}

.contact-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-top:45px
}

.contact-line h2 {
  font:clamp(72px,10.5vw,165px)/.85 var(--serif);
  font-weight:400;
  letter-spacing:-6px;
  margin:0
}

.contact-line h2 i {
  font-weight:400
}

.contact-disc {
  width:130px;
  height:130px;
  border:1px solid #34492b;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:65px;
  line-height:1;
  margin-right:5%;
  transition:background .3s,transform .3s
}

.contact-disc:hover {
  background:#e9dcc8;
  transform:rotate(45deg)
}

.contact-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-top:45px
}

.contact-bottom p {
  font-size:12px;
  line-height:1.7;
  margin:0;
  color:#44523b
}

.contact-bottom .text-button {
  border-color:#536546;
  gap:50px
}

.contact-bottom .text-button:hover {
  color:#e9eadc
}

.site-footer {
  padding:43px 3.3% 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  flex-wrap:wrap
}

.site-footer .wordmark {
  font-size:31px
}

.footer-links {
  display:flex;
  gap:30px;
  color:#8a9c72;
  font-size:10px
}

.footer-links a:hover {
  color:var(--paper)
}

.footer-meta {
  width:100%;
  border-top:1px solid #2c3c20;
  margin-top:16px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  color:#657a4c;
  font-size:7px;
  letter-spacing:.8px
}

.footer-meta button {
  color:#99b179;
  font-size:9px;
  padding:0;
  letter-spacing:0;
  display:flex;
  align-items:center;
  gap:8px
}

.footer-meta button:disabled {
  opacity:.6
}

.footer-meta button:hover:not(:disabled) {
  color:var(--paper)
}

dialog {
  color:var(--paper);
  background:#111310;
  border:1px solid #455039;
  border-radius:6px;
  box-shadow:0 25px 120px #000c;
  max-height:90vh;
  max-height:90dvh;
  overflow-y:auto;
  padding:0
}

dialog::backdrop {
  background:#000c;
  backdrop-filter:blur(10px)
}

.dialog-close {
  position:absolute;
  top:18px;
  right:18px;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:#10140dd9;
  border:1px solid #7e8d6b;
  border-radius:50%;
  font-size:12px;
  z-index:5
}

.dialog-close:hover {
  background:var(--paper);
  color:#111
}

.project-dialog {
  width:min(1100px,94vw);
  max-width:1100px
}

.project-layout {
  display:grid;
  grid-template-columns:1.15fr 1fr
}

.project-image {
  min-height:540px;
  background:#1c2117;
  position:relative;
  display:flex;
  align-items:center
}

.project-image img {
  width:100%;
  height:auto;
  display:block;
  max-height:75vh;
  object-fit:contain
}

.project-image .field-composition {
  position:relative;
  width:100%;
  aspect-ratio:1.25;
  align-self:center
}

.project-image .field-paper strong {
  font-size:68px
}

.project-details {
  padding:70px 36px 35px
}

.project-details>.eyebrow {
  font-size:8px;
  color:#a8bc8d
}

.project-details h2 {
  font:58px/.95 var(--serif);
  font-weight:400;
  letter-spacing:-2px;
  margin:22px 0
}

.project-details>p {
  font-size:12px;
  line-height:1.9;
  color:#9cad8b
}

.project-details h3 {
  font-size:10px;
  font-weight:400;
  margin:30px 0 12px
}

.project-details ul {
  font-size:11px;
  color:#a9bb93;
  line-height:2;
  padding:0;
  list-style:none
}

.project-details li::before {
  content:'↗';
  width:20px;
  display:inline-block;
  color:var(--accent)
}

.project-details .project-disclaimer {
  font-size:9px;
  border-top:1px solid #34432a;
  padding-top:17px;
  margin-top:26px;
  color:#6f8758
}

.project-details .text-button {
  margin-top:16px
}

.reel-dialog {
  width:min(1050px,94vw);
  max-width:1050px;
  padding:34px
}

.reel-heading .eyebrow {
  font-size:8px;
  color:#90a575
}

.reel-heading h2 {
  font:37px/1.1 var(--serif);
  font-weight:400;
  letter-spacing:-1px;
  margin:16px 0 23px
}

.reel-stage {
  height:min(52vh,530px);
  min-height:270px;
  position:relative;
  overflow:hidden;
  background:#0b0b0b;
  border:1px solid #2b3d20
}

.reel-frame {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  margin:0;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1s,transform 4s;
  pointer-events:none
}

.reel-frame.is-active {
  opacity:1;
  transform:scale(1)
}

.reel-frame img {
  width:100%;
  height:100%;
  object-fit:contain
}

.reel-controls {
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:17px
}

.reel-controls>button {
  font-size:12px;
  padding:7px;
  color:#acbe98
}

.reel-controls #reel-prev,.reel-controls #reel-next {
  font-size:22px;
  line-height:1
}

.reel-controls>span {
  font-size:8px;
  letter-spacing:1px;
  color:#8aa56b
}

.reel-controls #reel-toggle {
  font-size:9px;
  margin-left:auto
}

.reel-note {
  font-size:8px;
  line-height:1.7;
  color:#6a8951;
  margin:14px 0 0
}

.contact-dialog {
  width:min(670px,94vw);
  padding:45px 38px;
  max-width:670px
}

.contact-dialog>.eyebrow {
  font-size:8px;
  color:#94b077
}

.contact-dialog h2 {
  font:56px/.92 var(--serif);
  font-weight:400;
  letter-spacing:-2px;
  margin:26px 0 16px
}

.brief-intro {
  font-size:12px;
  color:#8fac73;
  margin-bottom:28px
}

.contact-dialog form {
  display:flex;
  flex-direction:column;
  gap:19px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.contact-dialog label {
  font-size:9px;
  color:#a0be82;
  display:flex;
  flex-direction:column;
  gap:9px
}

.contact-dialog input,.contact-dialog select,.contact-dialog textarea {
  background:#181f12;
  color:#d4dfc7;
  border:1px solid #3e532c;
  padding:12px 11px;
  width:100%;
  min-width:0;
  border-radius:3px;
  font-size:11px;
  line-height:1.5
}

.contact-dialog input::placeholder,.contact-dialog textarea::placeholder {
  color:#657d4f
}

.contact-dialog textarea {
  resize:vertical
}

.solid-button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:var(--paper);
  color:#192410;
  border:1px solid var(--paper);
  padding:15px 19px;
  border-radius:3px;
  font-size:11px
}

.solid-button>span {
  font-size:20px;
  line-height:1
}

.solid-button:hover {
  background:var(--accent);
  border-color:var(--accent)
}

.contact-dialog form>.solid-button {
  margin-top:5px
}

.outline-button {
  border:1px solid #688b48;
  border-radius:3px;
  padding:15px 18px;
  font-size:10px;
  color:#b1cf91
}

.outline-button:hover {
  color:var(--paper);
  border-color:var(--paper)
}

.brief-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:17px
}

.brief-actions .text-button {
  font-size:10px;
  border-color:#526e37
}

.brief-status {
  font-size:9px;
  color:#7a9d5b;
  line-height:1.7;
  margin-top:20px
}

.contact-dialog .brief-output-label textarea {
  font:11px/1.8 monospace
}

.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,15px);
  background:var(--paper);
  color:#1b2415;
  border:1px solid #fff;
  padding:13px 22px;
  border-radius:3px;
  font-size:11px;
  z-index:40;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  max-width:90vw;
  text-align:center
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

.noscript-note {
  margin:0;
  padding:20px 3.3%;
  background:var(--paper);
  color:#111;
  font-size:12px
}

.motion-paused * {
  animation-play-state:paused!important
}

.motion-paused .reveal {
  transition:none!important
}

.motion-paused .reel-frame,
.reel-paused .reel-frame {
  transition:none!important;
}

.will-reveal {
  opacity:0;
  transform:translateY(25px);
  transition:opacity .8s,transform .8s
}

.will-reveal.is-visible {
  opacity:1;
  transform:none
}

@keyframes sculpture-float {
  0%,100% {
    transform:translateY(0) rotate(-2deg)
  }
  50% {
    transform:translateY(-18px) rotate(2deg)
  }
}

@keyframes slow-turn {
  to {
    transform:rotate(360deg)
  }
}

@media(min-width:1800px) {
  .hero {
    height:1000px
  }
  .hero h1 {
    font-size:190px
  }
  .hero-title {
    margin-top:70px
  }
}

@media(max-width:1100px) {
  .hero {
    height:710px;
    min-height:0
  }
  .hero h1 {
    font-size:12vw
  }
  .hero-title {
    margin-top:70px
  }
  .hero-art {
    top:8%;
    right:-13%;
    width:76%;
    height:78%
  }
  .hero-bottom {
    grid-template-columns:1fr 1.2fr .7fr
  }
  .hero-bottom p {
    font-size:11px
  }
  .reel-trigger {
    font-size:11px
  }
  .reel-trigger small {
    font-size:6px
  }
  .play-disc {
    width:45px;
    height:45px;
    font-size:24px
  }
  .scroll-cue {
    font-size:6px;
    gap:15px
  }
  .section-heading h2 {
    font-size:53px
  }
  .studio-layout {
    grid-template-columns:1.1fr 1fr;
    gap:40px
  }
  .studio-mark {
    position:absolute;
    right:-70px;
    bottom:-85px;
    opacity:.15;
    font-size:230px;
    pointer-events:none
  }
  .studio-copy {
    position:relative;
    z-index:1
  }
  .studio h2 {
    font-size:75px
  }
  .services {
    gap:5%;
    grid-template-columns:1fr 1.15fr
  }
  .service-list summary {
    font-size:19px;
    gap:10px;
    grid-template-columns:20px 1fr 20px
  }
  .service-body {
    padding-left:30px;
    gap:18px;
    font-size:10px;
    grid-template-columns:1fr
  }
  .service-body ul {
    display:flex;
    flex-wrap:wrap;
    gap:3px 15px
  }
  .service-body li {
    white-space:nowrap
  }
  .project-details {
    padding:65px 25px 25px
  }
  .project-image {
    min-height:530px
  }
  .project-details h2 {
    font-size:48px
  }
  .project-details>p {
    font-size:11px
  }
  .project-details .eyebrow {
    font-size:7px
  }
  .contact-line h2 {
    font-size:11vw
  }
  .contact-disc {
    width:100px;
    height:100px;
    font-size:50px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:25px
  }
  .site-header {
    height:79px;
    padding:0 6%;
    border-bottom:1px solid #ffffff12
  }
  .wordmark {
    font-size:29px;
    letter-spacing:-1.4px
  }
  .brand-star {
    font-size:21px
  }
  .menu-toggle {
    display:inline-flex;
    align-items:center;
    gap:13px;
    font-size:10px;
    border:1px solid #47513c;
    padding:9px 13px;
    border-radius:25px
  }
  .menu-toggle>span {
    font-size:18px;
    line-height:1;
    transition:transform .25s
  }
  .menu-open .menu-toggle>span {
    transform:rotate(45deg)
  }
  .site-nav {
    position:fixed;
    inset:79px 0 0;
    background:#0b0f08;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    padding:45px 8%;
    overflow-y:auto;
    font-size:45px;
    font-family:var(--serif);
    z-index:10
  }
  .js body:not(.menu-open) .site-nav {
    display:none
  }
  .site-nav>a {
    padding:6px 0;
    line-height:1.1
  }
  .site-nav .header-contact {
    font-family:var(--sans);
    font-size:12px;
    padding:17px 21px;
    margin-top:25px
  }
  html:not(.js) .site-header {
    height:auto;
    flex-wrap:wrap;
    padding-top:22px;
    padding-bottom:22px;
  }
  html:not(.js) .menu-toggle {
    display:none;
  }
  html:not(.js) .site-nav {
    position:static;
    width:100%;
    padding:0;
    font:12px var(--sans);
    flex-direction:row;
    gap:18px;
    flex-wrap:wrap;
    background:none;
  }
  html:not(.js) .site-nav .header-contact {
    margin:0;
    padding:8px 13px;
  }
  .hero {
    height:auto;
    min-height:0;
    padding:34px 6% 30px;
    display:flex;
    flex-direction:column
  }
  .hero-eyebrow {
    font-size:6px;
    letter-spacing:1.2px;
    margin-top:0
  }
  .hero-title {
    margin-top:44px;
    width:100%
  }
  .hero h1 {
    font-size:23vw;
    line-height:.83;
    letter-spacing:-.065em
  }
  .hero h1>span+span {
    margin-top:7px
  }
  .title-footnote {
    font-size:7px;
    letter-spacing:2.5px;
    margin:24px 0 0 4px
  }
  .hero-art {
    position:relative;
    top:auto;
    right:auto;
    width:120%;
    height:330px;
    margin:-2px -10% 0;
    transform:translate(0,0);
    z-index:1
  }
  .hero-art img {
    animation-duration:14s;
    object-fit:contain
  }
  .art-annotation {
    right:14%;
    bottom:8%;
    font-size:5px;
    letter-spacing:.9px;
    gap:8px
  }
  .art-annotation>span {
    font-size:14px
  }
  .hero-bottom {
    position:relative;
    inset:auto;
    grid-template-columns:1fr;
    gap:23px;
    margin-top:7px
  }
  .hero-bottom p {
    font-size:11px;
    line-height:1.7;
    max-width:230px
  }
  .hero-bottom p br {
    display:none
  }
  .reel-trigger {
    font-size:11px;
    gap:13px
  }
  .reel-trigger small {
    font-size:6px;
    letter-spacing:1px
  }
  .play-disc {
    width:43px;
    height:43px
  }
  .scroll-cue {
    position:absolute;
    right:0;
    bottom:3px;
    writing-mode:vertical-rl;
    font-size:5px;
    gap:11px
  }
  .scroll-cue>span:last-child {
    font-size:19px;
    writing-mode:horizontal-tb
  }
  .hero-index {
    font-size:6px;
    top:32px;
    right:6%;
    letter-spacing:1px
  }
  .discipline-strip {
    justify-content:flex-start;
    gap:23px;
    padding:19px 6%;
    font-size:8px;
    letter-spacing:1.6px
  }
  .discipline-strip>span:nth-child(even) {
    font-size:16px
  }
  .section-shell {
    padding-left:6%;
    padding-right:6%
  }
  .work {
    padding-top:52px;
    padding-bottom:50px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:22px
  }
  .section-heading .eyebrow {
    font-size:7px;
    padding-top:0
  }
  .section-heading h2 {
    font-size:38px;
    letter-spacing:-1.6px;
    max-width:380px
  }
  .work-toolbar {
    margin-top:31px;
    display:block;
    padding-top:17px;
    margin-bottom:23px
  }
  .work-toolbar>p {
    font-size:10px;
    line-height:1.6
  }
  .work-toolbar>p br {
    display:none
  }
  .work-filters {
    gap:5px;
    margin-top:17px;
    justify-content:space-between
  }
  .work-filters button {
    font-size:9px;
    padding:9px 13px
  }
  .work-filters button span {
    font-size:6px;
    margin-left:4px
  }
  .projects-grid {
    grid-template-columns:1fr;
    gap:33px
  }
  .project-offset {
    margin-top:0
  }
  .project-art {
    aspect-ratio:1.32;
    border-radius:3px
  }
  .project-number {
    top:13px;
    left:13px;
    font-size:6px;
    padding:5px 6px;
    letter-spacing:1px
  }
  .project-open {
    width:33px;
    height:33px;
    font-size:20px;
    right:13px;
    bottom:13px;
    transform:none
  }
  .project-meta {
    margin-top:16px;
    gap:12px
  }
  .project-meta h3 {
    font-size:16px
  }
  .project-meta>span {
    font-size:6px;
    letter-spacing:.8px
  }
  .project-card>p {
    font-size:10px;
    margin-top:7px
  }
  .concept-note {
    font-size:8px;
    line-height:1.8;
    margin-top:28px;
    max-width:300px
  }
  .field-paper>span {
    font-size:5px;
    letter-spacing:1px
  }
  .field-paper strong {
    font-size:52px;
    letter-spacing:-2px
  }
  .field-paper small {
    font-size:4px
  }
  .field-side {
    font-size:6px
  }
  .studio {
    padding-top:35px;
    padding-bottom:43px
  }
  .studio>.eyebrow {
    font-size:7px
  }
  .studio-layout {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:31px
  }
  .studio h2 {
    font-size:63px;
    letter-spacing:-3px;
    max-width:320px
  }
  .studio-copy {
    max-width:410px
  }
  .studio-copy>.large-copy {
    font-size:23px;
    margin-bottom:20px
  }
  .studio-copy>p {
    font-size:11px;
    line-height:1.8;
    max-width:360px
  }
  .studio-mark {
    bottom:-80px;
    right:-60px;
    font-size:220px;
    opacity:.11
  }
  .text-button {
    font-size:10px;
    gap:25px
  }
  .studio-copy .text-button {
    margin-top:8px
  }
  .services {
    padding-top:49px;
    padding-bottom:48px;
    grid-template-columns:1fr;
    gap:27px
  }
  .services-intro .eyebrow {
    font-size:7px;
    margin-bottom:23px
  }
  .services-intro h2 {
    font-size:37px;
    letter-spacing:-1.6px
  }
  .services-intro>p {
    font-size:11px;
    margin-top:20px
  }
  .services-intro>p br {
    display:none
  }
  .service-list summary {
    font-size:21px;
    padding:23px 0;
    grid-template-columns:19px 1fr 20px;
    gap:12px
  }
  .service-number {
    font-size:7px
  }
  .service-body {
    grid-template-columns:1fr;
    padding-left:31px;
    font-size:10px;
    gap:18px;
    padding-bottom:24px;
    line-height:1.8
  }
  .service-body ul {
    gap:3px 16px
  }
  .process {
    padding-top:33px;
    padding-bottom:39px
  }
  .process-title {
    grid-template-columns:1fr;
    gap:20px
  }
  .process-title .eyebrow {
    font-size:7px
  }
  .process-title h2 {
    font-size:37px;
    letter-spacing:-1.4px
  }
  .process-grid {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:32px
  }
  .process-grid article {
    padding-top:15px
  }
  .process-grid article>span {
    font-size:7px
  }
  .process-grid h3 {
    font-size:17px;
    margin:17px 0 9px
  }
  .process-grid p {
    font-size:10px;
    max-width:350px;
    line-height:1.7
  }
  .contact-section {
    padding-top:36px;
    padding-bottom:35px
  }
  .contact-section>.eyebrow {
    font-size:6px;
    letter-spacing:1.2px
  }
  .contact-line {
    gap:10px;
    margin-top:35px;
    align-items:flex-end
  }
  .contact-line h2 {
    font-size:20vw;
    letter-spacing:-3.5px;
    line-height:.88
  }
  .contact-disc {
    width:58px;
    height:58px;
    font-size:31px;
    flex-shrink:0;
    margin:0 0 5px
  }
  .contact-bottom {
    display:block;
    margin-top:28px
  }
  .contact-bottom p {
    font-size:10px;
    line-height:1.7
  }
  .contact-bottom .text-button {
    margin-top:20px;
    gap:38px;
    font-size:10px
  }
  .site-footer {
    padding:30px 6% 20px;
    gap:27px
  }
  .site-footer .wordmark {
    font-size:29px
  }
  .footer-links {
    gap:20px;
    flex-wrap:wrap;
    font-size:9px;
    width:100%;
    justify-content:space-between
  }
  .footer-meta {
    margin-top:0;
    padding-top:18px;
    gap:18px 15px;
    flex-wrap:wrap;
    font-size:6px;
    letter-spacing:.6px
  }
  .footer-meta>span:first-child {
    width:100%;
    font-size:5px
  }
  .footer-meta button {
    font-size:8px
  }
  .footer-meta>span:last-child {
    margin-left:auto
  }
  .project-dialog {
    width:94vw
  }
  .project-layout {
    grid-template-columns:1fr
  }
  .project-image {
    min-height:0;
    height:260px
  }
  .project-image img {
    height:100%;
    max-height:none;
    width:100%;
    object-fit:cover
  }
  .project-image .field-composition {
    height:100%;
    aspect-ratio:auto
  }
  .project-image .field-paper {
    width:65%;
    height:88%
  }
  .project-image .field-paper strong {
    font-size:46px
  }
  .project-details {
    padding:28px 24px
  }
  .project-details .eyebrow {
    font-size:6px
  }
  .project-details h2 {
    font-size:44px;
    letter-spacing:-1.5px;
    margin:18px 0
  }
  .project-details>p {
    font-size:11px;
    line-height:1.8
  }
  .project-details h3 {
    margin-top:22px;
    font-size:10px
  }
  .project-details ul {
    font-size:10px
  }
  .project-details .project-disclaimer {
    font-size:8px;
    line-height:1.7;
    margin-top:21px
  }
  .project-details .text-button {
    margin-top:10px
  }
  .dialog-close {
    width:31px;
    height:31px;
    font-size:11px;
    top:13px;
    right:13px
  }
  .reel-dialog {
    padding:24px 18px;
    width:94vw
  }
  .reel-heading .eyebrow {
    font-size:6px
  }
  .reel-heading h2 {
    font-size:29px;
    letter-spacing:-1px;
    margin-top:22px;
    max-width:230px
  }
  .reel-stage {
    height:300px;
    min-height:0
  }
  .reel-controls {
    gap:6px;
    flex-wrap:wrap;
    padding-top:13px
  }
  .reel-controls>span {
    font-size:6px;
    letter-spacing:.4px
  }
  .reel-controls>button {
    padding:6px
  }
  .reel-controls #reel-toggle {
    font-size:8px
  }
  .reel-note {
    font-size:7px;
    margin-top:12px
  }
  .contact-dialog {
    padding:32px 22px;
    width:94vw
  }
  .contact-dialog>.eyebrow {
    font-size:6px
  }
  .contact-dialog h2 {
    font-size:46px;
    margin:27px 0 16px;
    letter-spacing:-1.8px
  }
  .brief-intro {
    font-size:10px;
    line-height:1.7;
    margin-bottom:23px;
    max-width:230px
  }
  .contact-dialog form {
    gap:16px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:16px
  }
  .contact-dialog label {
    font-size:8px;
    gap:8px
  }
  .contact-dialog input,.contact-dialog select,.contact-dialog textarea {
    font-size:11px;
    padding:12px 10px
  }
  .solid-button {
    font-size:10px;
    padding:14px 16px
  }
  .brief-actions {
    gap:10px
  }
  .outline-button {
    font-size:9px;
    padding:14px
  }
  .brief-status {
    font-size:8px
  }
  .contact-dialog .brief-output-label textarea {
    font-size:10px;
    line-height:1.7
  }
  .toast {
    font-size:10px;
    padding:12px 18px
  }
  .will-reveal {
    transform:translateY(15px)
  }
}

@media(max-width:370px) {
  .work-filters button {
    padding:8px 10px
  }
  .hero-art {
    height:300px
  }
  .hero-bottom p {
    max-width:205px
  }
  .section-heading h2 {
    font-size:35px
  }
  .contact-line h2 {
    font-size:19vw
  }
  .contact-disc {
    width:48px;
    height:48px;
    font-size:27px
  }
  .service-list summary {
    font-size:19px
  }
  .field-paper strong {
    font-size:46px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .will-reveal {
    opacity:1;
    transform:none
  }
  .hero-art {
    transform:none!important
  }
}