:root {
  --paper:#f5f3ee;
  --ink:#171715;
  --muted:#66655e;
  --line:#cdcbc3;
  --lilac:#c2b3ed;
  --pad:clamp(24px,5vw,90px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a:focus-visible,button:focus-visible,textarea:focus-visible {
  outline:3px solid #7956ce;
  outline-offset:6px
}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  background:white;
  padding:15px;
  z-index:99
}
.skip:focus {
  top:15px
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px var(--pad);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:5
}
.wordmark {
  font-size:32px;
  letter-spacing:-1.8px
}
.wordmark span {
  font-size:10px;
  vertical-align:top;
  margin-left:3px;
  letter-spacing:0
}
nav {
  display:flex;
  align-items:center;
  gap:38px;
  font-size:13px
}
nav a:not(.nav-cta):hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.nav-cta {
  border:1px solid var(--ink);
  border-radius:30px;
  padding:13px 20px
}
.nav-cta span {
  margin-left:20px
}
.nav-cta:hover {
  background:var(--ink);
  color:var(--paper)
}
.hero {
  min-height:100svh;
  padding:132px var(--pad) 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden
}
.hero-top,.hero-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  line-height:1.7;
  font-weight:500
}
.hero-title {
  display:grid;
  grid-template-columns:1fr .7fr;
  align-items:center;
  flex:1;
  padding:30px 0 35px;
  gap:30px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:clamp(66px,7.6vw,132px);
  line-height:.98;
  letter-spacing:-.075em;
  font-weight:400
}
em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.065em
}
h1 em {
  color:#74658f
}
.hero-emblem {
  justify-self:center;
  text-align:center;
  transform:rotate(-7deg);
  transition:transform .5s
}
.hero-emblem:hover {
  transform:rotate(0deg)
}
.emblem-frame {
  border:2px solid var(--ink);
  width:230px;
  height:230px;
  display:flex;
  align-items:center;
  flex-direction:column;
  overflow:hidden;
  background:var(--paper)
}
.emblem-frame img {
  width:145px;
  height:163px;
  margin-top:-24px
}
.emblem-frame span {
  font-size:39px;
  letter-spacing:-2px;
  margin-top:23px
}
.emblem-caption {
  font-size:10px;
  display:block;
  margin-top:22px;
  letter-spacing:1px;
  text-transform:uppercase
}
.hero-bottom {
  padding-bottom:36px
}
.hero-bottom p {
  font-size:14px;
  line-height:1.5
}
.round-link {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px
}
.circle {
  width:42px;
  height:42px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
  transition:background .2s
}
.round-link:hover .circle {
  background:var(--lilac)
}
.section-index {
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:9px;
  letter-spacing:1px
}
.studio {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  min-height:800px
}
.studio-art {
  background:#eeece6;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center
}
.studio-art>img {
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
  transform:translateY(var(--cat-y,0px));
  will-change:transform
}
.art-note {
  position:absolute;
  bottom:28px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.3px
}
.studio-copy {
  padding:100px clamp(30px,6vw,100px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start
}
.studio h2 {
  font-size:clamp(46px,4.5vw,80px);
  line-height:1.04;
  letter-spacing:-.065em;
  margin:38px 0 30px;
  font-weight:400
}
.studio p {
  font-size:15px;
  line-height:1.7;
  max-width:330px;
  margin-bottom:24px
}
.text-link {
  margin-top:16px;
  border-bottom:1px solid var(--ink);
  padding-bottom:9px;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  min-width:170px
}
.section-pad {
  padding:100px var(--pad)
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.section-heading>.eyebrow {
  grid-column:1/-1
}
.section-heading h2,.approach h2 {
  font-size:clamp(50px,5.3vw,88px);
  line-height:1.03;
  letter-spacing:-.065em;
  font-weight:400
}
.section-heading>p {
  align-self:end;
  justify-self:end;
  font-size:14px;
  line-height:1.6
}
.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:65px
}
.services article {
  border-top:1px solid var(--ink);
  padding:22px 30px 0 0;
  position:relative
}
.services article+article {
  border-left:1px solid var(--line);
  padding-left:30px
}
.service-no {
  font-size:10px
}
.services h3 {
  font-size:24px;
  letter-spacing:-1px;
  font-weight:400;
  margin:20px 0
}
.services p {
  font-size:14px;
  line-height:1.65;
  max-width:310px
}
.tags {
  display:block;
  font-size:9px;
  color:#595850;
  margin-top:28px
}
.mini-art {
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.direction i {
  display:block;
  width:77px;
  height:77px;
  border:1px solid var(--ink);
  border-radius:50%;
  margin-left:-25px
}
.direction i:nth-child(2) {
  background:var(--lilac)
}
.design i {
  position:absolute;
  width:100px;
  height:100px;
  background:var(--ink);
  transform:rotate(-14deg)
}
.design i+ i {
  background:var(--lilac);
  width:80px;
  height:80px;
  transform:translate(30px,5px) rotate(13deg);
  mix-blend-mode:multiply
}
.build {
  gap:8px
}
.build i {
  height:72px;
  width:38px;
  border-radius:30px;
  background:var(--lilac);
  transform:rotate(25deg)
}
.build i:nth-child(2) {
  height:112px;
  background:var(--ink)
}
.approach {
  background:#eae7df;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12vw
}
.approach h2 {
  margin:35px 0
}
.approach-intro>p {
  max-width:320px;
  font-size:14px;
  line-height:1.7
}
.steps article {
  display:grid;
  grid-template-columns:35px 1fr;
  gap:20px;
  padding:30px 0;
  border-top:1px solid #aaa79f
}
.steps article>span {
  font-size:10px;
  padding-top:4px
}
.steps h3 {
  font-size:23px;
  font-weight:400;
  letter-spacing:-.8px;
  margin-bottom:15px
}
.steps p {
  font-size:14px;
  line-height:1.7;
  max-width:360px
}
.contact {
  background:#111210;
  color:var(--paper);
  position:relative;
  overflow:hidden;
  padding-bottom:28px;
  min-height:740px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.contact-content {
  position:relative;
  z-index:1
}
.contact h2 {
  font-size:clamp(80px,11vw,180px);
  line-height:.95;
  letter-spacing:-.075em;
  font-weight:400;
  margin:55px 0 50px
}
.contact h2 em {
  color:#c9b4f5
}
.contact-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.contact-bottom p {
  font-size:14px;
  line-height:1.6
}
.contact-button {
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-radius:50px;
  padding:20px 27px;
  display:flex;
  align-items:center;
  gap:50px;
  font-size:13px;
  transition:background .2s,transform .2s
}
.contact-button:hover {
  background:var(--lilac);
  transform:translateY(-2px)
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1;
  margin-top:100px;
  border-top:1px solid #4e4e48;
  padding-top:24px
}
footer>span,footer>a:last-child {
  font-size:10px;
  color:#c2c2b9
}
.lava {
  position:absolute;
  inset:0;
  pointer-events:none;
  filter:blur(2px)
}
.lava i {
  position:absolute;
  background:linear-gradient(135deg,#98bcf6,#c5a0ef);
  border-radius:48% 52% 63% 37% / 42% 42% 58% 58%;
  width:230px;
  height:260px;
  right:13%;
  top:14%;
  animation:float 16s ease-in-out infinite alternate;
  opacity:.9
}
.lava i:nth-child(2) {
  width:180px;
  height:180px;
  right:5%;
  top:37%;
  animation-delay:-5s
}
.lava i:nth-child(3) {
  width:55px;
  height:55px;
  right:35%;
  top:62%;
  animation-delay:-11s
}
.lava i:nth-child(4) {
  width:90px;
  height:90px;
  right:32%;
  top:12%;
  animation-delay:-8s
}
.contact h2 {
  position:relative
}
dialog {
  border:0;
  background:var(--paper);
  color:var(--ink);
  max-width:620px;
  width:calc(100% - 32px);
  padding:45px;
  border-radius:4px;
  max-height:90svh
}
dialog::backdrop {
  background:#0009;
  backdrop-filter:blur(7px)
}
.dialog-close {
  position:absolute;
  right:18px;
  top:12px;
  border:0;
  background:none;
  font-size:30px;
  min-width:44px;
  min-height:44px
}
dialog h2 {
  font-size:62px;
  letter-spacing:-4px;
  font-weight:400;
  line-height:1;
  margin:24px 0
}
dialog p,dialog label {
  font-size:13px;
  line-height:1.6
}
.preview-notice {
  padding:14px;
  background:#e9e4f1;
  margin-bottom:24px
}
textarea {
  display:block;
  width:100%;
  padding:15px;
  margin:12px 0 20px;
  border:1px solid #77766f;
  background:transparent;
  border-radius:0;
  resize:vertical
}
dialog .contact-button {
  background:var(--ink);
  color:var(--paper)
}
#brief-status {
  margin-top:15px
}
@keyframes float {
  to {
    transform:translate(35px,-45px) rotate(40deg);
    border-radius:59% 41% 34% 66% / 52% 59% 41% 48%
  }
}
@media(min-width:1700px) {
  .hero-title {
    max-width:1600px;
    width:100%;
    margin:auto
  }
  .hero {
    min-height:950px
  }
}
@media(max-width:900px) {
  nav {
    gap:22px
  }
  .hero-title {
    grid-template-columns:1fr .5fr
  }
  .emblem-frame {
    width:170px;
    height:170px
  }
  .emblem-frame img {
    width:110px;
    height:123px;
    margin-top:-18px
  }
  .emblem-frame span {
    font-size:28px;
    margin-top:15px
  }
  .studio {
    min-height:620px
  }
  .studio-copy {
    padding:60px 30px
  }
  .studio h2 {
    font-size:48px
  }
  .art-note {
    flex-direction:column;
    gap:7px
  }
  .approach {
    gap:50px
  }
  .services article {
    padding-right:18px
  }
  .services article+article {
    padding-left:18px
  }
  .services h3 {
    font-size:21px
  }
  .contact {
    min-height:700px
  }
  .lava i {
    right:8%;
    width:170px;
    height:190px
  }
}
@media(max-width:600px) {
  header {
    padding-top:22px
  }
  .wordmark {
    font-size:28px
  }
  nav>a:not(.nav-cta) {
    display:none
  }
  .nav-cta {
    font-size:11px;
    padding:12px 15px
  }
  .nav-cta span {
    margin-left:10px
  }
  .hero {
    padding-top:110px;
    min-height:860px;
    min-height:100svh
  }
  .hero-top>.eyebrow:last-child {
    display:none
  }
  .hero-title {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    padding:30px 0
  }
  h1 {
    font-size:clamp(53px,13.3vw,80px);
    letter-spacing:-.075em
  }
  .hero-emblem {
    align-self:flex-end;
    margin-right:20px
  }
  .emblem-frame {
    width:120px;
    height:120px;
    border-width:1px
  }
  .emblem-frame img {
    width:78px;
    height:87px;
    margin-top:-12px
  }
  .emblem-frame span {
    font-size:20px;
    margin-top:11px;
    letter-spacing:-1px
  }
  .emblem-caption {
    font-size:7px;
    margin-top:12px
  }
  .hero-bottom {
    padding:20px 0 28px;
    gap:15px
  }
  .hero-bottom p {
    font-size:11px
  }
  .round-link {
    gap:10px;
    font-size:10px
  }
  .circle {
    width:34px;
    height:34px
  }
  .studio {
    grid-template-columns:1fr
  }
  .studio-art {
    min-height:420px
  }
  .studio-art img {
    width:100%
  }
  .art-note {
    flex-direction:row;
    left:24px;
    right:24px;
    bottom:20px;
    font-size:8px
  }
  .studio-copy {
    padding:65px 24px
  }
  .studio h2 {
    font-size:54px;
    margin:28px 0
  }
  .studio p {
    max-width:100%;
    font-size:14px
  }
  .section-pad {
    padding:65px 24px
  }
  .section-heading {
    display:block
  }
  .section-heading h2 {
    margin:28px 0;
    font-size:58px
  }
  .section-heading>p {
    font-size:13px
  }
  .services {
    grid-template-columns:1fr;
    margin-top:38px
  }
  .services article,.services article+article {
    padding:22px 0 30px;
    border-left:0
  }
  .mini-art {
    height:140px
  }
  .services h3 {
    font-size:27px
  }
  .services p {
    max-width:100%
  }
  .tags {
    margin-top:18px
  }
  .approach {
    grid-template-columns:1fr;
    gap:38px
  }
  .approach h2 {
    font-size:58px;
    margin:27px 0
  }
  .approach-intro>p {
    max-width:100%
  }
  .steps article {
    padding:25px 0
  }
  .steps h3 {
    font-size:23px
  }
  .contact {
    min-height:720px;
    padding-bottom:24px
  }
  .contact h2 {
    font-size:84px;
    margin:60px 0 55px
  }
  .contact-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:30px
  }
  .contact-bottom p {
    font-size:13px
  }
  .lava i {
    width:130px;
    height:150px;
    top:20%;
    right:0%;
    opacity:.65
  }
  .lava i:nth-child(2) {
    width:100px;
    height:110px;
    top:35%;
    right:-8%
  }
  .lava i:nth-child(3) {
    top:57%;
    right:10%
  }
  .lava i:nth-child(4) {
    width:55px;
    height:55px;
    right:18%;
    top:12%
  }
  footer {
    margin-top:65px;
    flex-wrap:wrap;
    gap:25px
  }
  footer>span {
    order:3;
    width:100%
  }
  footer .wordmark {
    font-size:30px
  }
  dialog {
    padding:35px 24px
  }
  dialog h2 {
    font-size:52px
  }
  .contact-button {
    padding:18px 24px
  }
  .section-index {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .studio-art>img {
    transform:none;
    will-change:auto
  }
}
.lava {
  opacity:.45
}
.motion-toggle {
  align-self:flex-start;
  position:relative;
  z-index:2;
  border:1px solid #77776d;
  border-radius:30px;
  background:transparent;
  color:var(--paper);
  font-size:11px;
  padding:10px 16px;
  margin-top:28px
}
.motion-paused .lava i {
  animation-play-state:paused
}
.motion-paused .studio-art>img {
  transform:none;
  will-change:auto
}
.hero-emblem {
  translate:0 var(--emblem-y,0px)
}
@media(prefers-reduced-motion:reduce) {
  .motion-toggle {
    display:none
  }
  .hero-emblem {
    translate:none
  }
}

/* Approved layout, refined behavior. No fixed-height scroll containers. */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}
html.reading-tall { scroll-snap-type: none; }
main > section {
  min-block-size: 100vh;
  min-block-size: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
main > .studio, main > .contact {
  min-height: 100svh;
}
.studio, .studio-art {
  background: #fff;
}
.studio-art > img {
  mix-blend-mode: normal;
}
.lava {
  inset: 0 0 0 auto;
  width: min(48%, 600px);
  height: 100%;
  filter: none;
  opacity: .48;
  overflow: visible;
  contain: layout style;
}
.arrived {
  animation: arrive .7s cubic-bezier(.2,.7,.2,1) both;
}
.services article:nth-child(2).arrived { animation-delay: .08s; }
.services article:nth-child(3).arrived { animation-delay: .16s; }
.mini-art { transition: transform .35s ease; }
@media (hover: hover) {
  .services article:hover .mini-art { transform: translateY(-5px); }
}
.round-link .circle { transition: background .2s, transform .3s; }
.round-link:hover .circle { transform: translateY(3px); }
.motion-paused .arrived { animation-play-state: paused; }
@keyframes arrive {
  from { transform: translateY(16px); }
  to { transform: translateY(0); }
}
@media (max-width: 600px) {
  .lava { width: 70%; right: -18%; opacity: .38; }
  .hero { min-height: 100svh; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .hero { min-height: 650px; }
  .studio-copy { padding-block: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .arrived, .mini-art, .hero-emblem { animation: none; transform: none; transition: none; }
}

/* Scoped contact intake; existing site design and motion are unchanged. */
#brief-form label { display:block; margin:1rem 0 .4rem; }
#brief-form input, #brief-form textarea { box-sizing:border-box; width:100%; padding:.8rem; border:1px solid currentColor; border-radius:0; background:transparent; color:inherit; font:inherit; font-size:16px; }
#brief-form input:focus-visible, #brief-form textarea:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
#brief-form .brief-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
#brief-form button:disabled { opacity:.6; cursor:wait; }
.brief-fallback { font-size:.9rem; }
.brief-fallback a { color:inherit; text-decoration:underline; }