:root {

  --paper:#f4f2ec;
  --ink:#232721;
  --muted:#6b6e65;
  --orange:#e65c35;
  --line:#d9d9d0;
  --green:#3e4f39

}
* {

  box-sizing:border-box

}
html {

  scroll-behavior:smooth;
  scroll-padding-top:100px

}
body {

  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.6

}
button,input,select,textarea {

  font:inherit

}
a {

  color:inherit;
  text-decoration:none

}
button {

  cursor:pointer

}
button,a,input,select,textarea,summary {

  -webkit-tap-highlight-color:transparent

}
:focus-visible {

  outline:3px solid var(--orange);
  outline-offset:5px

}
h1,h2,h3,p {

  margin:0

}
h1,h2,h3 {

  font-family:Manrope,'DM Sans',sans-serif;
  line-height:1.07;
  letter-spacing:-.055em

}
em {

  font-family:Georgia,serif;
  font-weight:400

}
h2 {

  font-size:clamp(34px,4vw,53px);
  font-weight:600

}
.wrap {

  width:min(1280px,89%);
  margin:auto

}
.section {

  padding-top:110px;
  padding-bottom:110px

}
.eyebrow {

  font-size:10px;
  letter-spacing:.14em;
  font-weight:650

}
.orange {

  color:var(--orange)

}
header {

  height:95px;
  width:89%;
  max-width:1380px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)

}
.brand {

  display:flex;
  align-items:center;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:24px;
  letter-spacing:-1.2px

}
.brand-light {

  font-weight:400

}
.brand i {

  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin:12px 0 0 3px

}
.brandmark {

  background:var(--ink);
  color:var(--paper);
  font-size:26px;
  width:35px;
  height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  border-radius:7px;
  position:relative

}
.brandmark span {

  font-size:14px;
  margin-top:-9px

}
nav {

  display:flex;
  gap:32px;
  font-size:12px

}
nav a:hover,.text-link:hover {

  color:var(--orange)

}
.button {

  padding:17px 23px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  font-size:12px;
  font-weight:600;
  border:0;
  transition:transform .25s,background .25s

}
.button:hover {

  transform:translateY(-3px)

}
.button span {

  font-size:19px;
  line-height:1

}
.small {

  padding:12px 18px

}
.dark {

  background:var(--ink);
  color:white

}
.orange-bg {

  background:var(--orange);
  color:white

}
.hero {

  display:grid;
  grid-template-columns:1fr 1.15fr;
  min-height:740px;
  align-items:center;
  padding:65px 0 85px;
  gap:30px

}
.status-dot {

  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  margin-right:8px;
  box-shadow:0 0 0 4px #e65c3515

}
.hero h1 {

  font-size:clamp(65px,7.1vw,100px);
  font-weight:600;
  margin:23px 0 25px;
  line-height:1.01;
  letter-spacing:-.065em

}
.hero h1 em {

  color:var(--green)

}
.hero-copy>p {

  font-size:16px;
  color:var(--muted);
  line-height:1.7

}
.hero-actions {

  display:flex;
  gap:24px;
  align-items:center;
  margin-top:28px

}
.text-link {

  font-size:12px;
  font-weight:600

}
.hero-note {

  position:relative;
  font-size:11px;
  padding-left:27px;
  margin-top:38px;
  line-height:1.6

}
.hero-note>span {

  position:absolute;
  left:0;
  color:var(--orange);
  font-size:22px;
  top:-4px

}
.hero-note small {

  font-size:10px;
  color:var(--muted)

}
.hero-art {

  position:relative;
  height:510px;
  display:flex;
  align-items:center;
  perspective:1000px

}
.orbit {

  border:1px solid #dcded4;
  border-radius:50%;
  position:absolute;
  width:520px;
  height:520px;
  left:20px

}
.orbit.two {

  width:400px;
  height:400px;
  left:80px

}
.art-label {

  position:absolute;
  top:4px;
  left:55px;
  font-size:8px;
  letter-spacing:.2em;
  transform:rotate(-4deg)

}
.browser {

  background:white;
  width:100%;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 30px 65px #313a2822,0 3px 8px #313a2810;
  border:1px solid #fff;
  position:relative

}
.scene {

  transform:rotate(-5deg) rotateY(-7deg);
  animation:float 8s ease-in-out infinite

}
.browser-chrome {

  height:30px;
  background:#f9f9f6;
  padding:7px 13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  color:#81877c

}
.browser-chrome>span:first-child {

  letter-spacing:2px;
  color:#b3b8ad;
  font-size:7px

}
.cafe {

  background:#e9ecdf;
  color:#31412d;
  padding:27px

}
.cafe-nav {

  display:flex;
  justify-content:space-between;
  align-items:center

}
.cafe-nav b {

  font-family:Georgia,serif;
  font-size:20px;
  line-height:1

}
.cafe-nav b span {

  display:block;
  font-family:Arial,sans-serif;
  font-size:5px;
  letter-spacing:1.7px;
  margin-top:9px

}
.cafe-nav>small {

  font-size:6px

}
.cafe-body {

  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  padding:42px 0 32px

}
.cafe-body small {

  font-size:6px;
  letter-spacing:1.1px

}
.cafe h2 {

  font-family:Georgia,serif;
  font-size:43px;
  letter-spacing:-2px;
  margin:13px 0 12px

}
.cafe p {

  font-size:8px;
  line-height:1.8

}
.cafe-button {

  display:inline-block;
  background:#33452f;
  color:white;
  font-size:6px;
  padding:10px 15px;
  margin-top:19px

}
.cafe-bottom {

  display:flex;
  justify-content:space-between;
  border-top:1px solid #bfc6b4;
  padding-top:16px;
  font-size:5px;
  letter-spacing:1px

}
.coffee-art {

  height:220px;
  position:relative;
  background:radial-gradient(ellipse at center,#c6cbb3,transparent 68%)

}
.saucer {

  width:170px;
  height:170px;
  border-radius:50%;
  background:linear-gradient(145deg,#f8f5df,#c8c4a8);
  position:absolute;
  top:30px;
  left:15px;
  box-shadow:10px 20px 18px #49533735;
  transform:rotateX(20deg)

}
.cup {

  width:122px;
  height:122px;
  background:radial-gradient(circle,#c39055 50%,#e4c29b 56%,#f6f0d7 58%,#fffae5 67%,#c2bda2 69%);
  border-radius:50%;
  position:absolute;
  top:48px;
  left:39px;
  box-shadow:6px 13px 12px #49533744;
  transform:rotateX(20deg)

}
.cup:after {

  content:'';
  position:absolute;
  right:-20px;
  top:45px;
  width:26px;
  height:33px;
  border:9px solid #eee6c9;
  border-radius:8px;
  z-index:-1

}
.latte {

  position:absolute;
  inset:23px;
  display:grid;
  place-items:center;
  font-family:Georgia;
  font-size:69px;
  color:#f6e3b9;
  transform:rotate(25deg);
  line-height:1;
  text-shadow:1px 2px 0 #fff4d2

}
.leaf {

  background:#5c7350;
  border-radius:0 90% 0 90%;
  width:60px;
  height:22px;
  position:absolute;
  top:10px;
  right:15px;
  transform:rotate(-20deg)

}
.l2 {

  top:28px;
  right:-5px;
  transform:rotate(45deg)

}
.coffee-tag {

  position:absolute;
  bottom:-4px;
  right:-6px;
  font-family:Georgia;
  font-size:20px;
  transform:rotate(-14deg);
  line-height:.9

}
.floating-tag {

  position:absolute;
  left:-30px;
  bottom:15px;
  background:#fffef9;
  box-shadow:0 10px 30px #23272112;
  border:1px solid #e5e7dc;
  transform:rotate(-5deg);
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 18px;
  border-radius:7px;
  font-size:11px;
  animation:float-tag 7s ease-in-out infinite

}
.tag-icon {

  font-size:27px;
  color:var(--orange)

}
.floating-tag small {

  display:block;
  color:var(--muted);
  font-size:8px

}
.floating-tag>span:last-child {

  font-size:20px;
  margin-left:10px

}
.mobile-preview {

  width:130px;
  height:253px;
  border:5px solid #283127;
  border-radius:22px;
  background:#e9ecdf;
  position:absolute;
  right:-15px;
  bottom:-5px;
  transform:rotate(8deg);
  box-shadow:0 18px 35px #28312730;
  padding:28px 12px 12px;
  line-height:1.2

}
.phone-notch {

  position:absolute;
  top:4px;
  background:#283127;
  width:48px;
  height:9px;
  border-radius:20px;
  left:35px

}
.mobile-preview b {

  font-family:Georgia;
  font-size:13px;
  display:block

}
.mobile-preview small {

  font-size:4px;
  letter-spacing:1px

}
.mobile-preview h3 {

  font-family:Georgia;
  font-size:21px;
  font-weight:400;
  margin-top:15px;
  letter-spacing:-1px

}
.phone-coffee {

  font-size:60px;
  text-align:center;
  line-height:1.3

}
.mobile-preview>span {

  display:block;
  background:#31412d;
  color:white;
  padding:7px;
  font-size:6px

}
.concept-label {

  position:absolute;
  bottom:-40px;
  right:35px;
  font-size:7px;
  letter-spacing:1px;
  color:var(--muted)

}
.marquee {

  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  white-space:nowrap

}
.marquee div {

  display:flex;
  width:max-content;
  gap:40px;
  animation:marquee 40s linear infinite

}
.marquee span {

  font-size:17px;
  color:var(--orange);
  line-height:1

}
.section-top {

  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:44px

}
.section-top h2 {

  margin-top:20px

}
.section-top>p {

  font-size:12px;
  color:var(--muted);
  margin-bottom:5px

}
.work-grid {

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px

}
.work-card {

  background:none;
  border:0;
  text-align:left;
  padding:0;
  color:var(--ink)

}
.project-image {

  height:290px;
  padding:26px;
  position:relative;
  overflow:hidden;
  transition:transform .4s;
  border-radius:5px

}
.work-card:hover .project-image {

  transform:translateY(-6px)

}
.mini-nav {

  font-family:Georgia;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:1

}
.mini-nav span {

  font-family:'DM Sans';
  font-size:5px;
  letter-spacing:1px

}
.project-image h3 {

  font-family:Georgia;
  font-weight:400;
  font-size:38px;
  letter-spacing:-1.8px;
  position:relative;
  z-index:1;
  margin-top:34px

}
.cafe-mini {

  background:#dfe6d6;
  color:#344e34

}
.mini-cup {

  position:absolute;
  right:12px;
  bottom:48px;
  font-size:80px;
  transform:rotate(-12deg)

}
.mini-pill {

  font-size:6px;
  letter-spacing:1px;
  position:absolute;
  bottom:25px;
  border-top:1px solid currentColor;
  padding-top:12px;
  z-index:1

}
.trade-mini {

  background:#2c3c4b;
  color:#f8edda

}
.trade-mini .mini-nav {

  font-family:Manrope;
  font-weight:800;
  font-size:14px;
  letter-spacing:1px

}
.trade-mini h3 {

  font-family:Manrope;
  font-weight:750;
  font-size:35px;
  line-height:1.1;
  letter-spacing:-1px;
  margin-top:39px

}
.trade-mini h3 i {

  color:#eeb26f;
  font-style:normal

}
.trade-mini p {

  font-size:6px;
  margin-top:12px;
  position:relative;
  z-index:1

}
.house-lines {

  position:absolute;
  border:1px solid #f1b46d44;
  width:180px;
  height:180px;
  right:-50px;
  top:70px;
  transform:rotate(-45deg)

}
.house-lines:after {

  content:'';
  position:absolute;
  border:1px solid #f1b46d44;
  inset:15px

}
.salon-mini {

  background:#e5c6b9;
  color:#4f332e

}
.salon-mini .mini-nav {

  font-family:Manrope;
  letter-spacing:4px;
  font-size:18px

}
.salon-orb {

  width:180px;
  height:240px;
  border-radius:120px 120px 10px 10px;
  position:absolute;
  right:12px;
  bottom:-25px;
  background:linear-gradient(135deg,#8f564d55,#d9b5a0,#b1755c);
  transform:rotate(15deg);
  box-shadow:inset 8px 9px 30px #f9d7b4

}
.salon-mini h3 {

  font-size:40px;
  line-height:1.1

}
.project-info {

  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:19px

}
.project-info h3 {

  font-size:15px;
  letter-spacing:-.5px;
  font-weight:650

}
.project-info p {

  font-size:10px;
  color:var(--muted);
  margin-top:6px

}
.circle-arrow {

  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center

}
.caption {

  font-size:10px;
  color:var(--muted);
  margin-top:24px

}
.approach {

  background:#e9ebe2

}
.approach-grid {

  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:12%

}
.approach h2 {

  margin-top:23px;
  font-size:62px

}
.approach-grid>div>p {

  max-width:310px;
  margin:25px 0;
  color:var(--muted);
  font-size:13px

}
.sketch {

  font-family:Georgia;
  font-style:italic;
  font-size:23px;
  color:var(--green);
  transform:rotate(-8deg);
  margin:40px 0 0 60px;
  line-height:1.2

}
.sketch span {

  margin-left:24px

}
.benefits article {

  display:flex;
  gap:20px;
  padding:29px 0;
  border-bottom:1px solid #ccd2c3

}
.benefits article:first-child {

  padding-top:3px

}
.benefits article>span {

  font-size:10px;
  color:var(--muted);
  padding-top:4px

}
.benefits h3 {

  font-size:20px;
  font-weight:600;
  letter-spacing:-.6px;
  margin-bottom:13px

}
.benefits p {

  font-size:12px;
  color:var(--muted);
  max-width:345px

}
.benefits b {

  margin-left:auto;
  font-weight:400;
  font-size:24px;
  color:var(--green)

}
.services-grid {

  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden

}
.service {

  padding:33px;
  border-right:1px solid var(--line)

}
.service:last-child {

  border:0

}
.service-symbol {

  font-size:40px;
  margin-bottom:24px;
  line-height:1

}
.service h3 {

  font-size:25px;
  margin:17px 0;
  letter-spacing:-1px

}
.service>p {

  font-size:12px;
  color:var(--muted);
  min-height:78px

}
.service ul {

  padding:20px 0 30px;
  list-style:none;
  font-size:11px;
  line-height:2.3

}
.service li:before {

  content:'↗';
  color:var(--orange);
  margin-right:10px

}
.highlighted {

  background:#ebe9df

}
.process {

  background:#283228;
  color:#f4f2ec

}
.process .eyebrow,.steps>article>span {

  color:#c4d3b5

}
.process h2 em {

  color:#c4d3b5

}
.outline-light {

  border:1px solid #7b8776;
  background:none;
  color:#f4f2ec

}
.steps {

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
  margin-top:60px

}
.steps article {

  border-top:1px solid #64705e;
  padding-top:20px

}
.steps>article>span {

  font-size:9px;
  letter-spacing:.1em

}
.steps h3 {

  font-size:24px;
  font-weight:500;
  letter-spacing:-.6px;
  margin:24px 0 18px

}
.steps p {

  font-size:12px;
  line-height:1.8;
  color:#bfc5b9

}
.quote-section {

  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:10%

}
.quote-intro h2 {

  font-size:67px;
  line-height:1.05;
  margin:25px 0

}
.quote-intro h2>.orange {

  display:inline-block;
  margin-left:10px

}
.quote-intro>p {

  font-size:13px;
  color:var(--muted);
  max-width:330px

}
.quote-note {

  display:flex;
  gap:16px;
  max-width:340px;
  margin-top:55px

}
.quote-note>span {

  font-size:32px;
  color:var(--orange);
  line-height:1.2

}
.quote-note p {

  font-size:12px

}
.quote-note small {

  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:10px;
  line-height:1.8

}
.quote-form {

  background:#fffefa;
  padding:30px;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 10px 35px #30382c05

}
.form-heading {

  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1px;
  padding-bottom:24px;
  margin-bottom:5px;
  border-bottom:1px solid var(--line)

}
.form-heading span:last-child {

  color:var(--muted)

}
label {

  display:block;
  font-size:10px;
  font-weight:500;
  margin-top:18px

}
input:not([type=radio],[type=checkbox]),select,textarea {

  width:100%;
  border:1px solid #dcded5;
  background:#fffefa;
  padding:12px;
  border-radius:4px;
  color:var(--ink);
  margin-top:7px;
  font-size:11px;
  min-height:43px

}
input::placeholder,textarea::placeholder {

  color:#87897f

}
textarea {

  resize:vertical

}
.field-row {

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px

}
.optional {

  font-weight:400;
  color:var(--muted)

}
fieldset {

  margin:20px 0 0;
  padding:0;
  border:0

}
legend {

  font-size:10px

}
.choice-grid {

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px

}
.choice-grid label {

  margin:0;
  position:relative

}
.choice-grid input {

  position:absolute;
  opacity:0;
  width:1px;
  height:1px

}
.choice-grid span {

  display:block;
  border:1px solid #dcdfd5;
  border-radius:4px;
  padding:11px;
  font-size:10px;
  font-weight:400;
  text-align:center;
  cursor:pointer

}
.choice-grid input:checked+span {

  border-color:#344832;
  background:#eaf0e4;
  color:#31452e

}
.choice-grid input:focus-visible+span {

  outline:2px solid var(--orange)

}
.consent {

  display:flex;
  gap:8px;
  align-items:flex-start;
  color:var(--muted);
  font-size:9px;
  line-height:1.6;
  margin-bottom:20px

}
.consent input {

  accent-color:var(--green);
  margin:2px 0 0

}
.quote-form>.button {

  width:100%

}
.form-footnote {

  font-size:9px;
  color:var(--muted);
  margin-top:13px;
  line-height:1.7

}
#form-status {

  font-size:11px;
  margin-top:12px;
  color:var(--green)

}
.faq {

  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:10%;
  border-top:1px solid var(--line);
  padding-top:65px

}
.faq h2 {

  margin-top:20px;
  font-size:46px

}
details {

  border-bottom:1px solid var(--line);
  padding:21px 0

}
details:first-child {

  padding-top:0

}
summary {

  list-style:none;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  cursor:pointer;
  gap:20px

}
summary::-webkit-details-marker {

  display:none

}
summary span {

  color:var(--orange);
  font-size:20px;
  line-height:1

}
details[open] summary span {

  transform:rotate(45deg)

}
details p {

  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  padding-top:15px;
  max-width:470px

}
.closing {

  background:var(--orange);
  padding:42px 0;
  color:#fff4e9

}
.closing .wrap>span {

  font-size:9px;
  letter-spacing:.16em

}
.closing a {

  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:Manrope;
  font-size:clamp(38px,6.5vw,85px);
  font-weight:500;
  letter-spacing:-.06em;
  margin-top:7px

}
.closing a span {

  font-weight:400

}
footer {

  display:flex;
  align-items:center;
  gap:30px;
  min-height:120px;
  font-size:9px;
  color:var(--muted)

}
footer .brand {

  color:var(--ink);
  font-size:22px

}
footer p {

  margin-right:auto

}
footer button {

  border:0;
  background:none;
  color:var(--muted);
  font-size:9px;
  text-decoration:underline;
  padding:8px 0

}
dialog {

  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:12px;
  max-width:600px;
  width:90%;
  padding:45px;
  box-shadow:0 30px 80px #0003

}
dialog::backdrop {

  background:#19251cd0;
  backdrop-filter:blur(8px)

}
dialog h2 {

  font-size:40px;
  margin:20px 0

}
dialog p,dialog ul {

  font-size:13px;
  line-height:1.9;
  color:var(--muted)

}
dialog ul {

  padding-left:18px;
  margin:22px 0

}
dialog .button {

  margin-top:22px

}
.dialog-close {

  position:absolute;
  right:17px;
  top:10px;
  background:none;
  border:0;
  font-size:30px;
  color:var(--ink)

}
.skip {

  position:fixed;
  top:-100px;
  left:15px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:30

}
.skip:focus {

  top:10px

}
.reveal {

  opacity:1

}
.motion .reveal {

  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s,transform .7s

}
.motion .reveal.visible {

  opacity:1;
  transform:none

}
.reveal:nth-child(2) {

  transition-delay:.1s

}
.reveal:nth-child(3) {

  transition-delay:.2s

}
@keyframes float {

  0%,100% {
    transform:rotate(-5deg) rotateY(-7deg) translateY(0)
  }
  50% {
    transform:rotate(-3deg) rotateY(-4deg) translateY(-12px)
  }

}
@keyframes float-tag {

  0%,100% {
    transform:rotate(-5deg) translateY(0)
  }
  50% {
    transform:rotate(-3deg) translateY(-9px)
  }

}
@keyframes marquee {

  to {
    transform:translateX(-50%)
  }

}
@media(min-width:1450px) {
.hero {

    min-height:790px

}
.hero-art {

    height:550px

}
.cafe {

    padding:35px

}
.cafe-body {

    padding:50px 0

}
.cafe h2 {

    font-size:50px

}
}
@media(max-width:1050px) {
.hero h1 {

    font-size:74px

}
.hero-actions {

    align-items:flex-start;
    flex-direction:column;
    gap:18px

}
.hero {

    gap:35px;
    min-height:720px

}
.hero-art {

    height:430px

}
.cafe {

    padding:20px

}
.cafe h2 {

    font-size:32px

}
.cafe-body {

    padding:30px 0

}
.coffee-art {

    transform:scale(.8);
    transform-origin:left center

}
.floating-tag {

    left:-15px;
    bottom:0

}
.mobile-preview {

    right:-20px;
    bottom:-35px;
    transform:scale(.85) rotate(8deg)

}
.orbit {

    width:390px;
    height:390px;
    left:-5px

}
.orbit.two {

    width:300px;
    height:300px;
    left:40px

}
.art-label {

    left:20px;
    top:0

}
.concept-label {

    bottom:-63px;
    right:0

}
.hero-note {

    margin-top:27px

}
.project-image {

    padding:20px;
    height:250px

}
.project-image h3 {

    font-size:30px

}
.mini-cup {

    font-size:65px;
    right:2px

}
.service {

    padding:25px

}
.service h3 {

    font-size:22px

}
.service>p {

    min-height:110px

}
.quote-intro h2 {

    font-size:56px

}
.quote-section {

    gap:7%

}
.quote-form {

    padding:23px

}
.approach h2 {

    font-size:54px

}
.steps {

    gap:25px

}
footer {

    gap:20px

}
}
@media(max-width:760px) {
header {

    height:80px

}
header nav {

    display:none

}
.brand {

    font-size:21px

}
.brandmark {

    width:30px;
    height:30px;
    font-size:23px

}
.button.small {

    font-size:10px;
    padding:10px 13px;
    gap:15px

}
.hero {

    display:block;
    padding:50px 0 65px;
    min-height:0

}
.hero h1 {

    font-size:clamp(65px,13vw,90px)

}
.hero-copy>p {

    font-size:14px

}
.hero-actions {

    flex-direction:row;
    align-items:center;
    gap:20px

}
.hero-actions .text-link {

    font-size:10px

}
.hero-actions .button {

    padding:15px;
    font-size:10px;
    gap:18px

}
.hero-note {

    margin-top:25px

}
.hero-art {

    margin:60px auto 25px;
    max-width:550px;
    height:400px;
    width:95%

}
.orbit {

    width:380px;
    height:380px;
    left:calc(50% - 190px)

}
.orbit.two {

    width:300px;
    height:300px;
    left:calc(50% - 150px)

}
.cafe h2 {

    font-size:37px

}
.coffee-art {

    transform:scale(.85)

}
.floating-tag {

    left:0;
    bottom:0;
    padding:12px;
    font-size:10px

}
.mobile-preview {

    right:-15px;
    bottom:-28px

}
.concept-label {

    bottom:-50px;
    font-size:6px

}
.section {

    padding-top:65px;
    padding-bottom:65px

}
.section-top {

    display:block;
    margin-bottom:30px

}
.section-top h2 {

    font-size:37px

}
.section-top>p {

    margin-top:24px

}
.work-grid {

    grid-template-columns:1fr;
    gap:32px

}
.project-image {

    height:320px;
    padding:28px

}
.project-image h3 {

    font-size:48px

}
.mini-nav {

    font-size:20px

}
.mini-cup {

    font-size:110px;
    right:35px

}
.trade-mini h3 {

    font-size:42px

}
.trade-mini p {

    font-size:9px

}
.mini-pill {

    font-size:7px

}
.salon-orb {

    width:230px;
    height:300px

}
.salon-mini h3 {

    font-size:49px

}
.caption {

    font-size:9px

}
.approach-grid {

    grid-template-columns:1fr;
    gap:45px

}
.approach h2 {

    font-size:53px

}
.sketch {

    display:none

}
.approach-grid>div>p {

    max-width:100%

}
.benefits p {

    max-width:none

}
.services-grid {

    grid-template-columns:1fr

}
.service {

    border-right:0;
    border-bottom:1px solid var(--line);
    padding:30px

}
.service>p {

    min-height:0;
    max-width:100%

}
.service-symbol {

    margin-bottom:20px

}
.service ul {

    padding-bottom:20px

}
.service h3 {

    font-size:28px

}
.process .button {

    margin-top:25px

}
.steps {

    grid-template-columns:1fr 1fr;
    gap:35px 25px;
    margin-top:40px

}
.steps h3 {

    font-size:23px

}
.steps p {

    font-size:11px

}
.quote-section {

    grid-template-columns:1fr;
    gap:35px

}
.quote-intro h2 {

    font-size:60px

}
.quote-intro>p {

    max-width:100%

}
.quote-note {

    margin-top:28px;
    max-width:100%

}
.quote-form {

    padding:25px

}
.faq {

    grid-template-columns:1fr;
    gap:30px

}
.faq h2 {

    font-size:42px

}
.closing {

    padding:30px 0

}
.closing a {

    font-size:44px

}
footer {

    flex-wrap:wrap;
    padding:28px 0;
    gap:15px;
    min-height:150px

}
footer .brand {

    width:45%

}
footer p {

    margin:0;
    width:48%;
    text-align:right;
    font-size:9px

}
footer>span {

    margin-right:auto

}
dialog {

    padding:32px

}
.marquee {

    padding:17px 0;
    font-size:9px

}
.art-label {

    font-size:6px;
    top:-5px

}
}
@media(max-width:380px) {
.hero-art {

    height:340px

}
.cafe h2 {

    font-size:28px

}
.cafe {

    padding:15px

}
.cafe-body {

    padding:20px 0

}
.coffee-art {

    transform:scale(.65)

}
.mobile-preview {

    transform:scale(.7) rotate(8deg);
    right:-20px;
    bottom:-45px

}
.floating-tag {

    font-size:8px;
    bottom:0

}
.orbit {

    width:300px;
    height:300px;
    left:0

}
.orbit.two {

    width:240px;
    height:240px;
    left:30px

}
.hero h1 {

    font-size:60px

}
.hero-actions {

    gap:12px

}
.field-row {

    gap:10px

}
.quote-form {

    padding:18px

}
.steps {

    gap:25px 20px

}
.section-top h2 {

    font-size:32px

}
}
@media(prefers-reduced-motion:reduce) {
html {

    scroll-behavior:auto

}
*,*:before,*:after {

    animation:none!important;
    transition:none!important

}
.motion .reveal {

    opacity:1;
    transform:none

}
}
:root {

  --paper:#101110;
  --ink:#eee9df;
  --muted:#a4a49b;
  --orange:#ceaf79;
  --line:#ffffff20;
  --green:#d4c3a1

}
body {

  background:#101110;
  color:var(--ink)

}
body:before {

  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:12;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")

}
h1,h2,h3 {

  font-weight:400

}
h2 {

  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(42px,4.7vw,70px);
  letter-spacing:-.045em;
  line-height:1.03

}
em {

  font-family:'Cormorant Garamond',Georgia,serif;
  color:#d4bc91

}
.section {

  padding-top:125px;
  padding-bottom:125px

}
.eyebrow {

  color:#c3ad88;
  font-size:9px;
  letter-spacing:.22em

}
.wrap {

  width:min(1320px,88%)

}
header {

  height:105px;
  position:absolute;
  top:0;
  left:6%;
  width:88%;
  z-index:10;
  max-width:none;
  border-bottom:1px solid #ffffff1b;
  color:#eee9df

}
.brand {

  gap:13px

}
.brand-word {

  font-family:Manrope;
  font-size:17px;
  letter-spacing:.23em;
  font-weight:500;
  line-height:1.1

}
.brand-word small {

  display:block;
  font-size:6px;
  letter-spacing:.22em;
  margin-top:9px;
  color:#b6ae9c

}
.monogram {

  display:flex;
  border:1px solid #d3b47a88;
  width:39px;
  height:43px;
  align-items:center;
  justify-content:center;
  font-family:Georgia;
  font-size:27px;
  font-weight:400;
  color:#d4b780;
  position:relative;
  letter-spacing:-3px

}
.monogram span {

  font-family:Arial;
  font-size:15px;
  margin-left:-3px;
  margin-top:10px

}
.button {

  border-radius:0;
  font-size:10px;
  letter-spacing:.08em;
  padding:20px 25px;
  position:relative;
  overflow:hidden;
  transition:background .3s,box-shadow .3s,transform .3s

}
.button:hover {

  box-shadow:0 7px 35px #cdb17a25

}
.button:after {

  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,#ffffff50 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .65s

}
.button:hover:after {

  transform:translateX(120%)

}
.button.small {

  font-size:8px;
  letter-spacing:.13em;
  padding:14px 20px;
  border:1px solid #c4a36d6b;
  background:#ffffff03

}
.orange-bg {

  background:#d2b683;
  color:#1b1c19

}
.dark {

  background:#d2b683;
  color:#151711

}
nav {

  font-size:10px;
  gap:35px

}
nav a {

  color:#bcbcb3

}
.hero {

  display:block;
  min-height:900px;
  height:100svh;
  max-height:1150px;
  padding:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#0b0d0c

}
.hero-grid {

  position:absolute;
  inset:0;
  background-image:linear-gradient(#c7beaa07 1px,transparent 1px),linear-gradient(90deg,#c7beaa07 1px,transparent 1px);
  background-size:100% 170px,16.666% 100%;
  mask-image:linear-gradient(transparent,#000 30%,#000 75%,transparent)

}
.hero-halo {

  position:absolute;
  width:850px;
  height:850px;
  top:3%;
  right:-8%;
  border-radius:50%;
  background:radial-gradient(ellipse,#ac845420,transparent 65%);
  filter:blur(30px)

}
.hero-topline {

  position:absolute;
  top:146px;
  left:6%;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.17em;
  color:#a5a69c

}
.hero-topline .status-dot {

  background:#d4b67d;
  box-shadow:0 0 12px #b99b67aa;
  vertical-align:middle

}
.hero-content {

  position:relative;
  z-index:2;
  top:30%

}
.hero-kicker {

  font-size:9px;
  letter-spacing:.28em;
  color:#c2b18f;
  margin-bottom:30px

}
.hero h1 {

  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(80px,8.9vw,144px);
  line-height:.94;
  letter-spacing:-.05em;
  font-weight:400;
  margin:0;
  max-width:1200px;
  text-shadow:0 3px 35px #0005;
  animation:title-enter 1.4s both

}
.hero h1 em {

  display:inline-block;
  color:#d6c3a1;
  font-weight:400

}
.hero-bottom {

  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:50px

}
.hero-bottom p {

  color:#bcbeb3;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.015em

}
.hero-bottom .button {

  margin-top:24px

}
.hero-explore {

  display:flex;
  align-items:center;
  gap:20px;
  font-size:8px;
  letter-spacing:.16em;
  color:#cbc8bd;
  margin-bottom:0

}
.hero-explore small {

  font-size:7px;
  color:#7b8276;
  line-height:2.7

}
.explore-ring {

  border:1px solid #c3ad8955;
  border-radius:50%;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  font-size:20px;
  color:#d4b984;
  transition:transform .3s

}
.hero-explore:hover .explore-ring {

  transform:translateY(6px)

}
.marquee {

  background:#171a16;
  border-color:#ffffff15;
  color:#adaf9f;
  font-size:9px;
  padding:25px 0;
  letter-spacing:.24em

}
.marquee span {

  color:#d6ba85

}
.section-top {

  margin-bottom:55px

}
.section-top h2 {

  margin-top:25px

}
.section-top>p {

  font-size:11px;
  line-height:1.9;
  color:#8e9487

}
.work {

  padding-bottom:75px

}
.work-grid {

  grid-template-columns:1.2fr 1fr;
  gap:55px 35px;
  align-items:start

}
.work-card:nth-child(2) {

  padding-top:120px

}
.work-card:nth-child(3) {

  grid-column:1/-1;
  width:75%;
  justify-self:center

}
.project-image {

  border-radius:0;
  height:440px;
  padding:40px;
  transition:transform .7s,filter .7s;
  box-shadow:0 15px 60px #0003

}
.work-card:nth-child(2) .project-image {

  height:440px

}
.work-card:nth-child(3) .project-image {

  height:440px;
  padding:42px 55px

}
.work-card:hover .project-image {

  transform:translateY(-8px);
  filter:brightness(1.07)

}
.mini-nav {

  font-size:24px

}
.mini-nav span {

  font-size:7px

}
.project-image h3 {

  font-size:64px;
  margin-top:70px;
  font-family:'Cormorant Garamond',Georgia,serif;
  line-height:.95

}
.project-image h3 i {

  color:inherit

}
.mini-pill {

  bottom:38px;
  font-size:7px;
  letter-spacing:.14em;
  padding-top:18px

}
.cafe-mini {

  background:#d9dfc9;
  color:#31402e

}
.editorial-coffee {

  position:absolute;
  width:150px;
  height:135px;
  border-radius:10px 10px 65px 65px;
  background:linear-gradient(90deg,#576144,#a3ad85 30%,#6b7954 75%,#39462c);
  right:50px;
  bottom:50px;
  transform:rotate(-12deg);
  box-shadow:10px 25px 30px #26301a40

}
.cup-top {

  position:absolute;
  width:150px;
  height:38px;
  border-radius:50%;
  top:-18px;
  background:radial-gradient(ellipse,#552e17 45%,#bb956a 58%,#f6ecc6 61%,#9caa7d 65%,#5e6b47 70%)

}
.cup-handle {

  position:absolute;
  width:55px;
  height:65px;
  border:14px solid #73815c;
  border-radius:40%;
  right:-42px;
  top:10px;
  z-index:-1

}
.editorial-coffee>span {

  font-family:Georgia;
  position:absolute;
  top:48px;
  left:58px;
  font-size:18px;
  color:#e8e9c8

}
.trade-mini {

  background:linear-gradient(125deg,#172e39,#2c4851);
  color:#f0e8da

}
.trade-mini h3 {

  font-family:Manrope;
  font-weight:600;
  font-size:50px;
  line-height:1.07;
  letter-spacing:-.05em

}
.trade-mini h3 i {

  color:#c6ac7d

}
.trade-mini p {

  font-size:9px;
  max-width:210px;
  margin-top:20px

}
.trade-mini .mini-nav {

  font-size:18px

}
.house-lines {

  width:250px;
  height:250px;
  right:-100px;
  top:150px;
  border-color:#dcc5a150

}
.house-lines:after {

  border-color:#dcc5a150

}
.salon-mini {

  background:linear-gradient(110deg,#e0c7b7,#b08f80);
  color:#3c2622

}
.salon-mini .mini-nav {

  font-size:26px;
  letter-spacing:7px

}
.salon-mini h3 {

  font-size:85px;
  max-width:500px;
  margin-top:60px

}
.salon-orb {

  width:280px;
  height:420px;
  right:12%;
  bottom:-50px;
  transform:rotate(-16deg);
  background:linear-gradient(110deg,#f7ddc1,#bd8d74 35%,#724a3b 72%,#e8bc93);
  box-shadow:inset 10px 0 30px #ffe3be,30px 30px 40px #6d403544

}
.orb-second {

  width:180px;
  height:280px;
  right:4%;
  bottom:-80px;
  transform:rotate(15deg);
  background:linear-gradient(100deg,#e7bca0,#614536)

}
.project-info {

  margin-top:25px

}
.project-info h3 {

  font-family:Manrope;
  font-size:13px;
  letter-spacing:0;
  font-weight:500;
  color:#e8e4d8

}
.project-info p {

  font-size:9px;
  letter-spacing:.04em;
  color:#8e9487;
  margin-top:8px

}
.circle-arrow {

  width:42px;
  height:42px;
  border-color:#b7a17b55;
  color:#d0b684;
  transition:background .3s,color .3s

}
.work-card:hover .circle-arrow {

  background:#d0b684;
  color:#101110

}
.caption {

  color:#7f8879;
  line-height:1.9

}
.transformation {

  padding-top:60px

}
.transformation-head {

  text-align:center;
  margin-bottom:50px

}
.transformation h2 {

  margin:23px 0;
  font-size:62px

}
.transformation-head>p {

  font-size:12px;
  color:#939b8c

}
.compare {

  height:470px;
  position:relative;
  overflow:hidden;
  border:1px solid #c4ae7c44;
  --split:50%;
  background:#fff

}
.compare-before,.compare-after {

  position:absolute;
  inset:0

}
.compare-before {

  background:#f2f2f2;
  color:#333;
  font-family:Arial

}
.before-nav {

  padding:30px;
  background:#284c28;
  color:#fff;
  font-size:18px;
  font-weight:bold

}
.before-body {

  text-align:center;
  padding:45px 30px

}
.before-body h3 {

  font-family:Arial;
  font-size:27px;
  letter-spacing:0;
  font-weight:bold

}
.before-body p {

  margin-top:20px;
  font-size:13px

}
.before-body>span {

  display:block;
  color:blue;
  font-size:12px;
  margin:25px 0;
  text-decoration:underline

}
.before-box {

  background:#ddd;
  border:1px solid #aaa;
  padding:20px;
  font-size:12px;
  max-width:400px;
  margin:auto

}
.compare-after {

  clip-path:inset(0 0 0 var(--split));
  background:#e9e6d9;
  color:#2d3b27

}
.after-inner {

  position:absolute;
  inset:0;
  overflow:hidden

}
.after-nav {

  position:absolute;
  top:28px;
  left:45px;
  right:45px;
  font-size:19px;
  font-family:Georgia;
  letter-spacing:3px;
  z-index:2

}
.after-nav>span {

  display:block;
  font-family:Arial;
  font-size:5px;
  letter-spacing:2px;
  margin-top:5px

}
.after-nav>small {

  position:absolute;
  right:0;
  top:12px;
  font:6px Arial;
  letter-spacing:1px

}
.after-body {

  position:absolute;
  top:128px;
  left:7%;
  z-index:2

}
.after-body>small {

  font-size:7px;
  letter-spacing:2px

}
.after-body h3 {

  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:78px;
  margin:14px 0;
  letter-spacing:-3px;
  line-height:.9

}
.after-body h3 em {

  color:#627852

}
.after-body p {

  font-size:9px;
  line-height:1.8

}
.after-body>span {

  display:inline-block;
  margin-top:20px;
  background:#334a30;
  color:#eee7d3;
  padding:12px 18px;
  font-size:6px;
  letter-spacing:1px

}
.after-landscape {

  position:absolute;
  width:53%;
  height:90%;
  right:-5%;
  top:25%;
  border-radius:200px 200px 0 0;
  background:radial-gradient(ellipse at 25% 80%,#8d9b6b 0%,transparent 50%),radial-gradient(ellipse at 70% 35%,#abb688,transparent 50%),linear-gradient(130deg,#1d3024,#536949 45%,#2e4934);
  box-shadow:inset 20px 30px 60px #d4d8a950;
  transform:rotate(-10deg)

}
.after-landscape:before,.after-landscape:after {

  content:'';
  position:absolute;
  width:70%;
  height:130%;
  border:1px solid #e5e0bb33;
  border-radius:50%;
  transform:rotate(30deg);
  left:30%;
  top:-5%

}
.after-landscape:after {

  left:45%

}
.compare-divider {

  position:absolute;
  left:var(--split);
  top:0;
  bottom:0;
  width:1px;
  background:#e2c893;
  z-index:4;
  pointer-events:none

}
.compare-divider>span {

  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%,-50%);
  width:50px;
  height:50px;
  border:1px solid #bea06c;
  background:#171d16ee;
  color:#ead4ab;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:15px;
  box-shadow:0 5px 20px #0004

}
.compare-label {

  position:absolute;
  bottom:18px;
  z-index:2;
  background:#111b14cc;
  color:#e9e3d0;
  padding:6px 10px;
  font-size:7px;
  letter-spacing:1px

}
.before-label {

  left:18px

}
.after-label {

  right:18px

}
.compare input[type=range] {

  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  z-index:5;
  cursor:ew-resize

}
.compare:focus-within {

  outline:2px solid #cdb27b;
  outline-offset:5px

}
.approach {

  background:#1b211a;
  border-top:1px solid #c3ad8122;
  border-bottom:1px solid #c3ad8122

}
.approach h2 {

  font-size:75px

}
.approach-grid {

  gap:12%;
  grid-template-columns:1fr 1.15fr

}
.benefits article {

  padding:35px 0;
  border-color:#c3ad8126

}
.benefits article:first-child {

  padding-top:8px

}
.benefits h3 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:30px;
  color:#e1dfd1

}
.benefits p {

  color:#939d8b;
  font-size:12px;
  line-height:1.9

}
.benefits b {

  font-size:19px;
  color:#bca773

}
.approach-grid>div>p {

  color:#959e8c;
  line-height:1.9

}
.sketch {

  color:#bca773;
  font-family:'Cormorant Garamond',Georgia;
  font-size:30px;
  margin-top:45px

}
.services-grid {

  border-radius:0;
  border-color:#c3ad8133

}
.service {

  padding:40px 32px;
  border-color:#c3ad8133;
  background:#ffffff01;
  transition:background .4s

}
.service:hover {

  background:#c3ad8109

}
.service-symbol {

  color:#c6ad7c;
  font-size:40px;
  font-weight:400;
  margin-bottom:40px

}
.service h3 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:35px;
  line-height:1.05;
  margin:20px 0

}
.service>p {

  color:#91988a;
  line-height:1.9;
  min-height:100px

}
.service ul {

  font-size:10px;
  color:#c0c3b5

}
.service .text-link {

  font-size:10px;
  border-bottom:1px solid #c3ad8155;
  padding-bottom:8px

}
.highlighted {

  background:linear-gradient(145deg,#c5ad7b0d,#c5ad7b03)

}
.process {

  background:#d7c7a7;
  color:#242820

}
.process .eyebrow,.steps>article>span {

  color:#5f6654

}
.process h2 em {

  color:#5c6550

}
.outline-light {

  color:#2e3728;
  border-color:#59644966

}
.steps article {

  border-color:#6d765c66

}
.steps h3 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:35px;
  line-height:1.05

}
.steps p {

  color:#5f6854;
  line-height:1.9

}
.quote-intro h2 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:83px;
  line-height:1.05

}
.quote-intro h2>.orange {

  display:block;
  margin:25px 0;
  font-family:Manrope;
  font-size:50px

}
.quote-note p {

  color:#d1d1c5

}
.quote-note small {

  color:#858f7c

}
.quote-form {

  background:#171c16;
  border:1px solid #c3ad8133;
  border-radius:0;
  box-shadow:0 20px 70px #0002;
  padding:35px

}
.form-heading {

  color:#c6ae7c;
  border-color:#c3ad8133

}
.form-heading span:last-child {

  color:#89917f

}
label {

  color:#c5cabc;
  font-size:10px

}
input:not([type=radio],[type=checkbox]),select,textarea {

  background:#11160f;
  border-color:#3a4332;
  color:#e9eadb;
  border-radius:0;
  padding:13px;
  font-size:11px

}
input::placeholder,textarea::placeholder {

  color:#78816d

}
.choice-grid span {

  border-color:#3a4332;
  border-radius:0;
  color:#aeb7a2

}
.choice-grid input:checked+span {

  border-color:#bba577;
  background:#ccb48414;
  color:#e0c99d

}
.consent {

  color:#8e9981

}
.consent input {

  accent-color:#c6ad7c

}
.form-footnote {

  color:#808c72

}
#form-status {

  color:#dcc79a

}
.faq h2 {

  font-size:62px

}
.faq summary {

  color:#c1c8b8;
  font-size:12px

}
.faq details p {

  color:#8f9a83

}
.closing {

  background:radial-gradient(ellipse at 30% 150%,#c6a66e25,transparent 70%),#1c2419;
  border-top:1px solid #bda16e55;
  border-bottom:1px solid #bda16e55;
  padding:55px 0;
  color:#e6dcc5

}
.closing .wrap>span {

  color:#ad9b77;
  font-size:8px

}
.closing a {

  font-family:'Cormorant Garamond',Georgia;
  font-weight:400;
  font-size:clamp(70px,10vw,150px);
  letter-spacing:-.06em

}
.closing a span {

  font-family:Manrope;
  font-size:80px;
  color:#d0b57e;
  transition:transform .5s

}
.closing a:hover span {

  transform:translate(10px,-10px)

}
footer {

  min-height:140px;
  color:#7e8972

}
footer .brand {

  color:#d5d4c4;
  font-weight:400;
  font-size:20px

}
footer button {

  color:#87927b

}
dialog {

  background:#192116;
  color:#e9e3d0;
  border-color:#c1a16b66;
  border-radius:0

}
dialog h2 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:54px

}
dialog p,dialog ul {

  color:#9ea98f

}
.dialog-close {

  color:#d6c6a6

}
dialog::backdrop {

  background:#080d09df

}
.reading-progress {

  position:fixed;
  top:0;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#8e7039,#ead7a6);
  z-index:30

}
.ambient-cursor {

  position:fixed;
  width:500px;
  height:500px;
  pointer-events:none;
  background:radial-gradient(circle,#cfb07a08,transparent 65%);
  z-index:8;
  left:0;
  top:0;
  transform:translate(-1000px,-1000px)

}
.text-link:hover {

  color:#e3c998

}
.reveal.visible {

  transition-duration:1s

}
@keyframes title-enter {

  from {
    opacity:0;
    transform:translateY(30px);
    filter:blur(8px)
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0)
  }

}
@media(min-width:1600px) {
.hero-content {

    top:32%

}
.hero h1 {

    font-size:155px

}
}
@media(max-width:1050px) {
.hero {

    height:900px;
    min-height:0

}
.hero h1 {

    font-size:98px

}
.hero-content {

    top:32%

}
.hero-bottom {

    margin-top:45px

}
.hero h1 br {

    display:block

}
.project-image {

    height:350px;
    padding:28px

}
.work-card:nth-child(2) .project-image {

    height:350px

}
.work-card:nth-child(3) .project-image {

    height:400px

}
.project-image h3 {

    font-size:50px

}
.trade-mini h3 {

    font-size:40px

}
.mini-nav {

    font-size:20px

}
.trade-mini .mini-nav {

    font-size:15px

}
.editorial-coffee {

    transform:scale(.8) rotate(-12deg);
    right:23px;
    bottom:30px

}
.service {

    padding:28px

}
.service h3 {

    font-size:29px

}
.service>p {

    min-height:125px

}
.quote-intro h2 {

    font-size:68px

}
.approach h2 {

    font-size:65px

}
.benefits h3 {

    font-size:27px

}
.transformation h2 {

    font-size:54px

}
}
@media(max-width:760px) {
header {

    height:85px;
    left:6%

}
.brand-word {

    font-size:14px

}
.brand-word small {

    font-size:5px

}
.monogram {

    width:32px;
    height:36px;
    font-size:23px

}
.brand {

    gap:9px

}
.button.small {

    font-size:7px;
    padding:12px 13px;
    gap:15px

}
.hero {

    height:900px;
    min-height:850px;
    max-height:none

}
.hero-topline {

    top:117px;
    font-size:6px;
    letter-spacing:.14em

}
.hero-topline>span:last-child {

    display:none

}
.hero-content {

    top:32%

}
.hero-kicker {

    font-size:7px;
    letter-spacing:.22em;
    margin-bottom:25px

}
.hero h1 {

    font-size:clamp(64px,12.3vw,94px);
    line-height:1.02;
    letter-spacing:-.05em;
    max-width:100%

}
.hero h1 em {

    max-width:90%

}
.hero h1 br {

    display:none

}
.hero-halo {

    width:700px;
    height:700px;
    top:0;
    right:-200px

}
.hero-bottom {

    margin-top:40px;
    display:block

}
.hero-bottom p {

    font-size:12px;
    color:#b7bfac

}
.hero-bottom .button {

    font-size:8px;
    padding:18px 20px;
    margin-top:25px

}
.hero-explore {

    position:absolute;
    right:0;
    bottom:-95px;
    font-size:6px;
    gap:10px

}
.explore-ring {

    width:43px;
    height:43px;
    font-size:16px

}
.hero-explore small {

    font-size:5px

}
.section {

    padding-top:75px;
    padding-bottom:75px

}
.section-top h2 {

    font-size:46px

}
.section-top>p {

    font-size:11px

}
.work-grid {

    grid-template-columns:1fr;
    gap:40px

}
.work-card:nth-child(2) {

    padding-top:0

}
.work-card:nth-child(3) {

    grid-column:auto;
    width:100%

}
.project-image,.work-card:nth-child(2) .project-image,.work-card:nth-child(3) .project-image {

    height:355px;
    padding:28px

}
.project-image h3 {

    font-size:56px;
    margin-top:55px

}
.trade-mini h3 {

    font-size:45px

}
.salon-mini h3 {

    font-size:63px

}
.salon-orb {

    width:220px;
    height:350px;
    right:7%

}
.orb-second {

    right:-10%;
    width:160px;
    height:250px

}
.mini-pill {

    font-size:6px;
    bottom:30px

}
.mini-nav {

    font-size:21px

}
.mini-nav span {

    font-size:6px

}
.editorial-coffee {

    transform:scale(.85) rotate(-12deg);
    right:32px;
    bottom:40px

}
.project-info h3 {

    font-size:12px

}
.project-info p {

    font-size:8px

}
.caption {

    font-size:8px;
    line-height:1.9

}
.transformation {

    padding-top:20px

}
.transformation h2 {

    font-size:42px

}
.transformation-head>p {

    font-size:11px;
    max-width:270px;
    margin:auto

}
.compare {

    height:365px

}
.before-nav {

    font-size:11px;
    padding:20px 15px

}
.before-body {

    padding:40px 15px

}
.before-body h3 {

    font-size:20px

}
.before-body p {

    font-size:10px

}
.before-body>span {

    font-size:8px

}
.before-box {

    font-size:9px;
    padding:20px

}
.after-nav {

    left:20px;
    right:20px;
    top:20px;
    font-size:15px

}
.after-nav>small {

    font-size:4px;
    top:4px;
    max-width:95px;
    line-height:2

}
.after-body {

    left:22px;
    top:105px

}
.after-body h3 {

    font-size:62px

}
.after-body>small {

    font-size:5px;
    letter-spacing:1px

}
.after-body p {

    font-size:7px

}
.after-body>span {

    font-size:5px;
    margin-top:17px;
    padding:10px

}
.after-landscape {

    width:62%;
    right:-20%;
    height:80%;
    top:33%

}
.compare-divider>span {

    width:40px;
    height:40px;
    font-size:12px

}
.compare-label {

    font-size:5px;
    bottom:12px

}
.before-label {

    left:12px

}
.after-label {

    right:12px

}
.approach-grid {

    grid-template-columns:1fr;
    gap:40px

}
.approach h2 {

    font-size:63px

}
.benefits h3 {

    font-size:30px

}
.benefits p {

    font-size:11px

}
.benefits article {

    gap:16px;
    padding:27px 0

}
.services-grid {

    grid-template-columns:1fr

}
.service {

    padding:32px

}
.service h3 {

    font-size:37px

}
.service>p {

    min-height:0;
    font-size:12px

}
.service-symbol {

    margin-bottom:25px

}
.steps {

    gap:35px 25px

}
.steps h3 {

    font-size:30px

}
.steps p {

    font-size:11px

}
.quote-section {

    grid-template-columns:1fr;
    gap:35px

}
.quote-intro h2 {

    font-size:66px

}
.quote-intro h2>.orange {

    margin:15px 0;
    font-size:40px

}
.quote-form {

    padding:24px

}
.form-heading {

    font-size:7px

}
.faq h2 {

    font-size:54px

}
.closing a {

    font-size:67px;
    line-height:1

}
.closing a span {

    font-size:38px

}
.closing .wrap>span {

    font-size:6px

}
.closing {

    padding:36px 0

}
.closing a {

    margin-top:20px

}
footer .brand {

    font-size:20px

}
footer p {

    font-size:8px

}
.ambient-cursor {

    display:none

}
.marquee {

    padding:20px 0;
    font-size:8px

}
}
@media(max-width:380px) {
.hero {

    height:820px;
    min-height:820px

}
.hero h1 {

    font-size:60px

}
.hero-content {

    top:30%

}
.hero-bottom {

    margin-top:30px

}
.hero-explore {

    bottom:-80px

}
.project-image h3 {

    font-size:48px

}
.editorial-coffee {

    right:8px;
    transform:scale(.7) rotate(-12deg)

}
.service {

    padding:25px

}
.quote-intro h2 {

    font-size:59px

}
.quote-form {

    padding:19px

}
.closing a {

    font-size:56px

}
.brand-word small {

    font-size:4px

}
.brand-word {

    font-size:12px

}
}
@media(prefers-reduced-motion:reduce) {
.ambient-cursor {

    display:none

}
.hero h1 {

    animation:none

}
}
html {

  scroll-padding-top:115px

}
::selection {

  background:#d2b683;
  color:#11160e

}
.menu-toggle {

  display:none

}
.hero {

  min-height:850px

}
.hero h1 {

  font-size:clamp(75px,8.45vw,136px);
  max-width:1300px

}
.title-line {

  display:inline-block

}
.hero h1 .title-line:first-child {

  animation:line-enter 1.2s .05s both

}
.hero h1 em {

  animation:line-enter 1.4s .2s both

}
.hero-kicker {

  animation:line-enter 1s both

}
.hero-bottom {

  animation:line-enter 1.2s .4s both

}
.hero-topline {

  color:#b2b5a6

}
.hero-content {

  top:31%

}
.hero-content:before {

  content:'';
  position:absolute;
  left:-20%;
  top:-10%;
  width:115%;
  height:110%;
  background:radial-gradient(ellipse at left,#0b0d0ca0,transparent 75%);
  z-index:-1;
  pointer-events:none

}
.seal-star {

  fill:none;
  stroke:#c5a66e;
  stroke-width:.7

}
.hero h1 {

  animation:none

}
.hero-explore .explore-ring:after {

  content:'';
  position:absolute;
  width:72px;
  height:72px;
  border:1px solid #c3ad8920;
  border-radius:50%;
  animation:ring-breathe 4s infinite

}
.hero-explore .explore-ring {

  position:relative

}
.header-stuck {

  position:fixed;
  top:14px;
  left:6%;
  width:88%;
  height:74px;
  padding:0 24px;
  border:1px solid #b6a37d33;
  background:#101710e8;
  backdrop-filter:blur(25px);
  box-shadow:0 12px 40px #0003;
  animation:header-in .4s both

}
.header-stuck .monogram {

  width:30px;
  height:34px;
  font-size:23px

}
.header-stuck .brand-word {

  font-size:14px

}
.header-stuck .brand-word small {

  font-size:5px;
  margin-top:6px

}
header nav a {

  position:relative

}
header nav a:after {

  content:'';
  position:absolute;
  bottom:-7px;
  left:0;
  width:0;
  height:1px;
  background:#d2b683;
  transition:width .3s

}
header nav a:hover:after,header nav a[aria-current=true]:after {

  width:100%

}
header nav a[aria-current=true] {

  color:#e0c99f

}
.project-image {

  position:relative

}
.project-view {

  position:absolute;
  top:25px;
  right:25px;
  background:#111a13eb;
  border:1px solid #e6d2a040;
  color:#ebdec0;
  padding:12px 15px;
  font-size:7px;
  letter-spacing:.12em;
  display:flex;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .4s,transform .4s;
  pointer-events:none;
  z-index:3

}
.work-card {

  position:relative

}
.work-card:hover .project-view,.work-card:focus-visible .project-view {

  opacity:1;
  transform:none

}
.project-info h3:before {

  content:'01 /';
  font-family:Manrope;
  font-size:8px;
  color:#8c967f;
  letter-spacing:1px;
  margin-right:15px

}
.work-card:nth-child(2) .project-info h3:before {

  content:'02 /'

}
.work-card:nth-child(3) .project-info h3:before {

  content:'03 /'

}
.work-card:nth-child(3) {

  width:83%

}
.work-card:nth-child(3) .project-image {

  height:480px

}
.project-info p {

  margin-left:39px

}
.salon-mini .salon-orb {

  transition:transform .9s

}
.work-card:hover .salon-orb {

  transform:rotate(-10deg) translateY(-9px)

}
.work-card:hover .orb-second {

  transform:rotate(20deg) translateY(6px)

}
.house-lines {

  box-shadow:25px 25px 0 #c6ac7d08,50px 50px 0 #c6ac7d06

}
.mini-nav span {

  line-height:1.9

}
.studio-statement {

  padding:95px 0;
  border-bottom:1px solid #c3ad8133

}
.statement-label {

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px

}
.statement-label>span:last-child {

  font-size:7px;
  letter-spacing:.17em;
  color:#87917c

}
.statement-copy {

  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(60px,8.6vw,133px);
  letter-spacing:-.05em;
  line-height:.95;
  margin:50px 0;
  color:#e6e2d6

}
.statement-copy>span {

  font-style:italic;
  color:#9caa8d

}
.statement-bottom {

  display:flex;
  justify-content:space-between;
  align-items:flex-end

}
.signature {

  font-family:'Cormorant Garamond',Georgia;
  font-size:45px;
  font-style:italic;
  transform:rotate(-7deg);
  color:#d9bf8d;
  line-height:.7

}
.signature>span {

  display:block;
  text-align:right;
  font-size:24px;
  margin:6px -22px 0 0

}
.statement-bottom>p {

  font-size:11px;
  color:#a1aa93;
  line-height:1.9

}
.service {

  position:relative

}
.service:before {

  content:'';
  position:absolute;
  top:-1px;
  left:0;
  width:0;
  height:1px;
  background:#d4b77f;
  transition:width .7s

}
.service:hover:before {

  width:100%

}
.service-symbol {

  transition:transform .6s

}
.service:hover .service-symbol {

  transform:translateY(-4px) rotate(8deg)

}
.caption {

  color:#a2aa97

}
.section-top>p,.benefits p,.service>p,.steps p {

  font-size:13px

}
.service>p {

  min-height:120px

}
.benefits article>span {

  color:#a1aa96

}
.steps p {

  color:#4d5843

}
.faq details p {

  color:#aab39d;
  font-size:13px

}
.form-footnote {

  color:#a7b19b

}
.quote-form label {

  font-size:11px

}
.quote-form input:not([type=radio],[type=checkbox]),.quote-form textarea,.quote-form select {

  font-size:12px;
  min-height:46px

}
.choice-grid span {

  font-size:11px

}
.form-heading {

  font-size:8px

}
.form-steps {

  display:flex;
  margin:25px 0 28px;
  border-bottom:1px solid #bca27530;
  padding-bottom:20px;
  gap:20px

}
.form-steps>span {

  font-size:8px;
  color:#a7b09c;
  letter-spacing:.08em;
  display:flex;
  align-items:center;
  gap:8px

}
.form-steps b {

  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  font-size:8px;
  font-weight:400;
  border:1px solid #8e9b7b55;
  color:#b7c0a9

}
.form-steps .active {

  color:#e1cfaa

}
.form-steps .active b {

  border-color:#c7ae7b;
  background:#c7ae7b;
  color:#17200f

}
.step-title {

  font-family:'Cormorant Garamond',Georgia;
  font-size:32px;
  color:#e1dccb;
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:7px

}
.step-description {

  font-size:11px;
  color:#9eaa8d;
  margin-bottom:20px

}
.form-panel[hidden] {

  display:none

}
.form-panel {

  animation:panel-enter .35s both

}
.form-panel>fieldset {

  margin-top:26px

}
.form-panel textarea {

  min-height:140px

}
.form-navigation {

  display:flex;
  gap:18px;
  align-items:center;
  margin-top:28px

}
.form-navigation .button {

  flex:1;
  justify-content:space-between

}
.form-back {

  border:0;
  background:none;
  color:#c6cbbd;
  font-size:11px;
  padding:15px 5px;
  display:flex;
  gap:8px

}
.form-back[hidden],.form-next[hidden],.quote-form .form-submit[hidden] {

  display:none

}
.quote-form:has(.form-steps)>.form-submit {

  margin-top:25px

}
.brief-summary {

  margin-top:25px;
  padding:15px;
  border:1px solid #ba9c662f;
  background:#c2ac7b07;
  font-size:10px;
  color:#b4bea5;
  line-height:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px

}
.brief-summary b {

  display:block;
  color:#e1cfaa;
  font-weight:400;
  font-size:8px;
  letter-spacing:.1em

}
.quote-section .quote-intro {

  position:sticky;
  top:130px;
  align-self:start

}
.experience-dialog {

  width:96vw;
  max-width:1600px;
  height:94svh;
  max-height:none;
  margin:auto;
  padding:0;
  border:1px solid #a68f6055;
  overflow:hidden;
  background:#0d130d;
  box-shadow:0 0 100px #000a

}
.experience-dialog[open] {

  display:flex;
  flex-direction:column

}
.experience-toolbar {

  height:84px;
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 65px 16px 25px;
  border-bottom:1px solid #c4a67533;
  position:relative

}
.experience-toolbar h2 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:25px;
  margin:5px 0 0

}
.experience-toolbar .eyebrow {

  font-size:6px;
  letter-spacing:.12em

}
.experience-toolbar .dialog-close {

  top:20px;
  right:20px;
  font-size:26px;
  line-height:1;
  width:30px;
  height:40px

}
.device-controls {

  display:flex;
  border:1px solid #a78d6055;
  padding:3px

}
.device-controls button {

  background:transparent;
  color:#a7b29b;
  border:0;
  padding:8px 14px;
  font-size:9px

}
.device-controls button[aria-pressed=true] {

  background:#ccb581;
  color:#10180e

}
.experience-stage {

  flex:1;
  min-height:0;
  display:flex;
  justify-content:center;
  background:radial-gradient(ellipse,#38432d44,transparent 70%),#080e08;
  overflow:hidden;
  padding:20px;
  transition:padding .4s

}
.experience-stage iframe {

  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#e9e5d5;
  transition:width .5s;
  border-radius:0;
  box-shadow:0 8px 50px #0005

}
.experience-stage.mobile iframe {

  width:390px;
  border:7px solid #424b37;
  border-radius:24px

}
.experience-footer {

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:58px;
  padding:10px 25px;
  border-top:1px solid #c4a67533

}
.experience-footer p {

  font-size:8px;
  color:#96a188;
  line-height:1.5

}
.experience-footer>div {

  display:flex;
  gap:20px;
  align-items:center

}
.experience-footer button {

  background:none;
  border:0;
  color:#d9c18e;
  font-size:20px;
  padding:0 6px

}
.experience-footer>div>span {

  font-size:8px;
  letter-spacing:.12em;
  color:#b3bea3

}
.experience-footer>a {

  font-size:9px;
  color:#d9c18e

}
.dialog-open {

  overflow:hidden

}
.form-status-success {

  padding:15px;
  border:1px solid #bfa57855;
  background:#bfa5780b

}
input,select,textarea {

  color-scheme:dark

}
.reveal {

  scroll-margin-top:130px

}
@keyframes line-enter {

  from {
    opacity:0;
    transform:translateY(24px);
    filter:blur(5px)
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0)
  }

}
@keyframes seal-turn {

  to {
    transform:rotate(360deg)
  }

}
@keyframes ring-breathe {

  50% {
    transform:scale(1.1);
    opacity:.3
  }

}
@keyframes header-in {

  from {
    transform:translateY(-90px)
  }
  to {
    transform:translateY(0)
  }

}
@keyframes panel-enter {

  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }

}
@media(max-width:1050px) {
.hero h1 {

    font-size:92px

}
.hero-content {

    top:32%

}
.project-view {

    top:15px;
    right:15px;
    padding:9px;
    font-size:6px

}
.service>p {

    min-height:150px

}
.work-card:nth-child(3) .project-image {

    height:420px

}
.quote-section {

    gap:7%

}
.form-steps {

    gap:12px

}
.form-steps>span {

    font-size:7px

}
}
@media(max-width:760px) {
html {

    scroll-padding-top:105px

}
.hero {

    min-height:840px;
    height:880px

}
.hero-content {

    top:32%

}
.hero h1 {

    font-size:clamp(55px,11.6vw,83px);
    line-height:1.05

}
.hero h1 br {

    display:block

}
.hero h1 .title-line {

    white-space:normal;
    max-width:100%

}
.hero h1 em {

    max-width:100%

}
.hero-bottom {

    margin-top:35px

}
.header-stuck {

    height:68px;
    padding:0 15px;
    top:9px

}
.header-stuck .brand-word {

    font-size:11px

}
.header-stuck .brand-word small {

    font-size:4px

}
.header-stuck .monogram {

    width:27px;
    height:31px;
    font-size:20px

}
header .brand {

    margin-right:auto

}
header>.button {

    margin-right:38px

}
.menu-toggle {

    display:block;
    position:absolute;
    right:0;
    top:calc(50% - 19px);
    width:32px;
    height:38px;
    background:none;
    border:0;
    padding:7px 2px;
    z-index:3

}
.menu-toggle>span {

    display:block;
    height:1px;
    background:#d6c397;
    width:24px;
    margin:7px 0;
    transition:transform .3s

}
.menu-toggle[aria-expanded=true]>span:first-child {

    transform:translateY(4px) rotate(45deg)

}
.menu-toggle[aria-expanded=true]>span:last-child {

    transform:translateY(-4px) rotate(-45deg)

}
header.header-stuck .menu-toggle {

    right:12px

}
header nav {

    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    padding:20px;
    background:#131c12f7;
    backdrop-filter:blur(25px);
    border:1px solid #d1b78333;
    box-shadow:0 20px 50px #0005

}
header.nav-open nav {

    display:flex;
    flex-direction:column;
    gap:0

}
header nav a {

    padding:14px 8px;
    font-size:13px;
    border-bottom:1px solid #e2c78f20

}
header nav a:last-child {

    border-bottom:0

}
header nav a:after {

    display:none

}
.project-view {

    opacity:1;
    transform:none;
    top:12px;
    right:12px;
    font-size:5px;
    padding:8px;
    gap:10px;
    background:#182013d9

}
.project-info p {

    font-size:9px

}
.work-card:nth-child(3) {

    width:100%

}
.work-card:nth-child(3) .project-image {

    height:355px

}
.project-image .mini-nav {

    padding-top:22px

}
.studio-statement {

    padding:65px 0

}
.statement-label {

    display:block

}
.statement-label>span:last-child {

    display:block;
    font-size:5px;
    margin-top:15px

}
.statement-copy {

    font-size:clamp(48px,10.9vw,80px);
    margin:35px 0;
    line-height:1.03

}
.statement-bottom {

    gap:25px;
    align-items:center

}
.statement-bottom>p {

    font-size:9px;
    max-width:200px

}
.statement-bottom>p br {

    display:none

}
.signature {

    font-size:35px

}
.signature>span {

    font-size:20px

}
.service>p {

    min-height:0

}
.section-top>p,.benefits p,.service>p {

    font-size:12px

}
.quote-section .quote-intro {

    position:static

}
.form-steps {

    gap:18px

}
.form-steps>span {

    font-size:7px

}
.form-steps b {

    width:20px;
    height:20px

}
.quote-form {

    padding:24px

}
.form-panel textarea {

    min-height:120px

}
.quote-form label {

    font-size:11px

}
.experience-dialog {

    width:100vw;
    height:100svh;
    max-height:100svh;
    max-width:100%;
    border:0

}
.experience-toolbar {

    padding:14px 48px 14px 16px;
    min-height:75px;
    height:75px

}
.experience-toolbar h2 {

    font-size:25px

}
.experience-toolbar .eyebrow {

    font-size:5px;
    letter-spacing:.06em;
    max-width:180px;
    display:block

}
.device-controls {

    display:none

}
.experience-stage {

    padding:0

}
.experience-stage.mobile iframe {

    width:100%;
    border:0;
    border-radius:0

}
.experience-footer {

    padding:10px 15px;
    gap:8px;
    flex-wrap:wrap;
    min-height:83px

}
.experience-footer p {

    font-size:7px;
    max-width:135px

}
.experience-footer>div {

    gap:12px

}
.experience-footer>a {

    font-size:9px;
    display:block;
    width:100%;
    text-align:center;
    border-top:1px solid #c4a67522;
    padding-top:8px

}
.experience-toolbar .dialog-close {

    top:17px;
    right:12px

}
.brief-summary {

    font-size:10px

}
.hero-bottom p {

    font-size:13px

}
.form-footnote {

    font-size:10px

}
.hero-explore {

    bottom:-95px

}
.hero-kicker {

    font-size:7px

}
}
@media(max-width:380px) {
.hero h1 {

    font-size:52px

}
.hero-content {

    top:30%

}
.hero {

    min-height:810px;
    height:810px

}
.hero-explore {

    bottom:-85px

}
.brand-word {

    font-size:11px

}
.brand-word small {

    font-size:4px

}
.form-steps {

    gap:10px

}
.quote-form {

    padding:19px

}
.form-steps>span {

    font-size:6px

}
.form-steps b {

    width:18px;
    height:18px

}
.project-image h3 {

    font-size:48px

}
.hero-kicker {

    font-size:6px

}
.hero-topline {

    font-size:5px

}
}
@media(prefers-reduced-motion:reduce) {
.hero .title-line,.hero-kicker,.hero-bottom {

    animation:none!important

}
.form-panel {

    animation:none!important

}
.header-stuck {

    animation:none!important

}
}
@media(max-width:760px) {
.hero-explore {

    bottom:-80px

}
}
.spiral-gallery {

  position:relative;
  padding:85px 0;
  background:radial-gradient(ellipse at 50% 45%,#b69c6010,transparent 65%),#0b100c;
  border-bottom:1px solid #bca5732c;
  isolation:isolate

}
.spiral-heading {

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  position:relative;
  z-index:5

}
.spiral-heading h2 {

  font-size:clamp(40px,4vw,62px);
  margin-top:15px;
  line-height:.95

}
.spiral-heading h2 em {

  display:block;
  font-size:.95em;
  margin-left:65px

}
.spiral-actions {

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:15px

}
.spiral-actions>span {

  font-size:7px;
  letter-spacing:.15em;
  color:#a1ad94

}
.spiral-actions>button {

  background:#d5b97e08;
  border:1px solid #c2a36a55;
  color:#d3c09c;
  padding:10px 15px;
  font-size:9px

}
.helix-environment {

  position:relative;
  isolation:isolate

}
.helix-scene {

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:35px;
  width:88%;
  max-width:1200px;
  margin:60px auto

}
.helix-card {

  display:block;
  padding:0;
  border:1px solid #e4c58a3d;
  background:#141a12;
  box-shadow:0 20px 60px #0006;
  text-align:left;
  color:#d9d9c7;
  position:relative;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  cursor:pointer

}
.helix-card .project-image {

  height:280px;
  padding:25px;
  overflow:hidden;
  box-shadow:none;
  border:0;
  transform:none!important;
  pointer-events:none;
  border-radius:0

}
.helix-card .mini-nav {

  font-size:18px

}
.helix-card .mini-nav>span {

  font-size:5px;
  letter-spacing:.1em

}
.helix-card .project-image h3 {

  font-size:47px;
  margin-top:43px;
  line-height:.94

}
.helix-card .trade-mini h3,.helix-card .apex-mini h3 {

  font-family:Manrope;
  font-size:39px;
  line-height:1.07;
  font-weight:650

}
.helix-card .mini-pill {

  font-size:6px;
  bottom:22px;
  padding-top:10px

}
.helix-card .editorial-coffee {

  transform:scale(.65) rotate(-12deg);
  right:35px;
  bottom:20px;
  transform-origin:bottom right

}
.helix-card .salon-orb {

  width:180px;
  height:260px;
  right:10%;
  bottom:-60px

}
.helix-card .orb-second {

  width:120px;
  height:190px;
  right:-2%;
  bottom:-70px

}
.helix-card .salon-mini h3 {

  font-size:53px

}
.helix-card .house-lines {

  width:190px;
  height:190px;
  right:-85px;
  top:90px

}
.helix-card-caption {

  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  font-size:9px;
  letter-spacing:.08em;
  background:linear-gradient(120deg,#23291d,#141b12);
  border-top:1px solid #d7ba7f33;
  color:#d6c5a0

}
.helix-card-caption>span:last-child {

  font-size:17px;
  line-height:1

}
.helix-open {

  position:absolute;
  bottom:20px;
  right:20px;
  color:inherit;
  font-size:5px;
  letter-spacing:.1em;
  opacity:.8

}
.spiral-bottom {

  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  position:relative;
  z-index:5

}
.spiral-story>span {

  font-size:7px;
  letter-spacing:.18em;
  color:#a9b59b

}
.spiral-story h3 {

  font-family:'Cormorant Garamond',Georgia;
  font-size:36px;
  margin:10px 0;
  color:#dacfaf

}
.spiral-story p {

  font-size:11px;
  line-height:1.7;
  color:#9ba98c;
  max-width:410px;
  min-height:38px

}
.spiral-dots {

  display:flex;
  gap:8px

}
.spiral-dots button {

  font-size:7px;
  letter-spacing:.08em;
  border:1px solid #b4a07544;
  background:#151d12;
  color:#879678;
  width:29px;
  height:29px;
  border-radius:50%;
  padding:0;
  transition:background .4s,color .4s,box-shadow .4s

}
.spiral-dots button[aria-pressed=true] {

  background:#d2b681;
  color:#16200f;
  box-shadow:0 0 25px #c9a76733

}
.spiral-controls {

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:23px;
  margin-top:15px

}
.spiral-controls button {

  background:none;
  border:0;
  color:#dcc38f;
  font-size:23px;
  padding:0 4px;
  line-height:1

}
.spiral-controls button:disabled {

  opacity:.22;
  cursor:default

}
.spiral-controls>span {

  font-size:8px;
  letter-spacing:.15em;
  color:#aab69b

}
.spiral-disclaimer {

  width:88%;
  margin:25px auto 0;
  text-align:center;
  font-size:8px;
  line-height:1.8;
  color:#87957b;
  position:relative;
  z-index:5

}
.spiral-coordinate,.orbital-track,.helix-axis,.spiral-aura {

  display:none

}
.spiral-gallery.spiral-enabled {

  height:500svh;
  padding:0

}
.spiral-enabled .spiral-pin {

  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:115px 0 20px

}
.spiral-enabled .spiral-heading {

  flex-shrink:0

}
.spiral-enabled .helix-environment {

  flex:1;
  min-height:0;
  width:100%;
  perspective:1300px;
  perspective-origin:50% 48%

}
.spiral-enabled .helix-scene {

  position:absolute;
  inset:0;
  display:block;
  width:auto;
  max-width:none;
  margin:0;
  transform-style:preserve-3d;
  perspective:1300px

}
.spiral-enabled .helix-card {

  position:absolute;
  left:50%;
  top:50%;
  width:clamp(300px,35vw,490px);
  margin:0;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:box-shadow .4s,border-color .4s

}
.spiral-enabled .helix-card .project-image {

  height:clamp(200px,31svh,340px)

}
.spiral-enabled .helix-card[aria-hidden=true] {

  pointer-events:none

}
.spiral-enabled .helix-card.is-front {

  border-color:#d8bc7f88;
  box-shadow:0 35px 100px #000a,0 0 55px #cba76a15

}
.spiral-enabled .helix-card.is-front:hover {

  border-color:#efdbb1

}
.spiral-enabled .spiral-bottom {

  flex-shrink:0

}
.spiral-enabled .spiral-disclaimer {

  margin-top:12px;
  font-size:7px

}
.spiral-enabled .spiral-coordinate {

  display:flex;
  position:absolute;
  bottom:8%;
  left:6%;
  align-items:center;
  gap:15px;
  color:#77896a;
  z-index:-1

}
.spiral-coordinate>span:first-child {

  font-family:Georgia;
  font-size:20px;
  color:#ad966a

}
.spiral-coordinate>span:last-child {

  font-size:5px;
  letter-spacing:.2em;
  writing-mode:vertical-rl

}
.spiral-enabled .spiral-aura {

  display:block;
  position:absolute;
  left:15%;
  right:15%;
  top:0;
  bottom:0;
  background:radial-gradient(ellipse,#a98e541c,transparent 70%);
  pointer-events:none;
  z-index:-2

}
.spiral-enabled .helix-axis {

  display:block;
  position:absolute;
  width:1px;
  left:50%;
  top:-10%;
  bottom:-10%;
  background:linear-gradient(transparent,#c4a36722,transparent);
  z-index:-1;
  pointer-events:none

}
.spiral-enabled .orbital-track {

  display:block;
  position:absolute;
  left:50%;
  top:50%;
  width:80vw;
  height:190px;
  border:1px solid #d4b97d15;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  pointer-events:none;
  z-index:-1

}
.spiral-enabled .track-two {

  transform:translate(-50%,-50%) rotate(-18deg) translateY(-100px);
  border-color:#d4b97d0d

}
.spiral-enabled .track-three {

  transform:translate(-50%,-50%) rotate(-18deg) translateY(100px);
  border-color:#d4b97d0d

}
.spiral-gallery:not(.spiral-enabled) .spiral-bottom {

  display:none

}
.spiral-gallery:not(.spiral-enabled) .spiral-actions>span {

  display:none

}
.spiral-gallery:not(.spiral-enabled) .helix-card:last-child {

  grid-column:1/-1;
  width:65%;
  justify-self:center

}
.spiral-gallery:not(.spiral-enabled) .helix-card {

  transition:transform .4s

}
.spiral-gallery:not(.spiral-enabled) .helix-card:hover {

  transform:translateY(-6px)!important

}
.vesper-mini {

  background:radial-gradient(ellipse at 85% 70%,#a15c302b,transparent 65%),#251a19;
  color:#e6cfab

}
.vesper-mini .mini-nav {

  font-family:Georgia;
  letter-spacing:5px;
  font-size:18px

}
.vesper-mini h3 i {

  color:#bb8c62

}
.dinner-art {

  position:absolute;
  right:20px;
  bottom:40px;
  width:125px;
  height:125px;
  border-radius:50%;
  background:radial-gradient(circle,#282421 0 30%,#99907a 31%,#d5c9ae 32%,#3e352b 33%,#b2a48a 34%,#8d7c61 38%,#ece2c9 39%,#b6a689 48%,#665741 49%,transparent 50%);
  transform:rotateX(30deg);
  box-shadow:8px 18px 25px #0005

}
.dinner-art>span {

  position:absolute;
  top:-50px;
  right:20px;
  width:9px;
  height:70px;
  background:linear-gradient(90deg,#b0a186,#f3e9c9,#c1ac85);
  box-shadow:0 0 30px #e29c3525

}
.dinner-art>span:before {

  content:'';
  position:absolute;
  top:-16px;
  left:0;
  width:8px;
  height:17px;
  border-radius:70% 10% 65% 30%;
  background:#ffe6a4;
  box-shadow:0 0 20px #ffc66b;
  transform:rotate(12deg)

}
.apex-mini {

  background:#c8ef4e;
  color:#152313

}
.apex-mini .mini-nav {

  font-family:Manrope;
  font-size:23px;
  font-weight:800;
  letter-spacing:-1px

}
.apex-mini h3 {

  letter-spacing:-2px

}
.apex-art {

  position:absolute;
  right:-30px;
  bottom:15px;
  width:150px;
  height:230px;
  transform:skew(-20deg)

}
.apex-art>span {

  position:absolute;
  right:0;
  top:0;
  width:20px;
  height:100%;
  background:#20301c

}
.apex-art>span:nth-child(2) {

  right:35px;
  background:#20301c55

}
.apex-art>span:nth-child(3) {

  right:70px;
  background:#20301c22

}
.florist-mini {

  background:#efe3d5;
  color:#594639

}
.florist-mini .mini-nav {

  font-family:Georgia;
  font-style:italic;
  font-size:23px

}
.flower-art {

  position:absolute;
  width:130px;
  height:160px;
  right:5px;
  bottom:0

}
.flower-art>span {

  position:absolute;
  width:65px;
  height:85px;
  border-radius:70% 35% 70% 35%;
  background:linear-gradient(30deg,#9e4d3d,#ddb09b);
  left:30px;
  top:5px;
  transform-origin:35% 70%;
  box-shadow:inset 5px 4px 10px #ffdbc455

}
.flower-art>span:nth-child(2) {

  transform:rotate(72deg)

}
.flower-art>span:nth-child(3) {

  transform:rotate(144deg)

}
.flower-art>span:nth-child(4) {

  transform:rotate(216deg)

}
.flower-art>span:nth-child(5) {

  transform:rotate(288deg)

}
.flower-art>i {

  position:absolute;
  width:15px;
  height:15px;
  border-radius:50%;
  left:46px;
  top:56px;
  background:#d7c2a1;
  box-shadow:0 0 9px #44291d33

}
.auto-mini {

  background:radial-gradient(ellipse at 80% 0%,#767d6930,transparent 60%),#12191b;
  color:#d4d6ca

}
.auto-mini .mini-nav {

  font-family:Manrope;
  font-size:19px;
  letter-spacing:6px

}
.auto-mini h3 i {

  color:#9fac99

}
.auto-art {

  position:absolute;
  right:-15px;
  bottom:10px;
  width:250px;
  height:110px;
  transform:rotate(-10deg)

}
.auto-art:before {

  content:'';
  position:absolute;
  inset:20px 0;
  border-radius:70% 100% 20% 40%;
  background:linear-gradient(175deg,#414e51,#9cabaa 8%,#171f24 18%,#5a686a 23%,#10191c 45%);
  border-top:1px solid #d3dfc788;
  box-shadow:0 15px 35px #0008

}
.auto-art>span {

  position:absolute;
  width:100px;
  height:45px;
  left:80px;
  top:0;
  border-radius:90% 120% 0 0;
  background:linear-gradient(170deg,#8fa2a2,#162124 25%,#17282e 80%);
  border-top:1px solid #a5b7b577

}
.auto-art:after {

  content:'';
  position:absolute;
  width:29px;
  height:29px;
  border:5px solid #748284;
  border-radius:50%;
  left:55px;
  bottom:10px;
  background:#10191c;
  box-shadow:120px 0 0 -5px #10191c,120px 0 0 0 #748284

}
.spiral-enabled .helix-card .auto-mini h3,.spiral-enabled .helix-card .vesper-mini h3 {

  font-size:47px

}
@media(min-height:950px) {
.spiral-enabled .spiral-pin {

    padding-top:125px;
    padding-bottom:30px

}
.spiral-heading h2 {

    font-size:67px

}
.spiral-enabled .helix-card .project-image {

    height:350px

}
.spiral-story h3 {

    font-size:43px

}
.spiral-story p {

    font-size:12px

}
}
@media(max-height:740px) and (min-width:761px) {
.spiral-enabled .spiral-pin {

    padding-top:95px;
    padding-bottom:10px

}
.spiral-heading h2 {

    font-size:39px

}
.spiral-heading h2 em {

    margin-left:35px

}
.spiral-enabled .helix-card .project-image {

    height:200px

}
.helix-card .project-image h3 {

    font-size:38px;
    margin-top:28px

}
.helix-card .trade-mini h3,.helix-card .apex-mini h3 {

    font-size:32px

}
.helix-card .salon-mini h3 {

    font-size:42px

}
.spiral-story h3 {

    font-size:28px;
    margin:5px 0

}
.spiral-story p {

    font-size:10px;
    min-height:30px

}
.spiral-bottom {

    gap:20px

}
.spiral-enabled .helix-card-caption {

    padding:10px 16px

}
.helix-card .mini-nav {

    font-size:16px

}
.helix-card .project-image {

    padding:20px

}
.spiral-enabled .helix-card .auto-mini h3,.spiral-enabled .helix-card .vesper-mini h3 {

    font-size:38px

}
.helix-card .mini-pill {

    bottom:15px

}
.helix-open {

    bottom:15px

}
}
@media(max-width:760px) {
.spiral-gallery {

    padding:65px 0

}
.spiral-heading {

    display:block

}
.spiral-heading h2 {

    font-size:43px;
    margin-top:14px;
    line-height:.95

}
.spiral-heading h2 em {

    margin-left:42px

}
.spiral-heading .eyebrow {

    font-size:6px;
    letter-spacing:.15em

}
.spiral-actions {

    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:20px

}
.spiral-actions>span {

    font-size:5px;
    max-width:135px;
    line-height:1.7;
    letter-spacing:.1em

}
.spiral-actions>button {

    font-size:7px;
    padding:8px 10px

}
.spiral-enabled .spiral-pin {

    padding-top:98px;
    padding-bottom:18px

}
.spiral-gallery.spiral-enabled {

    height:450svh

}
.spiral-enabled .helix-card {

    width:72vw;
    max-width:360px;
    min-width:240px

}
.spiral-enabled .helix-card .project-image {

    height:clamp(180px,28svh,260px);
    padding:20px

}
.helix-card .project-image h3 {

    font-size:39px;
    margin-top:35px

}
.helix-card .trade-mini h3,.helix-card .apex-mini h3 {

    font-size:32px

}
.helix-card .salon-mini h3 {

    font-size:44px

}
.helix-card .mini-nav {

    font-size:16px;
    padding:0

}
.helix-card .mini-nav>span {

    font-size:4px;
    letter-spacing:0;
    max-width:65px;
    text-align:right

}
.helix-card .mini-pill {

    font-size:5px;
    bottom:19px;
    max-width:150px;
    letter-spacing:.05em

}
.helix-card .editorial-coffee {

    transform:scale(.53) rotate(-12deg);
    right:20px;
    bottom:25px

}
.helix-card .salon-orb {

    width:140px;
    height:210px;
    right:5%

}
.helix-card .orb-second {

    width:90px;
    height:150px;
    right:-5%

}
.helix-card .house-lines {

    width:160px;
    height:160px

}
.helix-open {

    font-size:4px;
    right:15px;
    bottom:20px

}
.helix-card-caption {

    padding:11px 15px;
    font-size:7px

}
.helix-card-caption>span:last-child {

    font-size:14px

}
.spiral-bottom {

    display:block

}
.spiral-story {

    max-width:100%

}
.spiral-story>span {

    font-size:6px

}
.spiral-story h3 {

    font-size:31px;
    margin:6px 0

}
.spiral-story p {

    font-size:10px;
    line-height:1.7;
    max-width:310px;
    min-height:34px

}
.spiral-navigation {

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:17px

}
.spiral-dots {

    gap:7px

}
.spiral-dots button {

    width:21px;
    height:21px;
    font-size:5px

}
.spiral-controls {

    margin:0;
    gap:10px

}
.spiral-controls button {

    font-size:18px

}
.spiral-controls>span {

    font-size:6px

}
.spiral-enabled .spiral-disclaimer {

    font-size:6px;
    line-height:1.6;
    max-width:320px;
    margin-top:12px

}
.spiral-enabled .orbital-track {

    width:150vw;
    height:125px

}
.spiral-enabled .spiral-coordinate {

    display:none

}
.helix-scene {

    grid-template-columns:1fr;
    margin:35px auto;
    gap:30px

}
.spiral-gallery:not(.spiral-enabled) .helix-card:last-child {

    grid-column:auto;
    width:100%

}
.spiral-gallery:not(.spiral-enabled) .helix-card .project-image {

    height:285px

}
.spiral-gallery:not(.spiral-enabled) .spiral-actions {

    justify-content:flex-end

}
.flower-art {

    transform:scale(.8);
    transform-origin:bottom right

}
.dinner-art {

    transform:scale(.7) rotateX(30deg);
    transform-origin:bottom right;
    right:10px;
    bottom:40px

}
.auto-art {

    transform:scale(.8) rotate(-10deg);
    transform-origin:bottom right;
    bottom:20px

}
.apex-art {

    width:100px;
    height:200px;
    right:-40px

}
.spiral-enabled .helix-card .auto-mini h3,.spiral-enabled .helix-card .vesper-mini h3 {

    font-size:39px

}
}
@media(max-width:380px),(max-height:700px) and (max-width:760px) {
.spiral-enabled .spiral-pin {

    padding-top:88px;
    padding-bottom:12px

}
.spiral-heading h2 {

    font-size:35px

}
.spiral-actions {

    margin-top:15px

}
.spiral-story h3 {

    font-size:27px

}
.spiral-story p {

    font-size:9px;
    min-height:30px

}
.spiral-enabled .helix-card .project-image {

    height:175px

}
.helix-card .project-image h3 {

    font-size:33px;
    margin-top:22px

}
.helix-card .trade-mini h3,.helix-card .apex-mini h3 {

    font-size:28px

}
.helix-card .salon-mini h3 {

    font-size:37px

}
.spiral-enabled .helix-card .auto-mini h3,.spiral-enabled .helix-card .vesper-mini h3 {

    font-size:33px

}
.spiral-navigation {

    margin-top:12px

}
.spiral-enabled .spiral-disclaimer {

    font-size:5px;
    margin-top:8px

}
.helix-card .mini-nav {

    font-size:13px

}
}
@media(prefers-reduced-motion:reduce) {
.helix-card {

    transition:none!important

}
.spiral-actions>span {

    display:none

}
}
:root {

  --ion:#9bccc3;
  --lilac:#a699ca

}
.hero {

  background:radial-gradient(ellipse at 83% 60%,#12201e80,transparent 50%),#080d0c

}
.hero h1 .title-line:first-child {

  background:linear-gradient(105deg,#f2edde 5%,#b5c9c1 40%,#f9efd6 58%,#9cb5ab 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent

}
.hero h1 em {

  color:#d0b784;
  text-shadow:0 0 70px #b19b6c20

}
.hero h1 {

  font-size:clamp(78px,8.75vw,145px)

}
.hero-kicker {

  color:#9bb4a5;
  letter-spacing:.29em

}
.hero-content {

  top:32%;
  z-index:3

}
.hero-content:before {

  background:radial-gradient(ellipse at left,#080d0ccf,transparent 73%)

}
#hero-network {

  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.75;
  z-index:0;
  pointer-events:none;
  mask-image:linear-gradient(90deg,#0005,black 70%)

}
.hero-light-sweep {

  position:absolute;
  left:0;
  top:-30%;
  width:170%;
  height:1px;
  transform:rotate(-33deg);
  transform-origin:left;
  background:linear-gradient(90deg,transparent,#c5e6d845,transparent);
  box-shadow:0 0 70px 25px #93b5a807;
  animation:light-sweep 13s ease-in-out infinite;
  pointer-events:none;
  z-index:1

}
.hero-reticle {

  position:absolute;
  right:8%;
  top:23%;
  width:380px;
  height:380px;
  border:1px solid #9bbbae13;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  transform:rotate(-20deg)

}
.hero-reticle:before {

  content:'';
  position:absolute;
  inset:-18px;
  border:1px dashed #adbe9a13;
  border-radius:50%;
  animation:reticle-rotate 110s linear infinite

}
.hero-reticle:after {

  content:'';
  position:absolute;
  top:50%;
  left:-13px;
  width:26px;
  height:1px;
  background:#b4d4c555;
  box-shadow:380px 0 #b4d4c555

}
.reticle-two {

  width:500px;
  height:500px;
  right:4%;
  top:17%;
  border-color:#d0b77c0d;
  transform:rotate(15deg)

}
.reticle-two:after {

  display:none

}
.reticle-two:before {

  border-style:solid;
  border-color:transparent #d0b77c22 transparent #d0b77c22;
  inset:30px;
  animation-duration:50s

}
.environment-hint {

  display:flex;
  align-items:center;
  gap:10px;
  font-size:6px;
  letter-spacing:.13em

}
.environment-hint i {

  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#a5cfb8;
  box-shadow:0 0 12px #a5cfb8

}
.hero-halo {

  background:radial-gradient(ellipse,#b19b6b12,transparent 50%),radial-gradient(ellipse at 80% 70%,#7eb7a510,transparent 60%)

}
#effects-toggle {

  position:fixed;
  bottom:18px;
  right:18px;
  z-index:14;
  background:#111a13e8;
  border:1px solid #a4b49a55;
  backdrop-filter:blur(15px);
  color:#c9d0bb;
  font-size:7px;
  letter-spacing:.1em;
  padding:11px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  box-shadow:0 5px 20px #0003

}
#effects-toggle>span {

  color:#cdb785;
  font-size:11px

}
#effects-toggle:disabled {

  opacity:.6;
  cursor:default

}
.pointer-lens {

  position:fixed;
  top:0;
  left:0;
  width:46px;
  height:46px;
  border:1px solid #c7d4b750;
  border-radius:50%;
  pointer-events:none;
  z-index:30;
  opacity:0;
  display:grid;
  place-items:center;
  transition:width .25s,height .25s,border-radius .25s,background .25s,border-color .25s

}
.pointer-lens>span {

  font-size:6px;
  letter-spacing:.1em;
  color:#e4dfc9;
  white-space:nowrap

}
.pointer-lens.inspect {

  width:85px;
  height:85px;
  border-color:#d2b581aa;
  background:#10190dba;
  backdrop-filter:blur(4px)

}
.kinetic-intro {

  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#111a12,#0a100d);
  border-top:1px solid #a5bc9a33;
  border-bottom:1px solid #a5bc9a33;
  padding:35px 0 28px;
  isolation:isolate

}
.kinetic-intro:before {

  content:'';
  position:absolute;
  right:0;
  top:0;
  width:50%;
  height:100%;
  background:radial-gradient(ellipse,#729b7e13,transparent 70%);
  pointer-events:none

}
.kinetic-meta,.kinetic-foot {

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  font-size:6px;
  letter-spacing:.18em;
  color:#8fa185

}
.kinetic-line {

  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2.5vw,40px);
  width:min(1320px,88%);
  max-width:100%;
  font-family:Manrope,sans-serif;
  font-size:clamp(32px,6.6vw,110px);
  line-height:1.2;
  font-weight:650;
  letter-spacing:-.065em;
  margin:22px auto 30px;
  transform:translateY(0);
  will-change:transform

}
.kinetic-line>span,.kinetic-line>em {

  display:block;
  white-space:nowrap;
  min-width:0

}
.kinetic-line>span {

  color:transparent;
  -webkit-text-stroke:1px #bdc7b455

}
.kinetic-line>em {

  font-family:'Cormorant Garamond',Georgia;
  font-weight:400;
  font-size:1.05em;
  letter-spacing:-.065em;
  background:linear-gradient(130deg,#e1e8d3,#809981 50%,#c9b98b);
  color:transparent;
  background-clip:text;
  -webkit-background-clip:text

}
.kinetic-line>b {

  font-size:.65em;
  color:#c6b27f;
  font-weight:400

}
.kinetic-foot>a {

  color:#d0bd95;
  border-bottom:1px solid #bba57444;
  padding-bottom:5px;
  font-size:7px

}
.spiral-gallery {

  background:radial-gradient(ellipse at 65% 50%,#88baa00c,transparent 60%),#080e0a

}
.spiral-enabled .helix-card.is-front {

  box-shadow:0 45px 110px #000c,0 0 75px #cba76a15,0 0 100px #7fae9207

}
.spiral-enabled .track-one {

  border-color:#a8c6a831;
  transform:translate(-50%,-50%) rotate(calc(-18deg + var(--spiral-angle,0deg)*.07));
  box-shadow:0 0 40px #8da67b08,inset 0 0 30px #8da67b08

}
.spiral-enabled .track-two {

  border-style:dashed;
  border-color:#d1b58024

}
.spiral-enabled .helix-axis {

  background:linear-gradient(transparent,#a2c5b130,transparent)

}
.spiral-enabled .spiral-aura {

  background:radial-gradient(ellipse,#98a47716,transparent 70%)

}
.design-lab {

  position:relative;
  background:linear-gradient(135deg,#172017,#0d150e);
  border-bottom:1px solid #bca5732b;
  isolation:isolate

}
.design-lab:before {

  content:'';
  position:absolute;
  inset:0;
  opacity:.2;
  pointer-events:none;
  background-image:linear-gradient(#9ea9890d 1px,transparent 1px),linear-gradient(90deg,#9ea9890d 1px,transparent 1px);
  background-size:75px 75px;
  z-index:-1

}
.lab-grid {

  display:grid;
  grid-template-columns:265px minmax(0,1fr);
  border:1px solid #a4b28e44;
  background:#0d150e;
  box-shadow:0 25px 90px #0003

}
.lab-controls {

  padding:27px 23px;
  border-right:1px solid #a4b28e33;
  background:#ffffff02

}
.lab-control-label,.lab-brand-label,.lab-type legend {

  font-size:7px;
  letter-spacing:.13em;
  color:#a3b393

}
.lab-themes {

  display:grid;
  gap:9px;
  margin-top:18px

}
.lab-themes>button {

  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  background:transparent;
  color:#b9c7aa;
  border:1px solid #a4b28e2b;
  padding:12px 10px;
  font-size:13px;
  transition:border-color .3s,background .3s

}
.lab-themes>button[aria-pressed=true] {

  background:#b8bd8b10;
  border-color:#d2b78377;
  color:#ecd9b3

}
.lab-themes small {

  font-size:5px;
  letter-spacing:.09em;
  display:block;
  margin-top:5px;
  color:#839778

}
.lab-themes b {

  margin-left:auto;
  align-self:flex-start;
  font-size:6px;
  font-weight:400;
  color:#93a27d

}
.theme-swatches {

  display:flex;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:28px;
  height:26px

}
.theme-swatches i {

  display:block;
  position:absolute;
  width:13px;
  height:21px;
  background:#303b27;
  left:0;
  top:0;
  border:1px solid #f0dfaf33;
  transform:rotate(-15deg)

}
.theme-swatches i:nth-child(2) {

  background:#cab487;
  left:7px;
  top:2px;
  transform:rotate(0)

}
.theme-swatches i:nth-child(3) {

  background:#e4dcc5;
  left:14px;
  top:4px;
  transform:rotate(15deg)

}
[data-lab-theme=volt] .theme-swatches i:first-child {

  background:#171225

}
[data-lab-theme=volt] .theme-swatches i:nth-child(2) {

  background:#b9f456

}
[data-lab-theme=volt] .theme-swatches i:nth-child(3) {

  background:#9c7dda

}
[data-lab-theme=pure] .theme-swatches i:first-child {

  background:#eeeae2

}
[data-lab-theme=pure] .theme-swatches i:nth-child(2) {

  background:#252822

}
[data-lab-theme=pure] .theme-swatches i:nth-child(3) {

  background:#b7beb0

}
.lab-brand-label {

  margin-top:25px;
  display:block;
  line-height:1.8

}
.lab-brand-label input {

  font-size:11px!important;
  padding:11px!important;
  margin-top:10px!important;
  background:#101b10!important;
  border-color:#7b8e6144!important;
  color:#cbd4b8!important;
  min-height:40px!important

}
.lab-type {

  padding:0;
  border:0;
  margin:24px 0 0;
  display:flex;
  gap:8px

}
.lab-type legend {

  padding:0;
  margin-bottom:12px

}
.lab-type label {

  position:relative;
  margin:0;
  flex:1

}
.lab-type input {

  position:absolute;
  opacity:0;
  width:1px;
  height:1px

}
.lab-type label>span {

  display:block;
  border:1px solid #8b9d7044;
  color:#a7b894;
  padding:9px 8px;
  text-align:center;
  font-size:9px;
  cursor:pointer

}
.lab-type label:first-of-type>span {

  font-family:Georgia;
  font-style:italic;
  font-size:11px

}
.lab-type input:checked+span {

  border-color:#d4ba7a77;
  color:#e0c797;
  background:#b8bd8b0c

}
.lab-type input:focus-visible+span {

  outline:2px solid #d4ba7a;
  outline-offset:3px

}
.lab-screen-label {

  margin-top:25px

}
.lab-devices {

  display:flex;
  gap:8px;
  margin-top:12px

}
.lab-devices>button {

  flex:1;
  border:1px solid #8b9d7044;
  background:transparent;
  color:#a7b894;
  padding:9px 8px;
  font-size:9px

}
.lab-devices>button[aria-pressed=true] {

  background:#b8bd8b0c;
  color:#e0c797;
  border-color:#d4ba7a77

}
.lab-note {

  font-size:9px;
  color:#849773;
  line-height:1.9;
  margin-top:25px

}
.lab-workspace {

  min-width:0;
  background:radial-gradient(ellipse at 50% 70%,#79976c0c,transparent 70%),#09120b;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  padding:20px

}
.lab-browser-bar {

  width:100%;
  font-size:6px;
  letter-spacing:.1em;
  display:flex;
  justify-content:space-between;
  color:#8ca27c;
  background:#162013;
  padding:12px 15px;
  border:1px solid #8ea17b33;
  flex-shrink:0

}
.lab-browser-bar>span:first-child {

  font-size:6px;
  letter-spacing:3px;
  color:#738c61

}
.lab-preview {

  --lab-bg:#e3decd;
  --lab-ink:#34422d;
  --lab-accent:#667b50;
  --lab-soft:#b4be9b;
  --lab-line:#34422d33;
  --lab-font:'Cormorant Garamond',Georgia;
  --lab-type-weight:400;
  width:100%;
  flex:1;
  min-height:510px;
  transition:width .6s,background .5s;
  background:var(--lab-bg);
  color:var(--lab-ink);
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px #0005

}
.lab-page {

  padding:30px;
  position:relative;
  overflow:hidden;
  min-height:100%;
  height:100%;
  background:var(--lab-bg);
  transition:background .5s,color .5s

}
.lab-preview-nav {

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px

}
.lab-preview-nav>b {

  font-family:Manrope,sans-serif;
  font-size:13px;
  letter-spacing:.08em;
  font-weight:600;
  max-width:230px;
  overflow-wrap:anywhere

}
.lab-preview-nav>span {

  font-size:5px;
  letter-spacing:.06em;
  flex-shrink:0

}
.lab-preview-content {

  display:grid;
  grid-template-columns:1fr .8fr;
  align-items:center;
  gap:10px;
  min-height:365px;
  padding:40px 0 30px;
  position:relative

}
.lab-preview-copy {

  position:relative;
  z-index:2

}
.lab-preview-eyebrow {

  font-size:6px;
  letter-spacing:.14em

}
.lab-preview h3 {

  font-family:var(--lab-font);
  font-size:clamp(40px,4.2vw,66px);
  font-weight:var(--lab-type-weight);
  line-height:.96;
  letter-spacing:-.06em;
  margin:19px 0

}
.lab-preview h3 em {

  font-family:inherit;
  color:var(--lab-accent);
  font-weight:inherit

}
.lab-preview p {

  font-size:9px;
  line-height:1.9;
  color:var(--lab-ink);
  opacity:.7;
  max-width:240px

}
.lab-preview-cta {

  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:5px;
  letter-spacing:.08em;
  background:var(--lab-ink);
  color:var(--lab-bg);
  padding:12px 15px;
  margin-top:23px;
  transition:transform .3s

}
.lab-preview-cta>span {

  font-size:12px;
  line-height:1

}
.lab-preview-cta:hover {

  transform:translateY(-3px)

}
.lab-orb {

  width:230px;
  height:230px;
  position:relative;
  perspective:600px;
  justify-self:center;
  transform:rotate(-15deg);
  isolation:isolate;
  animation:lab-float 9s ease-in-out infinite

}
.lab-orb-core {

  position:absolute;
  inset:20%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,var(--lab-bg),var(--lab-soft) 25%,var(--lab-accent) 50%,var(--lab-ink) 80%);
  box-shadow:inset -10px -15px 40px #0003,10px 25px 40px #0002

}
.lab-orb-ring {

  position:absolute;
  inset:4%;
  border:9px solid var(--lab-accent);
  border-top-color:var(--lab-soft);
  border-radius:50%;
  transform:rotateX(62deg) rotateY(15deg);
  box-shadow:0 9px 0 -3px var(--lab-ink),0 20px 30px #0001

}
.lab-orb-ring:nth-of-type(3) {

  transform:rotateY(65deg) rotateX(-15deg);
  border-width:5px;
  inset:0

}
.lab-orb-ring:nth-of-type(4) {

  transform:rotateX(20deg) rotateY(20deg);
  border-width:1px;
  inset:-5%;
  opacity:.3

}
.lab-orb>span {

  position:absolute;
  right:-15%;
  top:8%;
  font-size:40px;
  font-weight:400;
  color:var(--lab-accent)

}
.lab-preview-bottom {

  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:5px;
  letter-spacing:.08em;
  border-top:1px solid var(--lab-line);
  padding-top:16px

}
.lab-preview-caption {

  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  margin-top:15px;
  font-size:6px;
  color:#92a780;
  line-height:1.8

}
.lab-preview-caption>span:last-child {

  margin-left:auto;
  font-size:5px;
  color:#687e59;
  letter-spacing:.08em

}
.lab-live-dot {

  width:4px;
  height:4px;
  border-radius:50%;
  background:#a4bf77;
  box-shadow:0 0 10px #a4bf7744;
  flex-shrink:0

}
.lab-preview[data-theme=volt] {

  --lab-bg:#171126;
  --lab-ink:#dbebc5;
  --lab-accent:#c1ef58;
  --lab-soft:#9379c1;
  --lab-line:#c1ef5833

}
.lab-preview[data-theme=pure] {

  --lab-bg:#f3f1e9;
  --lab-ink:#252c27;
  --lab-accent:#7b8d84;
  --lab-soft:#d6ded2;
  --lab-line:#252c2722

}
.lab-preview[data-type=modern] {

  --lab-font:Manrope,Arial,sans-serif;
  --lab-type-weight:650

}
.lab-preview[data-type=modern] h3 {

  font-size:clamp(32px,3.2vw,50px);
  line-height:1.1

}
.lab-preview[data-type=modern] h3 em {

  font-style:normal

}
.lab-preview.is-mobile {

  width:315px;
  max-width:100%;
  border:6px solid #3b4932;
  border-radius:22px;
  min-height:550px;
  margin-top:12px;
  flex:none

}
.lab-preview.is-mobile .lab-page {

  padding:23px 20px

}
.lab-preview.is-mobile .lab-preview-nav>b {

  font-size:10px;
  max-width:190px

}
.lab-preview.is-mobile .lab-preview-nav>span {

  font-size:4px;
  max-width:50px;
  text-align:right;
  line-height:1.9

}
.lab-preview.is-mobile .lab-preview-content {

  grid-template-columns:1fr;
  padding:35px 0 25px;
  gap:25px

}
.lab-preview.is-mobile h3 {

  font-size:48px;
  margin:15px 0

}
.lab-preview.is-mobile[data-type=modern] h3 {

  font-size:36px

}
.lab-preview.is-mobile .lab-preview p {

  font-size:8px

}
.lab-preview.is-mobile .lab-orb {

  width:140px;
  height:140px;
  margin:0 auto

}
.lab-preview.is-mobile .lab-orb-ring {

  border-width:6px

}
.lab-preview.is-mobile .lab-orb-ring:nth-of-type(3) {

  border-width:3px

}
.lab-preview.is-mobile .lab-orb-ring:nth-of-type(4) {

  border-width:1px

}
.lab-preview.is-mobile .lab-orb>span {

  font-size:25px

}
.lab-preview.is-mobile .lab-preview-bottom {

  font-size:4px

}
.closing {

  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 130%,#91b17c20,transparent 70%),#101b12

}
.closing:before {

  content:'';
  position:absolute;
  width:500px;
  height:500px;
  border:1px solid #b7c49a15;
  border-radius:50%;
  right:-100px;
  top:-180px;
  pointer-events:none

}
.closing a {

  background:linear-gradient(110deg,#f1e7cf,#879b79,#e0c697);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent

}
.closing a>span {

  color:#c5bd8d

}
.effects-paused .lab-orb,.effects-paused .hero-light-sweep,.effects-paused .hero-reticle:before,.effects-paused .marquee>div {

  animation-play-state:paused!important

}
.effects-paused .pointer-lens {

  display:none

}
@keyframes light-sweep {

  0%,100% {
    opacity:0;
    transform:translateY(-50px) rotate(-33deg)
  }
  30% {
    opacity:.8
  }
  70% {
    opacity:.2;
    transform:translateY(1000px) rotate(-33deg)
  }

}
@keyframes reticle-rotate {

  to {
    transform:rotate(360deg)
  }

}
@keyframes lab-float {

  50% {
    transform:rotate(-5deg) translateY(-8px)
  }

}
@media(max-width:1100px) {
.lab-grid {

    grid-template-columns:230px minmax(0,1fr)

}
.lab-controls {

    padding:24px 19px

}
.lab-workspace {

    padding:15px

}
.lab-page {

    padding:25px

}
.lab-orb {

    width:170px;
    height:170px

}
.lab-preview-content {

    grid-template-columns:1fr .65fr;
    min-height:370px;
    gap:0

}
.lab-preview h3 {

    font-size:50px

}
.lab-preview[data-type=modern] h3 {

    font-size:36px

}
.lab-preview-nav>span {

    font-size:4px

}
.hero h1 {

    font-size:93px

}
.hero-reticle {

    right:-5%

}
.reticle-two {

    right:-12%

}
}
@media(max-width:760px) {
.hero h1 {

    font-size:clamp(54px,11.7vw,84px);
    line-height:1.05

}
.hero-content {

    top:32%

}
.hero-kicker {

    font-size:6px;
    letter-spacing:.2em

}
.hero-reticle {

    width:300px;
    height:300px;
    right:-60px;
    top:21%

}
.hero-reticle:after {

    box-shadow:300px 0 #b4d4c555

}
.reticle-two {

    width:390px;
    height:390px;
    right:-105px;
    top:15%

}
#hero-network {

    opacity:.55

}
#effects-toggle {

    bottom:11px;
    right:11px;
    font-size:5px;
    padding:9px 10px;
    gap:10px

}
#effects-toggle>span {

    font-size:9px

}
.pointer-lens {

    display:none

}
.kinetic-intro {

    padding:25px 0

}
.kinetic-meta,.kinetic-foot {

    font-size:5px;
    letter-spacing:.1em;
    gap:20px;
    line-height:1.8

}
.kinetic-meta>span:last-child {

    white-space:nowrap

}
.kinetic-line {

    display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
    text-align:center;
    font-size:17vw;
    line-height:1.05;
    gap:2px;
    margin:30px auto;
    transform:translateY(0)

}
.kinetic-line>b {

    font-size:22px;
    line-height:1;
    margin-top:16px

}
.kinetic-line>em {

    font-size:1em

}
.kinetic-foot>a {

    font-size:5px;
    white-space:nowrap

}
.kinetic-foot>span {

    max-width:180px

}
.lab-grid {

    grid-template-columns:1fr

}
.lab-controls {

    padding:25px;
    border-right:0;
    border-bottom:1px solid #a4b28e33

}
.lab-themes {

    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:15px

}
.lab-themes>button {

    padding:12px 9px;
    display:block;
    position:relative;
    font-size:12px;
    min-height:105px

}
.theme-swatches {

    margin-bottom:9px;
    transform:scale(.8);
    transform-origin:left top;
    height:22px

}
.lab-themes small {

    font-size:4px;
    letter-spacing:.02em;
    line-height:1.8;
    max-width:75px;
    margin-top:7px

}
.lab-themes b {

    position:absolute;
    right:8px;
    top:10px;
    font-size:5px

}
.lab-brand-label {

    font-size:7px;
    margin-top:22px

}
.lab-brand-label input {

    font-size:11px!important

}
.lab-type {

    margin-top:22px

}
.lab-type label>span {

    font-size:10px;
    padding:10px

}
.lab-type label:first-of-type>span {

    font-size:12px

}
.lab-screen-label {

    margin-top:22px

}
.lab-devices>button {

    padding:10px;
    font-size:10px

}
.lab-note {

    font-size:9px;
    margin-top:20px

}
.lab-workspace {

    padding:15px

}
.lab-browser-bar {

    font-size:4px;
    padding:10px

}
.lab-browser-bar>span:first-child {

    font-size:5px;
    letter-spacing:2px

}
.lab-preview {

    min-height:440px

}
.lab-page {

    padding:25px 20px

}
.lab-preview-content {

    min-height:330px;
    grid-template-columns:1fr .5fr;
    padding:35px 0 25px

}
.lab-preview h3 {

    font-size:46px;
    line-height:1

}
.lab-preview[data-type=modern] h3 {

    font-size:32px;
    line-height:1.1

}
.lab-preview p {

    font-size:8px;
    max-width:200px

}
.lab-preview-cta {

    font-size:4px;
    gap:12px;
    padding:11px 12px;
    max-width:190px

}
.lab-orb {

    width:120px;
    height:120px;
    margin-left:-15px;
    opacity:.9

}
.lab-orb-ring {

    border-width:5px

}
.lab-orb-ring:nth-of-type(3) {

    border-width:3px

}
.lab-orb-ring:nth-of-type(4) {

    border-width:1px

}
.lab-orb>span {

    font-size:24px

}
.lab-preview-nav>b {

    font-size:10px;
    max-width:165px

}
.lab-preview-nav>span {

    font-size:3px;
    max-width:75px;
    line-height:2;
    text-align:right

}
.lab-preview-eyebrow {

    font-size:5px;
    letter-spacing:.06em

}
.lab-preview-bottom {

    font-size:4px;
    letter-spacing:.04em;
    gap:10px

}
.lab-preview-caption {

    font-size:5px;
    gap:6px;
    margin-top:12px

}
.lab-preview-caption>span:last-child {

    display:none

}
.lab-preview.is-mobile {

    width:280px;
    min-height:550px

}
.lab-preview.is-mobile h3 {

    font-size:46px

}
.lab-preview.is-mobile[data-type=modern] h3 {

    font-size:34px

}
.lab-preview.is-mobile .lab-orb {

    margin:0 auto

}
.closing:before {

    width:350px;
    height:350px;
    top:-120px

}
.design-lab .section-top h2 {

    font-size:44px

}
.design-lab .section-top>p {

    font-size:11px

}
}
@media(max-width:380px) {
.hero h1 {

    font-size:50px

}
.hero-content {

    top:31%

}
.lab-controls {

    padding:21px

}
.lab-themes>button {

    padding:10px 7px;
    font-size:11px

}
.lab-workspace {

    padding:12px

}
.lab-preview h3 {

    font-size:39px

}
.lab-preview[data-type=modern] h3 {

    font-size:28px

}
.lab-orb {

    width:100px;
    height:100px;
    opacity:.75

}
.lab-preview-content {

    grid-template-columns:1fr .4fr

}
.lab-preview p {

    font-size:7px

}
.lab-preview-nav>b {

    font-size:9px

}
.lab-preview-eyebrow {

    font-size:4px

}
.design-lab .section-top h2 {

    font-size:39px

}
}
@media(pointer:coarse) {
.pointer-lens {

    display:none

}
}
@media(prefers-reduced-motion:reduce) {
.hero-light-sweep,.hero-reticle:before,.lab-orb {

    animation:none!important

}
.pointer-lens {

    display:none

}
.kinetic-line {

    will-change:auto

}
.lab-preview,.lab-page {

    transition:none!important

}
}
.effects-paused .ambient-cursor {

  display:none

}
[hidden] {

  display:none!important

}
body {

  overflow-x:clip

}
main,section,.wrap {

  min-width:0

}
.hero {

  height:max(920px,100svh);
  min-height:920px;
  max-height:1200px

}
.hero-content {

  top:30%;
  width:88%

}
.hero h1 {

  font-size:clamp(75px,8.1vw,132px);
  line-height:.98;
  letter-spacing:-.055em;
  max-width:1250px

}
.hero-bottom {

  margin-top:39px;
  align-items:flex-start

}
.hero-bottom p {

  font-size:14px;
  line-height:1.9;
  color:#b4c2ad

}
.hero .hero-explore {

  display:none

}
.hero-kicker {

  font-size:8px;
  letter-spacing:.23em

}
.hero-topline {

  font-size:7px;
  letter-spacing:.17em

}
.spiral-heading {

  align-items:center

}
.spiral-heading h2 {

  font-size:clamp(39px,4.2vw,65px);
  letter-spacing:-.045em

}
.spiral-actions {

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:center;
  max-width:340px

}
.spiral-actions>span {

  grid-column:1/-1;
  grid-row:1;
  font-size:6px;
  text-align:right;
  margin-bottom:4px

}
.spiral-actions>.skip-collection {

  grid-column:1/-1;
  grid-row:3;
  justify-self:end;
  font-size:7px;
  color:#8e9d7f;
  letter-spacing:.06em;
  padding:4px 0;
  border-bottom:1px solid #8e9d7f33

}
.spiral-actions>button {

  font-size:8px;
  padding:11px 13px;
  white-space:nowrap;
  cursor:pointer

}
.spiral-actions>button[aria-pressed=true] {

  border-color:#dbc389;
  background:#c1a87615

}
.spiral-actions>button:disabled {

  opacity:.5;
  cursor:default

}
.spiral-enabled .spiral-pin {

  padding-top:112px;
  padding-bottom:22px

}
.spiral-enabled .helix-environment {

  perspective:none

}
.spiral-enabled .helix-scene {

  perspective:1250px;
  perspective-origin:50% 48%

}
.collection-watermark {

  display:none;
  position:absolute;
  right:5%;
  top:47%;
  transform:translateY(-50%);
  z-index:-1;
  pointer-events:none;
  text-align:right

}
.collection-watermark>span {

  font-family:Manrope;
  font-size:min(24vw,330px);
  line-height:.9;
  font-weight:600;
  color:transparent;
  -webkit-text-stroke:1px #c1c69f10;
  letter-spacing:-.09em

}
.collection-watermark>small {

  display:block;
  font-size:6px;
  letter-spacing:.3em;
  color:#76876855;
  margin-top:20px;
  line-height:2.5

}
.spiral-enabled .collection-watermark {

  display:block

}
.spiral-enabled .helix-card.is-front {

  background:#18200f

}
.spiral-enabled .helix-card:before {

  content:'';
  position:absolute;
  inset:-3px;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .3s;
  z-index:2

}
.spiral-enabled .helix-card.is-front:before {

  border-color:#c8b77e2b

}
.helix-card:focus-visible {

  outline:2px solid #efd5a0;
  outline-offset:7px

}
.spiral-enabled .spiral-story {

  border-left:1px solid #bea56755;
  padding-left:20px

}
.spiral-story h3 {

  font-size:39px;
  letter-spacing:-.03em

}
.spiral-story p {

  color:#a0af90;
  font-size:11px;
  line-height:1.8;
  min-height:40px

}
.spiral-disclaimer {

  color:#a0aa94

}
.spiral-enabled.spotlight-view .helix-card {

  width:min(660px,60vw);
  max-width:660px

}
.spiral-enabled.spotlight-view .helix-card .project-image {

  height:clamp(220px,32svh,360px);
  padding:32px 40px

}
.spiral-enabled.spotlight-view .helix-card .project-image h3 {

  font-size:61px;
  margin-top:42px

}
.spiral-enabled.spotlight-view .helix-card .trade-mini h3,.spiral-enabled.spotlight-view .helix-card .apex-mini h3 {

  font-size:51px

}
.spotlight-view .collection-watermark {

  right:4%;
  opacity:.7

}
.spotlight-view .orbital-track {

  opacity:.35

}
.spotlight-view .helix-axis {

  display:none

}
.spiral-enabled.spotlight-view .helix-card .editorial-coffee {

  transform:scale(.9) rotate(-12deg);
  right:65px;
  bottom:25px

}
.spiral-enabled.spotlight-view .helix-card .dinner-art {

  right:70px;
  bottom:45px;
  transform:scale(1.15) rotateX(30deg)

}
.spiral-enabled.spotlight-view .helix-card .flower-art {

  transform:scale(1.35);
  transform-origin:bottom right;
  right:40px

}
.spiral-enabled.spotlight-view .helix-card .auto-art {

  transform:scale(1.35) rotate(-10deg);
  transform-origin:bottom right;
  right:0

}
.spiral-enabled.spotlight-view .helix-card .apex-art {

  right:20px

}
.spiral-enabled.spotlight-view .helix-card .salon-orb {

  width:220px;
  height:320px;
  right:15%

}
.spiral-enabled.spotlight-view .helix-card .orb-second {

  width:130px;
  height:210px;
  right:4%

}
.spiral-gallery:not(.spiral-enabled) .spiral-actions {

  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:360px

}
.spiral-gallery:not(.spiral-enabled) .skip-collection {

  width:100%;
  text-align:right;
  border:0

}
.lab-controls {

  background:linear-gradient(145deg,#c5c29605,transparent 70%)

}
.lab-workspace {

  background:radial-gradient(ellipse at 50% 50%,#99b48410,transparent 70%),#0a130d

}
.lab-live-dot {

  animation:status-breathe 4s ease-in-out infinite

}
.service {

  overflow:hidden

}
.service:after {

  content:'↗';
  position:absolute;
  right:10px;
  top:-40px;
  font-size:220px;
  line-height:1;
  font-family:Manrope;
  color:#d1b98505;
  pointer-events:none;
  transform:rotate(-10deg);
  transition:transform .6s,color .6s

}
.service:hover:after {

  transform:translateY(6px) rotate(0);
  color:#d1b98509

}
.service ul {

  position:relative;
  z-index:1

}
.service h3 {

  font-size:36px

}
.steps {

  counter-reset:process-step

}
.steps article {

  position:relative;
  isolation:isolate;
  counter-increment:process-step;
  padding-right:10px

}
.steps article:before {

  content:'0' counter(process-step);
  font-family:Manrope;
  font-size:95px;
  font-weight:600;
  color:#4253370a;
  position:absolute;
  right:0;
  top:12px;
  line-height:1;
  letter-spacing:-.1em;
  z-index:-1;
  pointer-events:none

}
.steps article>span {

  letter-spacing:.15em

}
.steps h3 {

  font-size:35px

}
.faq summary {

  min-height:24px;
  align-items:center;
  font-size:13px

}
.faq details {

  padding:23px 0

}
.faq details:first-child {

  padding-top:0

}
.quote-form {

  box-shadow:0 25px 80px #0004;
  background:radial-gradient(ellipse at top left,#869e6c08,transparent 60%),#141d12

}
.quote-form input:focus,.quote-form textarea:focus,.quote-form select:focus {

  border-color:#cfb580

}
.experience-stage {

  position:relative

}
.concept-loading {

  position:absolute;
  inset:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:20px;
  background:#111c12;
  color:#bcbf9c;
  font-size:8px;
  letter-spacing:.2em;
  z-index:2;
  pointer-events:none

}
.concept-loading>span {

  display:block;
  width:50px;
  height:50px;
  border:1px solid #adb88e33;
  border-top-color:#d1b985;
  border-radius:50%;
  animation:preview-loading 1.2s linear infinite

}
.experience-links {

  display:flex;
  flex-direction:column;
  gap:5px

}
.experience-links>a {

  font-size:7px;
  color:#ceba89

}
.experience-toolbar {

  background:linear-gradient(110deg,#1c2818,#10190f)

}
.experience-stage.mobile {

  background-image:linear-gradient(#9eac8710 1px,transparent 1px),linear-gradient(90deg,#9eac8710 1px,transparent 1px);
  background-size:25px 25px

}
.experience-stage iframe {

  color-scheme:normal

}
.experience-footer>div:not(.experience-links) {

  white-space:nowrap

}
.closing {

  padding-top:65px;
  padding-bottom:65px

}
.closing a {

  letter-spacing:-.065em;
  line-height:.95

}
.closing a:focus-visible {

  outline-color:#f0dec0

}
footer {

  padding-bottom:15px

}
#effects-toggle {

  bottom:14px;
  right:14px

}
.effects-paused .lab-live-dot {

  animation-play-state:paused

}
@keyframes preview-loading {

  to {
    transform:rotate(360deg)
  }

}
@keyframes status-breathe {

  50% {
    box-shadow:0 0 15px #a4bf7766;
    opacity:.55
  }

}
@media(min-width:1600px) {
.hero-content {

    top:33%

}
.hero h1 {

    font-size:139px

}
}
@media(max-width:1100px) {
.hero h1 {

    font-size:clamp(70px,8.6vw,100px)

}
.hero-bottom p {

    font-size:13px

}
.spiral-heading h2 {

    font-size:48px

}
.spiral-actions {

    gap:8px;
    max-width:300px

}
.spiral-actions>button {

    font-size:7px;
    padding:10px

}
.spiral-story h3 {

    font-size:34px

}
.spiral-story p {

    font-size:10px;
    max-width:340px

}
.spiral-enabled.spotlight-view .helix-card {

    width:61vw

}
.spiral-enabled.spotlight-view .helix-card .project-image h3 {

    font-size:53px

}
.spiral-enabled.spotlight-view .helix-card .trade-mini h3,.spiral-enabled.spotlight-view .helix-card .apex-mini h3 {

    font-size:44px

}
.service h3 {

    font-size:30px

}
}
@media(max-width:760px) {
.hero {

    height:max(1060px,100svh);
    min-height:1060px;
    max-height:none

}
.hero-content {

    top:265px

}
.hero h1 {

    font-size:clamp(53px,11.5vw,82px);
    line-height:1.03;
    max-width:100%

}
.hero h1 .title-line {

    max-width:100%

}
.hero-kicker {

    font-size:6px;
    letter-spacing:.16em;
    margin-bottom:23px

}
.hero-topline {

    top:120px;
    font-size:5px;
    letter-spacing:.13em

}
.hero-bottom {

    margin-top:30px

}
.hero-bottom p {

    font-size:13px;
    line-height:1.85

}
.hero-bottom .button {

    font-size:8px;
    letter-spacing:.06em;
    padding:18px 20px;
    margin-top:23px

}
.hero-reticle {

    right:-80px;
    top:17%;
    width:330px;
    height:330px

}
.reticle-two {

    right:-130px;
    top:12%;
    width:430px;
    height:430px

}
.spiral-enabled .spiral-pin {

    padding-top:95px;
    padding-bottom:15px

}
.spiral-heading h2 {

    font-size:39px;
    line-height:.98

}
.spiral-heading h2 em {

    margin-left:32px

}
.spiral-heading .eyebrow {

    font-size:6px

}
.spiral-actions {

    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:15px;
    gap:8px;
    max-width:100%

}
.spiral-actions>span {

    grid-row:1;
    grid-column:1;
    text-align:left;
    font-size:5px;
    margin:0;
    line-height:1.8;
    max-width:140px

}
.spiral-actions>.skip-collection {

    grid-row:1;
    grid-column:2;
    font-size:6px;
    line-height:1.7;
    padding:3px 0;
    justify-self:end

}
.spiral-actions>button {

    font-size:7px;
    padding:9px

}
.spiral-enabled .spiral-story {

    padding-left:14px

}
.spiral-story h3 {

    font-size:30px;
    margin:5px 0

}
.spiral-story p {

    font-size:10px;
    min-height:34px;
    max-width:100%

}
.spiral-story>span {

    font-size:5px

}
.spiral-enabled .helix-card .project-image {

    height:clamp(175px,25svh,235px)

}
.spiral-enabled .spiral-disclaimer {

    font-size:5px;
    margin-top:10px

}
.spiral-navigation {

    margin-top:14px

}
.spiral-enabled.spotlight-view .helix-card {

    width:81vw;
    max-width:400px;
    min-width:240px

}
.spiral-enabled.spotlight-view .helix-card .project-image {

    height:clamp(180px,26svh,250px);
    padding:22px

}
.spiral-enabled.spotlight-view .helix-card .project-image h3 {

    font-size:40px;
    margin-top:30px

}
.spiral-enabled.spotlight-view .helix-card .trade-mini h3,.spiral-enabled.spotlight-view .helix-card .apex-mini h3 {

    font-size:33px

}
.spiral-enabled.spotlight-view .helix-card .editorial-coffee {

    transform:scale(.6) rotate(-12deg);
    right:25px;
    bottom:20px

}
.spiral-enabled.spotlight-view .helix-card .flower-art {

    transform:scale(.9);
    right:0

}
.spiral-enabled.spotlight-view .helix-card .dinner-art {

    right:10px;
    bottom:25px;
    transform:scale(.75) rotateX(30deg)

}
.spiral-enabled.spotlight-view .helix-card .auto-art {

    transform:scale(.9) rotate(-10deg);
    right:0

}
.spiral-enabled.spotlight-view .helix-card .apex-art {

    right:-25px

}
.spiral-enabled.spotlight-view .helix-card .salon-orb {

    width:150px;
    height:230px;
    right:5%

}
.spiral-enabled.spotlight-view .helix-card .orb-second {

    width:100px;
    height:170px;
    right:-5%

}
.collection-watermark {

    right:3%;
    top:50%

}
.collection-watermark>span {

    font-size:47vw

}
.collection-watermark>small {

    font-size:4px

}
.service h3 {

    font-size:36px

}
.service:after {

    font-size:190px;
    top:-35px

}
.steps article:before {

    font-size:70px;
    top:20px

}
.steps h3 {

    font-size:31px

}
.concept-loading {

    inset:0;
    font-size:7px

}
.experience-links {

    max-width:160px

}
.experience-links>a {

    font-size:6px

}
.experience-footer {

    min-height:88px

}
.experience-links p {

    max-width:160px

}
.experience-footer>div:not(.experience-links) {

    width:auto

}
.closing {

    padding:45px 0

}
.closing a {

    font-size:65px

}
.closing a>span {

    font-size:36px

}
.lab-preview p {

    white-space:pre-line

}
footer {

    padding-bottom:50px

}
}
@media(max-width:380px) {
.hero {

    height:1040px;
    min-height:1040px

}
.hero-content {

    top:255px

}
.hero h1 {

    font-size:51px

}
.hero-kicker {

    font-size:5px

}
.spiral-heading h2 {

    font-size:34px

}
.spiral-enabled .spiral-pin {

    padding-top:87px

}
.spiral-actions {

    margin-top:12px

}
.spiral-story h3 {

    font-size:25px

}
.spiral-story p {

    font-size:9px;
    min-height:30px

}
.spiral-enabled .helix-card .project-image {

    height:170px

}
.spiral-enabled.spotlight-view .helix-card .project-image {

    height:175px

}
.spiral-enabled.spotlight-view .helix-card .project-image h3 {

    font-size:34px;
    margin-top:25px

}
.spiral-enabled.spotlight-view .helix-card .trade-mini h3,.spiral-enabled.spotlight-view .helix-card .apex-mini h3 {

    font-size:28px

}
.spiral-navigation {

    margin-top:10px

}
.spiral-enabled .spiral-disclaimer {

    font-size:5px

}
.closing a {

    font-size:56px

}
}
@media(max-height:780px) and (min-width:761px) {
.spiral-enabled .spiral-pin {

    padding-top:92px;
    padding-bottom:10px

}
.spiral-heading h2 {

    font-size:40px

}
.spiral-heading .eyebrow {

    font-size:7px

}
.spiral-actions {

    gap:6px

}
.spiral-actions>span {

    font-size:5px

}
.spiral-actions>button {

    padding:8px 10px;
    font-size:7px

}
.spiral-enabled .helix-card .project-image,.spiral-enabled.spotlight-view .helix-card .project-image {

    height:185px;
    padding:20px

}
.spiral-enabled .helix-card .project-image h3,.spiral-enabled.spotlight-view .helix-card .project-image h3 {

    font-size:38px;
    margin-top:24px

}
.spiral-enabled .helix-card .trade-mini h3,.spiral-enabled .helix-card .apex-mini h3,.spiral-enabled.spotlight-view .helix-card .trade-mini h3,.spiral-enabled.spotlight-view .helix-card .apex-mini h3 {

    font-size:31px

}
.spiral-story h3 {

    font-size:27px;
    margin:5px 0

}
.spiral-story p {

    font-size:10px;
    min-height:32px;
    max-width:360px

}
.spiral-enabled .spiral-disclaimer {

    font-size:6px

}
.spiral-enabled .helix-card-caption {

    padding:10px 16px

}
}
@media(max-height:560px) {
.spiral-gallery {

    padding:55px 0

}
.helix-scene {

    max-width:1100px

}
.spiral-gallery:not(.spiral-enabled) .spiral-heading {

    align-items:flex-start

}
}
@media(prefers-reduced-motion:reduce) {
.lab-live-dot,.concept-loading>span {

    animation:none

}
}
#studio-navigator {

  position:fixed;
  bottom:14px;
  left:14px;
  z-index:14;
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid #a6b39344;
  background:#101a12eb;
  color:#becbb0;
  backdrop-filter:blur(18px);
  font-size:7px;
  letter-spacing:.1em;
  padding:11px 14px;
  cursor:pointer;
  box-shadow:0 5px 20px #0003

}
#studio-navigator>span {

  font-size:8px;
  color:#d8c08e;
  letter-spacing:.04em

}
#navigator-dialog {

  width:min(680px,92vw);
  max-width:680px;
  padding:45px;
  background:radial-gradient(ellipse at 100% 0,#b5bd8722,transparent 55%),#111c12;
  border:1px solid #b6a56d66;
  box-shadow:0 30px 120px #000b

}
#navigator-dialog h2 {

  font-size:68px;
  margin:25px 0 30px;
  line-height:.95

}
#navigator-dialog .eyebrow {

  font-size:7px

}
.navigator-links {

  display:grid

}
.navigator-links>a {

  display:flex;
  align-items:center;
  gap:18px;
  padding:19px 0;
  border-top:1px solid #bbc39922;
  color:#d3dcc4;
  transition:padding .3s,color .3s

}
.navigator-links>a>span {

  font-size:8px;
  color:#8ba079;
  align-self:flex-start;
  padding-top:5px

}
.navigator-links>a>div {

  font-family:'Cormorant Garamond',Georgia;
  font-size:29px;
  line-height:1

}
.navigator-links small {

  display:block;
  font-family:'DM Sans';
  font-size:9px;
  color:#91a380;
  margin-top:9px;
  line-height:1.6

}
.navigator-links b {

  font-size:25px;
  font-weight:400;
  color:#d4bd8d;
  margin-left:auto;
  transition:transform .3s

}
.navigator-links>a:hover {

  padding-left:10px;
  color:#e9d4a9

}
.navigator-links>a:hover b {

  transform:translate(3px,-3px)

}
.navigator-tip {

  font-size:8px!important;
  color:#849874!important;
  letter-spacing:.08em;
  margin-top:25px

}
#navigator-dialog .dialog-close {

  color:#d5c195;
  font-size:30px

}
@media(max-width:760px) {
#studio-navigator {

    bottom:11px;
    left:11px;
    font-size:5px;
    padding:9px 10px;
    gap:9px

}
#studio-navigator>span {

    font-size:6px

}
#navigator-dialog {

    padding:30px 25px;
    max-height:90svh;
    overflow:auto

}
#navigator-dialog h2 {

    font-size:56px;
    margin:20px 0 25px

}
.navigator-links>a {

    padding:16px 0;
    gap:15px

}
.navigator-links>a>div {

    font-size:26px

}
.navigator-links small {

    font-size:9px

}
.navigator-links b {

    font-size:22px

}
.navigator-tip {

    font-size:7px!important

}
.navigator-links>a>span {

    font-size:7px

}
#navigator-dialog .eyebrow {

    font-size:6px

}
}
@media(max-height:650px) {
#navigator-dialog {

    max-height:90svh;
    overflow:auto;
    padding:30px

}
#navigator-dialog h2 {

    font-size:45px;
    margin:18px 0

}
.navigator-links>a {

    padding:12px 0

}
.navigator-links>a>div {

    font-size:25px

}
.navigator-links small {

    font-size:8px;
    margin-top:5px

}
.navigator-tip {

    margin-top:15px

}
}
.no-script-note {
 font-size:12px; line-height:1.8; padding:15px; border:1px solid #bfa77b44; color:#d5c39b; margin-bottom:20px;
}
.quote-form .button:disabled {
 opacity:.45; cursor:default;
}
.lab-preview p {
 opacity:.85;
}
.hero.service-hero {
 height:auto; min-height:820px; max-height:none; padding:185px 0 35px;
}
.hero-service-grid {
 display:grid; grid-template-columns:1fr 1.02fr; gap:65px; align-items:center; position:relative; z-index:2; min-height:520px;
}
.service-hero-copy {
 min-width:0;
}
.service-hero-copy .eyebrow {
 font-size:7px; letter-spacing:.15em; line-height:2;
}
.hero.service-hero h1 {
 font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(64px,6.7vw,99px); line-height:1; letter-spacing:-.055em; font-weight:400; margin:26px 0; max-width:none;
}
.hero.service-hero h1 em {
 color:#d4bd91; font-weight:400; text-shadow:none;
}
.service-hero-copy>p {
 font-size:14px; line-height:1.95; color:#b3bfa9; max-width:410px;
}
.service-hero-actions {
 display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:30px;
}
.service-hero-actions .button {
 font-size:9px; padding:19px 22px; gap:25px;
}
.service-hero-actions .text-link {
 font-size:10px; color:#c8cdb9;
}
.service-hero-details {
 display:flex; align-items:center; gap:14px; margin-top:40px; color:#8e9f80; font-size:6px; letter-spacing:.1em; flex-wrap:wrap;
}
.service-hero-details i {
 font-style:normal; color:#c5b17e; font-size:12px;
}
.website-stack {
 display:block; height:440px; position:relative; perspective:1100px; margin-right:12px; isolation:isolate;
}
.website-stack:before {
 content:''; position:absolute; inset:-25%; background:radial-gradient(ellipse,#9eb17915,transparent 65%); z-index:-1; pointer-events:none;
}
.hero-site-window {
 position:absolute; width:95%; border:1px solid #c8c8a344; box-shadow:0 25px 70px #0007; overflow:hidden; transition:transform .7s;
}
.hero-site-chrome {
 height:30px; background:#edf0e0; color:#667257; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:8px 12px; font-size:5px; letter-spacing:.1em;
}
.hero-site-chrome>span:first-child {
 font-size:6px; letter-spacing:2px;
}
.hero-site-window .project-image {
 height:285px; border-radius:0; padding:28px; box-shadow:none;
}
.hero-site-window .project-image h3 {
 margin-top:45px; font-size:54px;
}
.hero-site-window .mini-nav {
 font-size:20px;
}
.hero-site-window .mini-nav>span {
 font-size:5px;
}
.hero-site-window .mini-pill {
 bottom:24px; font-size:5px;
}
.hero-site-window .editorial-coffee {
 transform:scale(.7) rotate(-12deg); transform-origin:bottom right; right:32px; bottom:32px;
}
.hero-site-window .house-lines {
 width:200px; height:200px; right:-80px; top:100px;
}
.site-back {
 left:35px; top:0; transform:rotate(7deg) translateY(-8px); opacity:.8;
}
.site-front {
 left:-5px; top:85px; transform:rotate(-5deg);
}
.website-stack:hover .site-front {
 transform:rotate(-2deg) translateY(-9px);
}
.website-stack:hover .site-back {
 transform:rotate(9deg) translateY(-20px);
}
.website-stack-caption {
 position:absolute; bottom:-15px; right:10px; color:#9cac8a; font-size:6px; letter-spacing:.1em;
}
.service-hero-footer {
 position:relative; z-index:2; display:flex; justify-content:space-between; gap:20px; align-items:center; border-top:1px solid #c6c49626; padding-top:22px; margin-top:50px; color:#8d9d7f; font-size:6px; letter-spacing:.12em;
}
.service-hero-footer>a {
 color:#c8b58b; font-size:8px; letter-spacing:0;
}
@media(max-width:1050px) {
.hero-service-grid {
 gap:40px; grid-template-columns:1fr 1fr;
}
.hero.service-hero h1 {
 font-size:72px;
}
.hero-site-window .project-image {
 height:255px; padding:23px;
}
.hero-site-window .project-image h3 {
 font-size:45px;
}
.hero-site-window .mini-nav {
 font-size:17px;
}
.hero-site-window .mini-nav>span {
 font-size:4px;
}
.website-stack {
 height:420px;
}
.service-hero-actions {
 gap:20px;
}
}
@media(max-width:760px) {
.hero.service-hero {
 min-height:0; padding:145px 0 30px;
}
.hero-service-grid {
 grid-template-columns:1fr; gap:65px; min-height:0;
}
.hero.service-hero h1 {
 font-size:clamp(58px,14.4vw,88px); margin:22px 0;
}
.service-hero-copy .eyebrow {
 font-size:6px; line-height:1.9; max-width:300px;
}
.service-hero-copy>p {
 font-size:13px; line-height:1.9; max-width:100%;
}
.service-hero-actions {
 gap:20px; margin-top:26px;
}
.service-hero-actions .button {
 padding:17px 18px; font-size:8px;
}
.service-hero-actions .text-link {
 font-size:9px;
}
.service-hero-details {
 font-size:5px; gap:11px; margin-top:28px;
}
.website-stack {
 height:360px; width:92%; max-width:460px; margin:0 auto;
}
.hero-site-window .project-image {
 height:235px; padding:22px;
}
.hero-site-window .project-image h3 {
 font-size:43px; margin-top:36px;
}
.hero-site-window .mini-nav {
 font-size:16px;
}
.hero-site-window .mini-nav>span {
 font-size:4px; max-width:100px; text-align:right; line-height:1.8;
}
.hero-site-window .editorial-coffee {
 transform:scale(.57) rotate(-12deg); right:25px; bottom:25px;
}
.hero-site-chrome {
 font-size:4px; height:25px;
}
.site-front {
 top:65px; left:-10px;
}
.site-back {
 left:20px;
}
.website-stack-caption {
 bottom:0; font-size:5px; right:0;
}
.service-hero-footer {
 margin-top:45px; padding-top:18px; font-size:5px; gap:15px; line-height:1.8;
}
.service-hero-footer>span:last-child {
 display:none;
}
.service-hero-footer>a {
 font-size:7px; white-space:nowrap;
}
}
@media(max-width:380px) {
.hero.service-hero h1 {
 font-size:56px;
}
.website-stack {
 height:335px;
}
.hero-site-window .project-image {
 height:215px;
}
.hero-site-window .project-image h3 {
 font-size:37px;
}
.hero-site-window .mini-nav {
 font-size:14px;
}
.hero-site-window .mini-nav>span {
 font-size:3px; max-width:80px;
}
.service-hero-actions {
 gap:16px;
}
.service-hero-actions .text-link {
 font-size:8px;
}
}
@media(prefers-reduced-motion:reduce) {
.hero-site-window {
 transition:none;
}
.website-stack:hover .site-front {
 transform:rotate(-5deg);
}
.website-stack:hover .site-back {
 transform:rotate(7deg) translateY(-8px);
}
}

/* Original particle hero effect. */
.sculpture-wrap{
  position:absolute;
  right:-8%;
  top:8%;
  width:min(850px,65vw);
  height:82%;
  z-index:1
}
.sculpture-wrap canvas{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  opacity:.88
}
.sculpture-fallback{
  position:absolute;
  width:60%;
  height:65%;
  left:20%;
  top:15%;
  border:35px double #a18148;
  border-radius:45%;
  transform:rotate(-30deg);
  box-shadow:inset 15px 5px 40px #ead3a4,10px 20px 70px #8d683622;
  opacity:.35
}
.webgl-ready .sculpture-fallback{
  display:none
}
.sculpture-caption{
  position:absolute;
  right:16%;
  bottom:5%;
  font-size:6px;
  letter-spacing:.23em;
  color:#9c8b6c;
  writing-mode:vertical-rl
}
@media(min-width:1600px){.sculpture-wrap{
    right:0
  }}
@media(max-width:1050px){.sculpture-wrap{
    width:750px;
    right:-200px;
    top:7%;
    height:75%
  }}
@media(max-width:760px){.sculpture-wrap{
    width:650px;
    height:650px;
    right:-240px;
    top:75px;
    opacity:.65
  }
.sculpture-caption{
    display:none
  }}
@media(max-width:380px){.sculpture-wrap{
    right:-270px;
    top:35px
  }}
.sculpture-wrap{
  right:-2%;
  top:5%;
  width:min(850px,62vw)
}
.sculpture-caption{
  color:#b09c77
}
@media(max-width:1050px){.sculpture-wrap{
    width:750px;
    right:-170px
  }}
@media(max-width:760px){.sculpture-wrap{
    width:620px;
    right:-220px;
    top:75px
  }}
.matter-controls{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:4
}
.matter-controls button{
  background:#c5aa7309;
  color:#d7c39d;
  border:1px solid #bba16b55;
  font-family:'DM Sans',Arial,sans-serif;
  cursor:pointer;
  transition:background .3s,border-color .3s
}
.matter-controls button:hover{
  background:#c5aa731c;
  border-color:#dcc18b
}
.matter-controls button:disabled{
  opacity:.5;
  cursor:default
}
#matter-trigger{
  font-size:7px;
  letter-spacing:.16em;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:18px
}
#matter-trigger>span{
  font-size:13px;
  line-height:1
}
#matter-pause{
  font-size:11px;
  width:29px;
  height:29px;
  padding:0;
  display:grid;
  place-items:center
}
.hero-index .matter-controls{
  letter-spacing:normal
}
.sculpture-wrap canvas{
  transition:opacity .5s
}
.matter-controls button:focus-visible{
  outline:2px solid #d7c39d;
  outline-offset:4px
}
@media(max-width:760px){#matter-trigger{
    font-size:5px;
    letter-spacing:.08em;
    padding:9px 10px;
    gap:10px
  }
#matter-trigger>span{
    font-size:10px
  }
.matter-controls{
    gap:8px
  }
#matter-pause{
    width:26px;
    height:26px;
    font-size:10px
  }}
@media(prefers-reduced-motion:reduce){.matter-controls button{
    transition:none
  }}
#matter-pause[hidden]{
  display:none
}
.sculpture-wrap{
  filter:drop-shadow(0 0 45px #aeccba05)
}
.sculpture-wrap{
  top:8%;
  right:-1%;
  width:min(850px,66vw);
  height:78%;
  filter:drop-shadow(0 30px 50px #0005)
}
.scene-plinth{
  position:absolute;
  left:20%;
  right:15%;
  bottom:9%;
  height:70px;
  border-radius:50%;
  background:radial-gradient(ellipse,#05120caa,transparent 68%);
  transform:rotateX(55deg);
  filter:blur(7px)
}
.scene-caustic{
  position:absolute;
  left:18%;
  right:10%;
  bottom:9%;
  height:95px;
  border:1px solid #beaa6b14;
  border-radius:50%;
  box-shadow:0 0 50px #85ab7b0a,inset 0 0 40px #beaa6b09;
  transform:rotateX(65deg) rotate(-5deg)
}
.sculpture-caption{
  right:9%;
  bottom:18%;
  font-size:5px;
  color:#a59677
}
@media(min-width:1600px){.sculpture-wrap{
    right:4%;
    top:10%
  }}
@media(max-width:760px){.sculpture-wrap{
    top:100px;
    right:-210px;
    width:630px;
    height:610px;
    opacity:.55
  }
.sculpture-caption{
    display:none
  }
.matter-controls{
    gap:8px
  }
#matter-trigger{
    font-size:5px;
    padding:10px;
    gap:10px
  }}
@media(prefers-reduced-motion:reduce){.sculpture-wrap canvas{
    transition:none
  }}
.static-material .sculpture-fallback{
  opacity:.65;
  border-width:42px;
  filter:drop-shadow(0 20px 35px #b0a27311)
}
.hero-index .matter-controls{ grid-column:2; grid-row:1; justify-self:center; }
@media(max-width:760px){.hero-index .matter-controls{ justify-self:start; }}
.hero-service-grid .particle-showcase {position:relative;min-width:0;height:520px;isolation:isolate;}
.hero-service-grid .sculpture-wrap {position:absolute;inset:-55px -50px 15px;width:auto;height:auto;transform:none;opacity:1;pointer-events:none;}
.hero-service-grid #sculpture {position:absolute;inset:0;width:100%;height:100%;}
.hero-service-grid .sculpture-caption {bottom:36px;left:0;right:0;text-align:center;}
.particle-showcase .matter-controls {position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:5;}
@media(max-width:800px){.hero-service-grid .particle-showcase{height:390px;}.hero-service-grid .sculpture-wrap{inset:-30px -20px 5px;}}
@media(max-width:420px){.hero-service-grid .particle-showcase{height:310px;}.hero-service-grid .sculpture-wrap{inset:-15px -10px 10px;}.particle-showcase .matter-controls{font-size:8px;}}
.hero-service-grid .sculpture-caption {writing-mode:horizontal-tb;}

/* A clear service-first reading order, preserving the established type system. */
#services.section {padding-top:90px;padding-bottom:100px;}
#services .section-top {align-items:flex-end;}
#services .section-top>p {max-width:350px;line-height:1.8;}
#services .service h3 {line-height:1.15;}
#services .service>p {line-height:1.8;}
#services .service .text-link {line-height:1.6;}
#process,#faq,#quote,#services {scroll-margin-top:110px;}
.hero-service-grid .service-hero-copy>p {max-width:490px;line-height:1.85;}
.service-hero-footer>span:first-child {line-height:1.8;}
#faq .eyebrow {line-height:1.8;}
#quote .quote-intro>p {max-width:420px;line-height:1.85;}
@media(max-width:760px){
 #services.section {padding-top:65px;padding-bottom:65px;}
 #services .section-top>p {max-width:100%;}
 .service-hero-footer>span:first-child {max-width:220px;}
 #process,#faq,#quote,#services {scroll-margin-top:90px;}
}
.contact-direct {margin:30px 0;padding:24px 0;border-top:1px solid #bca57344;border-bottom:1px solid #bca57344;}
.contact-direct>a {display:block;font-size:clamp(14px,1.6vw,20px);margin-top:12px;overflow-wrap:anywhere;line-height:1.7;color:var(--orange);}
.contact-direct>p {font-size:12px;line-height:1.8;opacity:.75;margin-top:10px;}
#email-project {margin-top:15px;max-width:100%;text-align:center;white-space:normal;}
#email-project[hidden],#email-help[hidden] {display:none;}

/* Responsive finishing pass: readable content, fluid columns, comfortable touch controls. */
.hero-service-grid>*,.services-grid>*,.approach-grid>*,.quote-section>*,.lab-grid>*,.field-row>*,.steps>*,.section-top>*,.spiral-heading>* {min-width:0;}
input,select,textarea {max-width:100%;}
img,video,svg {max-width:100%;}
.quote-form input:not([type=radio]):not([type=checkbox]),.quote-form select,.quote-form textarea,.lab-brand-label input {font-size:16px!important;}
.quote-form input:not([type=radio]):not([type=checkbox]),.quote-form select {min-height:48px;}
.quote-form label,.quote-form legend {font-size:13px;line-height:1.65;}
.form-footnote,.quote-form .consent,.lab-note {font-size:12px;line-height:1.8;}
.form-navigation {flex-wrap:wrap;gap:12px;}
.form-navigation>button,.device-controls button,.lab-devices button,.lab-type label>span {min-height:44px;}
.form-navigation .form-submit {white-space:normal;max-width:100%;}
#email-project {white-space:normal;min-height:48px;line-height:1.7;}
.service-hero-copy .eyebrow {font-size:10px;line-height:1.8;}
.service-hero-details,.service-hero-footer {font-size:9px;line-height:1.8;}
.service-hero-actions .button {font-size:11px;min-height:48px;}
.service-hero-actions .text-link {font-size:12px;min-height:44px;display:inline-flex;align-items:center;}
.section-top>p,.benefits p,.service>p,.steps p,.quote-intro>p,.faq details p {font-size:14px;line-height:1.85;}
.eyebrow,.service .eyebrow,.steps article>span {font-size:10px;line-height:1.8;}
.service ul {font-size:13px;line-height:1.9;}
.service .text-link {display:inline-flex;align-items:center;min-height:44px;font-size:12px;}
.faq summary {min-height:56px;gap:16px;line-height:1.5;}
.faq summary>span {flex:none;}
.lab-controls,.lab-workspace,.lab-page {min-width:0;}
.lab-control-label,.lab-brand-label,.lab-screen-label {font-size:10px;line-height:1.7;}
.lab-themes small {font-size:8px;line-height:1.8;max-width:none;}
.lab-preview-caption {font-size:10px;flex-wrap:wrap;}
#navigator-dialog,#privacy-dialog {max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;}
.navigator-links small {font-size:12px;}
.navigator-tip {font-size:10px!important;}
.dialog-close {min-width:44px;min-height:44px;}
.experience-dialog {height:94dvh;max-height:94dvh;}
.experience-stage iframe {min-width:0;max-width:100%;}
.experience-toolbar>div:first-child {min-width:0;}
.experience-toolbar h2 {overflow-wrap:anywhere;}
.experience-footer {flex-shrink:0;}
.experience-footer button {min-width:44px;min-height:44px;}
.experience-links>a {font-size:11px;min-height:32px;display:flex;align-items:center;}
.spiral-actions>button {min-height:44px;font-size:10px;line-height:1.4;}
.spiral-actions>.skip-collection {font-size:11px;min-height:36px;display:flex;align-items:center;}
.spiral-story p {font-size:12px;line-height:1.7;}
.spiral-story>span {font-size:9px;}
.spiral-disclaimer {font-size:10px!important;line-height:1.7;}
.spiral-dots {gap:0;}
.spiral-dots button {min-width:36px;min-height:44px;}
.spiral-navigation>button {min-width:44px;min-height:44px;}
.particle-showcase .matter-controls button {min-height:44px;min-width:44px;font-size:10px;}
#studio-navigator,#effects-toggle {min-height:44px;font-size:9px;bottom:calc(12px + env(safe-area-inset-bottom));}
footer {padding-bottom:85px;gap:20px;}
footer p,footer>span,footer>button {font-size:11px;line-height:1.8;}
@media(min-width:761px) and (max-width:1100px){
 .hero.service-hero h1 {font-size:clamp(54px,6.4vw,72px);}
 .hero-service-grid {grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;}
 .hero-service-grid .particle-showcase {height:420px;}
 .hero-service-grid .sculpture-wrap {inset:-15px -20px 35px;}
 .section-top {gap:30px;}
 .services-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
 .service {padding:28px 20px;}
 .service h3 {font-size:29px;}
 .quote-section {grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:35px;}
 .quote-intro h2 {font-size:clamp(45px,5.3vw,62px);}
 .quote-form {padding:25px;}
 .field-row {gap:14px;}
 .spiral-heading h2 {font-size:44px;}
 .lab-grid {grid-template-columns:220px minmax(0,1fr);}
 .lab-preview-content {grid-template-columns:1fr;}
 .lab-preview .lab-orb {display:none;}
 .steps {grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;}
}
@media(max-width:1024px){
 header {gap:12px;}
 header .brand {margin-right:auto;}
 header>.button {margin-right:48px;font-size:10px;padding:13px 16px;min-height:44px;}
 .menu-toggle {display:block;position:absolute;right:0;top:calc(50% - 22px);width:44px;height:44px;background:none;border:0;padding:7px 8px;z-index:3;}
 .menu-toggle>span {display:block;height:1px;background:#d6c397;width:24px;margin:7px 0;transition:transform .3s;}
 .menu-toggle[aria-expanded=true]>span:first-child {transform:translateY(4px) rotate(45deg);}
 .menu-toggle[aria-expanded=true]>span:last-child {transform:translateY(-4px) rotate(-45deg);}
 header.header-stuck .menu-toggle {right:12px;}
 header nav {display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;padding:16px;background:#131c12fa;border:1px solid #d1b78333;max-height:calc(100dvh - 130px);overflow:auto;}
 header.nav-open nav {display:flex;flex-direction:column;gap:0;}
 header nav a {padding:16px 8px;font-size:15px;border-bottom:1px solid #e2c78f20;min-height:48px;}
 header nav a:after {display:none;}
 .lab-grid {grid-template-columns:1fr;}
 .lab-controls {border-right:0;border-bottom:1px solid #a4b28e33;}
 .lab-themes {grid-template-columns:repeat(3,minmax(0,1fr));}
 .lab-preview-content {grid-template-columns:minmax(0,1fr) minmax(90px,.6fr);}
 .lab-preview .lab-orb {display:block;}
}
@media(max-width:900px){
 .hero.service-hero {padding-top:150px;min-height:0;}
 .hero-service-grid {grid-template-columns:1fr;gap:15px;min-height:0;}
 .hero-service-grid .service-hero-copy {max-width:650px;}
 .hero-service-grid .particle-showcase {height:360px;width:min(100%,570px);margin-inline:auto;}
 .hero-service-grid .sculpture-wrap {inset:0 0 25px;}
 .hero.service-hero h1 {font-size:clamp(54px,9vw,80px);}
 .services-grid {grid-template-columns:1fr;gap:22px;}
 .service {padding:32px;}
 .service h3 {font-size:36px;}
 .service>p {min-height:0;max-width:620px;}
 .quote-section,.approach-grid,.faq {display:grid;grid-template-columns:1fr;gap:40px;}
 .quote-section .quote-intro {position:static;}
 .section-top {flex-wrap:wrap;gap:24px;}
 .section-top>p {max-width:550px;}
 .spiral-heading {gap:20px;}
 .spiral-heading h2 {font-size:38px;}
 .spiral-heading h2 em {margin-left:0;}
}
@media(max-width:760px){
 .wrap {width:calc(100% - 36px);}
 .hero.service-hero {padding-top:130px;}
 .hero.service-hero h1 {font-size:clamp(48px,12.5vw,80px);line-height:1.04;}
 .hero-service-grid .service-hero-copy>p {font-size:15px;line-height:1.8;}
 .service-hero-copy .eyebrow {font-size:9px;max-width:100%;}
 .service-hero-details {font-size:9px;gap:10px;}
 .service-hero-footer {flex-wrap:wrap;font-size:8px;gap:10px;margin-top:30px;}
 .service-hero-footer>a {font-size:11px;min-height:44px;display:flex;align-items:center;}
 .section {padding-top:65px;padding-bottom:65px;}
 h2,.section-top h2,.design-lab .section-top h2 {font-size:clamp(36px,9vw,52px);line-height:1.12;}
 .service {padding:28px 23px;}
 .service h3 {font-size:34px;}
 .section-top>p,.benefits p,.service>p,.steps p,.quote-intro>p,.faq details p {font-size:14px;}
 .benefits article {gap:15px;}
 .benefits h3 {font-size:23px;line-height:1.3;}
 .benefits article>b {display:none;}
 .steps {grid-template-columns:1fr;gap:25px;}
 .steps h3 {font-size:32px;line-height:1.2;}
 .quote-intro h2 {font-size:clamp(43px,11vw,62px);}
 .quote-form {padding:24px 18px;}
 .field-row {grid-template-columns:1fr;gap:20px;}
 .choice-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .choice-grid label>span {font-size:12px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:12px 8px;}
 .form-steps {gap:12px;flex-wrap:wrap;}
 .form-steps>span {font-size:10px;line-height:1.6;}
 .step-title {font-size:28px;line-height:1.25;}
 .step-description,.brief-summary {font-size:12px;line-height:1.8;}
 .form-heading {gap:12px;flex-wrap:wrap;font-size:10px;}
 .form-navigation>button {font-size:12px;}
 .form-navigation .form-submit {flex:1;}
 .lab-controls {padding:24px 18px;}
 .lab-workspace {padding:12px;}
 .lab-themes>button {padding:12px 8px;font-size:13px;}
 .lab-themes small {font-size:8px;line-height:1.7;max-width:none;}
 .lab-note {font-size:12px;}
 .lab-page {padding:24px 18px;}
 .lab-preview-content {grid-template-columns:1fr;gap:20px;min-height:0;}
 .lab-preview .lab-orb {display:none;}
 .lab-preview h3 {font-size:clamp(36px,10vw,52px);}
 .lab-preview p {font-size:12px;max-width:100%;line-height:1.8;}
 .lab-preview-cta {font-size:9px;min-height:44px;max-width:100%;white-space:normal;}
 .lab-preview-nav>b {font-size:14px;overflow-wrap:anywhere;}
 .lab-preview-nav>span {display:none;}
 .lab-preview-eyebrow {font-size:8px;line-height:1.7;}
 .lab-preview-bottom {font-size:8px;line-height:1.7;flex-wrap:wrap;}
 .lab-preview.is-mobile {width:min(280px,100%);}
 .lab-preview.is-mobile h3 {font-size:clamp(32px,10vw,44px);}
 .lab-preview.is-mobile[data-type=modern] h3 {font-size:32px;}
 .spiral-heading h2 {font-size:clamp(30px,7.5vw,39px);}
 .spiral-heading .eyebrow {font-size:9px;}
 .spiral-actions>span {font-size:8px;line-height:1.6;}
 .spiral-actions>.skip-collection {font-size:10px;}
 .spiral-enabled .spiral-pin {padding-top:90px;}
 .spiral-enabled .helix-card .project-image {height:clamp(155px,22svh,215px);}
 .spiral-enabled .spiral-story p {font-size:12px;line-height:1.65;}
 .spiral-enabled .spiral-story h3 {font-size:28px;}
 .spiral-enabled .spiral-disclaimer {font-size:9px!important;margin-top:8px;}
 .spiral-navigation {gap:8px;margin-top:10px;}
 .spiral-dots button {min-width:32px;min-height:44px;}
 .experience-dialog {width:100%;height:100dvh;max-height:100dvh;}
 .experience-toolbar {height:auto;min-height:82px;padding:15px 62px 15px 18px;flex-shrink:0;}
 .experience-toolbar .eyebrow {font-size:8px;line-height:1.5;}
 .experience-toolbar h2 {font-size:25px;}
 .experience-toolbar .dialog-close {right:10px;top:17px;}
 .experience-footer {padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:8px;}
 .experience-links {max-width:calc(100% - 125px);}
 .experience-links p {font-size:9px;max-width:none;}
 .experience-links>a {font-size:11px;}
 .experience-footer>a {font-size:12px;min-height:44px;line-height:1.6;display:flex;align-items:center;justify-content:center;}
 #studio-navigator {left:10px;font-size:8px;padding:10px;gap:8px;}
 #studio-navigator>span {display:none;}
 #effects-toggle {right:10px;font-size:8px;padding:10px;}
 #navigator-dialog {padding:30px 22px;}
 #navigator-dialog h2 {font-size:48px;}
 .navigator-links>a>div {font-size:25px;line-height:1.15;}
 .navigator-links small {font-size:12px;}
 footer {display:flex;flex-wrap:wrap;align-items:flex-start;padding-bottom:100px;}
 footer>* {max-width:100%;}
 .closing a {font-size:clamp(42px,10vw,65px);line-height:1.12;}
}
@media(max-width:380px){
 header>.button {font-size:9px;padding:11px 12px;gap:12px;margin-right:42px;}
 .brand-word small {display:none;}
 .hero.service-hero h1 {font-size:clamp(40px,12.5vw,48px);}
 .service-hero-actions {gap:8px;}
 .hero-service-grid .particle-showcase {height:290px;}
 .choice-grid {grid-template-columns:1fr;}
 .lab-themes {grid-template-columns:1fr;}
 .lab-themes>button {min-height:68px;display:flex;gap:12px;align-items:center;}
 .lab-themes small {font-size:9px;}
 .theme-swatches {flex:none;}
 .spiral-heading {display:block;}
 .spiral-actions {margin-top:16px;}
 .experience-footer {padding-inline:10px;}
 .experience-links {max-width:calc(100% - 116px);}
}
@media(pointer:coarse){
 button,.button,a,input,label,summary {-webkit-tap-highlight-color:transparent;}
 .text-link {min-height:44px;}
}
.spiral-controls button {min-width:44px;min-height:44px;}
@media(max-width:760px){
 .spiral-navigation {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
 .spiral-controls {display:flex;align-items:center;gap:10px;}
 .spiral-gallery:not(.spiral-enabled) .helix-scene {grid-template-columns:1fr;gap:24px;}
 .spiral-gallery:not(.spiral-enabled) .helix-card {width:100%;min-width:0;max-width:100%;}
 .spiral-gallery:not(.spiral-enabled) .project-image {height:300px;}
 .spiral-gallery:not(.spiral-enabled) .spiral-heading {display:block;}
}