*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;font:16px/1.55 Arial,Helvetica,sans-serif;color:#202024;background:#f8f7f4}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button,input,textarea,select{font:inherit}button{cursor:pointer}.skip{position:absolute;top:-100px;z-index:9;background:white;padding:12px}.skip:focus{top:0}header,footer,.section,.hero{padding-inline:max(6.4vw,calc((100vw - 1440px)/2))}header{display:flex;align-items:center;gap:30px;background:#111116;color:#fff;min-height:80px;border-bottom:1px solid #323238}.brand{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;font-size:20px;font-weight:700;letter-spacing:-1px;line-height:1}.mark{grid-row:span 2;border-radius:8px;background:#aaa2ff;color:#151425;font:bold italic 36px/37px Georgia;width:40px;text-align:center}.mark span{color:#574bdc}.subbrand{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-top:3px}.brand:hover{text-decoration:none}nav{display:flex;gap:32px;margin-left:auto;font-size:14px;color:#d1cfd6}.talk,.primary{display:inline-flex;align-items:center;justify-content:center;gap:26px;border-radius:99px;font-weight:600;font-size:14px;padding:13px 23px}.talk{border:1px solid #64636e;margin-left:12px}.hero{color:#fff;background:#111116;position:relative;overflow:hidden}.gridbg{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 50%,#28224588,transparent 48%)}.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:clamp(475px,42vw,660px);padding-block:36px}.eyebrow,.label,.herobase,.sculpt figcaption,small,.num{font:600 10px/1.7 'Courier New',monospace;text-transform:uppercase;letter-spacing:1.45px}.eyebrow,.label{display:flex;align-items:center;gap:10px}.eyebrow{color:#d7d1ff}.eyebrow i,.herobase i{display:inline-block;width:7px;height:7px;background:#aa9fff;border-radius:50%}.hero h1{font-size:clamp(68px,7.9vw,132px);letter-spacing:-.078em;line-height:.94;margin:30px 0 20px;font-weight:550}.hero h1 em{color:#b4a8ff;font:italic 1.09em/.95 Georgia,serif;letter-spacing:-.075em}.pitch p{color:#c0bdc8;max-width:445px;font-size:clamp(16px,1.2vw,20px)}.actions{display:flex;align-items:center;gap:25px;margin-top:28px}.primary{background:#b6abff;color:#151222;border:0}.primary:hover{background:#d0c9ff;text-decoration:none}.quiet{font-size:14px;border-bottom:1px solid #666;padding:5px 0}.sculpt{aspect-ratio:1.18;margin:0;position:relative;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:40px 40px}.sculpt img{width:100%;height:100%;object-fit:contain;animation:float 9s ease-in-out infinite}.sculpt figcaption{position:absolute;right:12px;bottom:0;color:#b0a9c2;font-size:9px}.cross{position:absolute;color:#807995;font:22px monospace}.tl{top:0;left:0}.br{bottom:22px;right:0}@keyframes float{50%{transform:translateY(-6px) rotate(2deg)}}.herobase{position:relative;display:flex;justify-content:space-between;border-top:1px solid #36353d;padding-block:17px;color:#b8b4c1;font-size:9px}.herobase i{width:5px;height:5px;margin-right:6px}.section{padding-block:80px}.label{color:#5b5186;margin-bottom:15px}.label:before{content:'';width:24px;height:2px;background:#8576d5}h2{font-size:clamp(40px,4.25vw,78px);line-height:1.02;font-weight:550;letter-spacing:-.07em;margin:0 0 16px}h2 span{color:#8271dd}.sectitle{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.sectitle p{max-width:280px}.section p{color:#575660}.projects,.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.poster{position:relative;display:grid;place-items:center;aspect-ratio:1.38;overflow:hidden;background:#29211e;color:#fff;border-radius:5px}.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:transform .4s}.poster:hover img{transform:scale(1.045)}.poster strong{position:relative;font:italic clamp(25px,3vw,55px) Georgia}.poster.barber strong{font:700 clamp(28px,3.6vw,52px)/1.15 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:-.02em}.poster.salon strong{font-style:normal}.num{position:absolute;left:14px;top:12px;color:white;font-size:9px}.projects small{display:block;margin-top:18px}.section h3{line-height:1.2;letter-spacing:-.04em;font-size:24px;margin:10px 0}.textlink{display:inline-block;border-bottom:1px solid #98939e;font-weight:bold;font-size:14px}.pale{background:#edebe7}.services{margin-top:34px}.services article{border-top:1px solid #a9a6ad;padding:17px 0}.about{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.intro{font-size:25px;line-height:1.35}.prices b{font-size:26px}.prices ul{padding-left:18px;color:#575660}.section form{display:grid;gap:12px}label{display:grid;gap:5px;font-weight:600;font-size:14px}input,select,textarea{max-width:100%;width:100%;border:1px solid #a7a5ac;background:#fff;border-radius:5px;padding:10px;color:#202024}.section form p{font-size:14px;margin:0}.section button{justify-self:start}footer{display:flex;justify-content:space-between;padding-block:30px;background:#111116;color:white}a:focus-visible,button:focus-visible{outline:3px solid #876df9;outline-offset:4px}@media(max-width:800px){header{gap:12px;flex-wrap:wrap;min-height:72px;padding-block:14px}nav{order:3;width:100%;justify-content:space-between;gap:12px}.talk{margin-left:auto}.hero-inner{grid-template-columns:1fr .8fr}.projects,.services{gap:16px}.section{padding-block:54px}.prices{grid-template-columns:1fr}}@media(max-width:620px){.hero-inner,.about,.projects,.services{grid-template-columns:1fr}.hero-inner{gap:10px;padding-top:40px}.sculpt{width:min(80%,330px);justify-self:center}.hero h1{font-size:72px}.hero p{max-width:380px}.herobase{font-size:8px;letter-spacing:.5px}.sectitle{display:block}.sectitle p{max-width:none}.projects{gap:30px}.section h2{font-size:44px}.actions{gap:16px}.about{gap:20px}.sculpt figcaption{font-size:7px}}@media(prefers-reduced-motion:reduce){html:not([data-knot-motion="playing"]){scroll-behavior:auto}html:not([data-knot-motion="playing"]) *,html:not([data-knot-motion="playing"]) *::before,html:not([data-knot-motion="playing"]) *::after{animation:none!important;transition:none!important}}
/* The indigo highlight follows the reader from the studio mark to the next action. */
:root{--paper:#f7f7f1;--ink:#191920;--indigo:#4535a4;--light:#bcb0ff;--line:#c9c8c0}
body{background:var(--paper);color:var(--ink)}
.mast,.hero{background:var(--paper);color:var(--ink)}
.mast{border-color:var(--line);min-height:76px}.mast nav{color:var(--ink)}.mast nav a{padding-block:10px}.mast nav a:last-child{color:var(--indigo)}
.mark{background:var(--indigo);color:white}.mark span{color:var(--light)}
.hero-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:5vw;padding-block:clamp(28px,4vw,70px)}
.eyebrow,.label{color:var(--indigo);letter-spacing:1.3px}.eyebrow i{background:var(--indigo)}
.hero h1{font-size:clamp(57px,6.05vw,100px);line-height:.99;letter-spacing:-.07em;margin:24px 0 19px}
.hero h1 em,h2 em{font:italic 1.07em/.98 Georgia,serif;letter-spacing:-.07em;color:var(--indigo)}
.pitch p{color:#454449;max-width:450px;margin:0 0 25px;line-height:1.55}
.primary{border-radius:5px;background:var(--indigo);color:white;padding:15px 21px}.primary:hover{background:#322382}
.sculpt{aspect-ratio:1.04;width:100%;overflow:hidden;isolation:isolate;border:1px solid #444252;border-radius:5px;background-color:#201e2c;background-image:linear-gradient(#c8bbff0a 1px,transparent 1px),linear-gradient(90deg,#c8bbff0a 1px,transparent 1px),radial-gradient(ellipse at 0 0,#46405e,transparent 65%);background-size:32px 32px,32px 32px,100% 100%;display:grid;place-items:center}
.sculpt img{position:relative;width:91%;height:82%;animation:none;filter:drop-shadow(10px 16px 8px #0c0a1d88)}
.plate-label,.sculpt figcaption{position:absolute;left:19px;right:19px;font:600 10px/1.5 monospace;letter-spacing:1.4px;color:#e3dffd}
.plate-label{top:16px}.sculpt figcaption{bottom:15px;display:flex;justify-content:space-between}.sculpt figcaption span{font-weight:400}.orbit{position:absolute;width:80%;aspect-ratio:1;border:1px dashed #bab1e941;border-radius:50%}
.herobase{border-color:var(--line);color:#4a4752;letter-spacing:1px}.herobase a{color:var(--indigo)}
#work{background:#191920;color:var(--paper)}#work em,#work .label,#work .textlink{color:var(--light)}#work p{color:#d0ced8}
.sectitle{align-items:center}.sectitle p{max-width:330px}.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 32px}
.project:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:5vw;background:#24242d;border:1px solid #454451;border-radius:6px;overflow:hidden}
.project:first-child .project-copy{padding:20px 28px 20px 0}.project:first-child .poster{border-radius:0;aspect-ratio:1.95}.project:first-child h3{font-size:clamp(26px,3vw,48px)}
.poster{aspect-ratio:2.4}.poster img{filter:brightness(.62)}.poster strong{font-size:clamp(36px,4.3vw,82px)}.poster .num{background:#191920bd;padding:3px 8px}.projects small{color:#c1b7ee}.textlink{padding-block:6px;color:var(--indigo)}
.pale{background:#eaece5}.services article{border-top:2px solid #8f84bb}.process{padding-left:1.4em}.process li{padding:12px 0 12px 5px;border-top:1px solid var(--line)}.process li::marker{color:var(--indigo)}
.prices article{background:var(--paper);padding:22px}.prices h3{min-height:2.4em}#contact textarea{resize:vertical}.section{padding-block:clamp(52px,6vw,94px)}
@media(max-width:800px){.mast{flex-wrap:nowrap}.mast nav{width:auto;margin-left:auto;gap:16px}.hero-inner{gap:22px}.prices h3{min-height:0}}
@media(max-width:670px){.mast{flex-wrap:wrap;gap:5px}.mast nav{width:100%;gap:8px}.hero-inner{grid-template-columns:minmax(0,1fr);padding-block:26px 18px;gap:23px}.hero h1{font-size:clamp(46px,10.8vw,68px);margin:15px 0}.pitch p{margin-bottom:19px}.sculpt{width:100%;height:clamp(155px,41vw,220px);aspect-ratio:auto}.sculpt img{height:100%;width:70%;justify-self:end;margin-right:4%;transform:rotate(-12deg)}.orbit{width:47%;right:11%}.plate-label,.sculpt figcaption{font-size:9px;left:13px;right:13px}.sculpt figcaption{display:grid;justify-content:start;gap:2px}.hero-inner{min-height:0}.projects,.services,.about,.project:first-child{grid-template-columns:1fr}.project:first-child{gap:0}.project:first-child .project-copy{padding:0 20px 18px}.project:first-child .poster,.poster{aspect-ratio:1.9}.herobase{font-size:8px}.sectitle{display:block}.section h2{font-size:clamp(37px,10vw,55px)}.prices h3{min-height:auto}.brand{font-size:18px}.mast{padding-top:14px;padding-bottom:3px}.project .textlink{min-height:44px}.services{gap:15px}}
@media(prefers-reduced-motion:reduce){.poster:hover img{transform:none}}

/* Motion follows the knot's curve and settles before the visitor starts reading. */
@keyframes studio-arrive {
    from { translate: 0 14px; opacity: .7; }
    to { translate: 0 0; opacity: 1; }
  }
  @keyframes studio-trace {
    from { scale: .15 1; }
    to { scale: 1 1; }
  }
html[data-knot-motion="playing"] {
  .pitch h1 { animation: studio-arrive .65s ease-out both; }
  .pitch p, .pitch .primary { animation: studio-arrive .65s .1s ease-out backwards; }
  .section.in-view .label { animation: studio-arrive .58s ease-out; }
  .in-view .label::before { transform-origin: left; animation: studio-trace .7s ease-out; }
  .primary, .primary span, .poster strong, .sculpt img, #brief input, #brief select, #brief textarea {
    transition: transform .32s ease-out, background-color .24s, border-color .24s, box-shadow .24s;
  }
  .primary:is(:hover,:focus-visible) span { transform: translate(2px,-2px); }
  .poster:is(:hover,:focus-visible) strong { transform: translateY(-4px); }
  #brief :is(input,select,textarea):focus { border-color: var(--indigo); box-shadow: 0 0 0 3px #bcb0ff70; }
  @media (hover: hover) and (pointer: fine) and (min-width: 671px) {
    .sculpt:hover img { transform: perspective(650px) rotateY(-9deg) rotateZ(4deg); }
  }
}

.motion-control {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  background: #211e32; color: #f7f4ff; border: 1px solid #9187b2;
  border-radius: 20px; padding: 7px 13px; font: 600 12px/1.5 Arial,sans-serif;
}
.motion-control:hover { background: #39324c; }
@keyframes knot-turn {
  from { rotate: -12deg; scale: .93; }
  50% { scale: 1; }
  to { rotate: 348deg; scale: .93; }
}
@keyframes preview-open {
  from { clip-path: inset(0 12% 0 0 round 5px); }
  to { clip-path: inset(0 round 5px); }
}
/* Pause freezes the knot at its current angle. */
html[data-knot-motion] .sculpt img { animation: knot-turn 12s linear infinite !important; }
html[data-knot-motion="paused"] .sculpt img { animation-play-state: paused !important; }
html[data-knot-motion="playing"] {
  .project.in-view .poster { animation: preview-open .85s cubic-bezier(.2,.7,.2,1); }
}
@media(max-width:670px) {
  .motion-control { top: auto; bottom: 12px; left: 12px; right: auto; min-height: 40px; }
  .sculpt figcaption { bottom: 62px; }
  .sculpt img { width: 66%; height: 90%; }
}

@keyframes text-arrival {
  from { translate: 0 24px; opacity: .55; }
  to { translate: 0 0; opacity: 1; }
}
html[data-knot-motion="playing"] .section .motion-copy.in-view {
  animation: text-arrival .78s cubic-bezier(.17,.75,.25,1);
}
@media (hover: hover) and (pointer: fine) {
  html[data-knot-motion="playing"] .motion-copy {
    transition: transform .3s ease-out;
  }
  html[data-knot-motion="playing"] .motion-copy:hover {
    transform: translateX(5px);
  }
}

#manual-brief { background: transparent; border: 0; border-bottom: 1px solid currentColor; padding: 8px 0; }
#contact small a { text-transform: none; letter-spacing: .02em; font: 16px/1.5 Arial,sans-serif; text-decoration: underline; }
