.craft-showcase {
  --craft-word-x: 0px;
  --craft-word-y: 0px;
  --craft-slide-shift: 0px;
  --craft-rear-x: 0px;
  --craft-rear-y: 0px;
  --craft-front-x: 0px;
  --craft-front-y: 0px;
  --craft-reticle-x: 0px;
  --craft-reticle-y: 0px;
  position: relative;
  isolation: isolate;
  height: clamp(830px, 96svh, 1000px);
  overflow: hidden;
  background: #f7f6f3;
  color: #0a0a0a;
}

.craft-words { position: absolute; z-index: 1; inset: 0; pointer-events: none; transform: translate3d(calc(var(--craft-word-x) + var(--craft-slide-shift)), var(--craft-word-y), 0); transition: transform .35s ease-out; }
.craft-word { position: absolute; display: block; width: max-content; font-family: Arial, Helvetica, sans-serif; font-size: clamp(100px, 11.8vw, 186px); font-weight: 400; letter-spacing: -.095em; line-height: .78; white-space: nowrap; }
.craft-word--precise { top: 39%; left: 2%; color: #b8b8b8; }
.craft-word--clean { top: 39%; right: 5%; color: #080808; }
.craft-word--lasting { top: 55%; left: 2%; color: #080808; }
.craft-word--finishes { top: 55%; right: 2%; color: #b8b8b8; }

.craft-trust { position: absolute; z-index: 6; top: 5.3%; left: 5.7%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; aspect-ratio: 1; border-radius: 50%; background: #fff; text-align: center; }
.craft-trust strong { display: block; margin-bottom: 3px; font-size: 51px; font-weight: 400; letter-spacing: -.075em; line-height: 1; }
.craft-trust span { font-size: 16px; line-height: 1.34; letter-spacing: -.025em; }

.craft-statement { position: absolute; z-index: 6; top: 3.4%; right: 2.8%; display: grid; grid-template-columns: 116px 1fr; gap: 28px; width: min(38vw, 520px); min-height: 192px; padding: 35px 30px 29px; border-radius: 32px 32px 48px 32px; background: #fff; }
.craft-statement-number { align-self: start; font-size: 56px; line-height: .95; letter-spacing: -.075em; }
.craft-statement-copy { padding-left: 30px; border-left: 1px solid #dedddb; }
.craft-statement h3 { margin: 0 0 13px; font-size: 22px; font-weight: 500; line-height: 1.07; letter-spacing: -.045em; }
.craft-statement p { max-width: 285px; margin: 0; color: #3c3c3c; font-size: 15px; line-height: 1.25; letter-spacing: -.018em; }
.craft-statement.is-changing .craft-statement-copy, .craft-statement.is-changing .craft-statement-number { animation: craft-stat-arrive .55s ease-out; }
@keyframes craft-stat-arrive { from { opacity: .2; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

.craft-reticle { position: absolute; z-index: 3; top: 33%; right: 16%; width: 160px; aspect-ratio: 1; border: 1px solid rgba(22,22,22,.32); border-radius: 50%; pointer-events: none; transform: translate3d(var(--craft-reticle-x), var(--craft-reticle-y), 0); transition: transform .28s ease-out, border-color .3s ease, box-shadow .3s ease; }
.craft-reticle::before, .craft-reticle::after { content: ""; position: absolute; z-index: 1; background: rgba(22,22,22,.25); transition: box-shadow .3s ease; }
.craft-reticle::before { width: calc(100% + 84px); height: 1px; top: 50%; left: -42px; }
.craft-reticle::after { width: 1px; height: calc(100% + 84px); left: 50%; top: -42px; }
.craft-reticle-glow { position: absolute; inset: -42px; border-radius: 50%; background: radial-gradient(circle, rgba(197,161,105,.42) 0%, rgba(197,161,105,.24) 34%, rgba(197,161,105,0) 72%); opacity: 0; transition: opacity .3s ease; }
.craft-reticle-core { position: absolute; z-index: 2; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #0c0c0c; transform: translate(-50%, -50%); }
.craft-showcase.is-pointer-active .craft-reticle { border-color: rgba(72,60,42,.53); box-shadow: 0 0 38px rgba(197,161,105,.24), inset 0 0 20px rgba(197,161,105,.12); will-change: transform; }
.craft-showcase.is-pointer-active .craft-reticle-glow { opacity: 1; }
.craft-showcase.is-pointer-active .craft-reticle::before, .craft-showcase.is-pointer-active .craft-reticle::after { box-shadow: 0 0 9px rgba(197,161,105,.36); }

.craft-stage { position: absolute; z-index: 4; top: 50%; left: 50%; width: 780px; height: 650px; outline: none; cursor: grab; touch-action: pan-y; transform: translate(-50%, -50%); }
.craft-stage:active { cursor: grabbing; }
.craft-stage:focus-visible { outline: 1px dashed #4d4d4d; outline-offset: 3px; }
.craft-panel { position: absolute; top: 50%; left: 50%; width: 375px; height: 560px; margin: -280px 0 0 -187.5px; overflow: hidden; border-radius: 32px 60px 32px 62px / 45px 90px 44px 54px; background: #d9d3cb; box-shadow: 0 15px 30px rgba(30,24,19,.13); opacity: 0; pointer-events: none; backface-visibility: hidden; transition: transform .7s cubic-bezier(.22,.75,.18,1), opacity .55s ease; }
.craft-panel[data-position="active"], .craft-panel[data-position="previous"], .craft-panel[data-position="next"] { will-change: transform, opacity; }
.craft-stage.is-initializing .craft-panel { transition: none; }
.craft-panel img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.craft-panel[data-position="active"] { z-index: 5; opacity: 1; transform: translate3d(calc(-8px + var(--craft-front-x)), var(--craft-front-y), 0) rotate(7deg) scale(1); }
.craft-panel[data-position="previous"] { z-index: 3; opacity: 1; transform: translate3d(calc(-105px + var(--craft-rear-x)), calc(55px + var(--craft-rear-y)), 0) rotate(-12deg) scale(.9); }
.craft-panel[data-position="next"] { z-index: 2; opacity: 1; transform: translate3d(calc(115px + var(--craft-rear-x)), calc(95px + var(--craft-rear-y)), 0) rotate(10deg) scale(.9); }
.craft-panel[data-position="hidden-left"] { z-index: 1; opacity: 0; transform: translate3d(-330px, 95px, 0) rotate(-18deg) scale(.77); }
.craft-panel[data-position="hidden-right"] { z-index: 1; opacity: 0; transform: translate3d(330px, 95px, 0) rotate(18deg) scale(.77); }
.craft-project-label { position: absolute; z-index: 6; top: 67%; left: 50%; min-width: 210px; padding: 12px 16px 11px; border: 1px solid rgba(21,21,21,.12); border-left: 2px solid #171717; border-radius: 2px; background: rgba(247,246,242,.94); box-shadow: 0 8px 20px rgba(20,20,20,.11); pointer-events: none; transform: translate(-50%, -50%); }
.craft-project-label strong { display: block; margin-bottom: 5px; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 400; line-height: 1.13; letter-spacing: -.035em; white-space: nowrap; }
.craft-project-label span { display: block; color: #4a4844; font-size: 9px; line-height: 1.2; letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; }

.craft-controls { position: absolute; z-index: 7; bottom: 8.7%; left: 50%; display: flex; align-items: center; justify-content: space-between; width: 620px; transform: translateX(-50%); }
.craft-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #525252; border-radius: 50%; color: #0a0a0a; background: #f7f6f3; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.craft-arrow--next { color: #fff; background: #090909; border-color: #090909; }
.craft-arrow:hover { transform: scale(1.07); }
.craft-arrow--previous:hover { background: #e6e3df; }
.craft-arrow--next:hover { background: #333; }
.craft-arrow:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; }
.craft-arrow svg { width: 22px; height: 22px; stroke-width: 1.65; transition: transform .25s ease; }
.craft-arrow--previous:hover svg { transform: translateX(-3px); }
.craft-arrow--next:hover svg { transform: translateX(3px); }
.craft-pagination { display: flex; gap: 8px; align-items: center; }
.craft-pagination span { width: 6px; height: 6px; border: 1px solid #aaa9a6; border-radius: 50%; background: transparent; transition: background-color .35s ease, transform .35s ease; }
.craft-pagination span.is-active { border-color: #0b0b0b; background: #0b0b0b; transform: scale(1.13); }

.craft-side-note { position: absolute; z-index: 5; bottom: 13%; margin: 0; font-size: 11px; line-height: 1.7; letter-spacing: .2em; }
.craft-side-note--left { left: 3%; }
.craft-side-note--right { right: 3%; }
.craft-side-note span { display: block; width: 36px; height: 1px; margin-top: 21px; background: #8b8986; }
.craft-footnotes { position: absolute; z-index: 5; left: 3%; right: 3%; bottom: 2.8%; display: flex; justify-content: space-between; color: #696764; font-size: 9px; letter-spacing: .22em; }

@media (max-width: 1200px) {
  .craft-word { font-size: clamp(100px, 11vw, 150px); }
  .craft-trust { width: 175px; }
  .craft-trust strong { font-size: 43px; }
  .craft-trust span { font-size: 13px; }
  .craft-statement { grid-template-columns: 90px 1fr; gap: 17px; width: 410px; min-height: 157px; padding: 25px; }
  .craft-statement-number { font-size: 45px; }
  .craft-statement-copy { padding-left: 17px; }
  .craft-statement h3 { font-size: 18px; margin-bottom: 9px; }
  .craft-statement p { font-size: 13px; }
  .craft-stage { top: 52%; width: 700px; height: 590px; }
  .craft-panel { width: 330px; height: 495px; margin: -247.5px 0 0 -165px; }
  .craft-panel[data-position="previous"] { transform: translate3d(calc(-100px + var(--craft-rear-x)), calc(45px + var(--craft-rear-y)), 0) rotate(-12deg) scale(.9); }
  .craft-panel[data-position="next"] { transform: translate3d(calc(110px + var(--craft-rear-x)), calc(80px + var(--craft-rear-y)), 0) rotate(10deg) scale(.9); }
  .craft-panel[data-position="hidden-left"] { transform: translate3d(-290px, 80px, 0) rotate(-18deg) scale(.77); }
  .craft-panel[data-position="hidden-right"] { transform: translate3d(290px, 80px, 0) rotate(18deg) scale(.77); }
  .craft-project-label { top: 67%; }
  .craft-controls { width: 535px; }
}

@media (max-width: 900px) {
  .craft-showcase { height: 790px; }
  .craft-word { font-size: clamp(80px, 11.5vw, 105px); }
  .craft-word--precise, .craft-word--clean { top: 43%; }
  .craft-word--lasting, .craft-word--finishes { top: 56%; }
  .craft-trust { top: 4%; left: 4%; width: 145px; }
  .craft-trust strong { font-size: 36px; }
  .craft-trust span { font-size: 11px; }
  .craft-statement { top: 3%; right: 3%; width: 335px; min-height: 145px; grid-template-columns: 67px 1fr; gap: 12px; padding: 22px 18px; border-radius: 24px 24px 34px 24px; }
  .craft-statement-number { font-size: 35px; }
  .craft-statement-copy { padding-left: 12px; }
  .craft-statement h3 { font-size: 15px; }
  .craft-statement p { font-size: 11px; }
  .craft-reticle { width: 112px; right: 11%; top: 34%; }
  .craft-stage { top: 53%; width: 600px; height: 520px; }
  .craft-panel { width: 290px; height: 435px; margin: -217.5px 0 0 -145px; }
  .craft-panel[data-position="previous"] { transform: translate3d(calc(-90px + var(--craft-rear-x)), calc(38px + var(--craft-rear-y)), 0) rotate(-12deg) scale(.9); }
  .craft-panel[data-position="next"] { transform: translate3d(calc(100px + var(--craft-rear-x)), calc(72px + var(--craft-rear-y)), 0) rotate(10deg) scale(.9); }
  .craft-panel[data-position="hidden-left"] { transform: translate3d(-240px, 70px, 0) rotate(-18deg) scale(.77); }
  .craft-panel[data-position="hidden-right"] { transform: translate3d(240px, 70px, 0) rotate(18deg) scale(.77); }
  .craft-project-label { top: 68%; min-width: 195px; padding: 10px 13px; }
  .craft-project-label strong { font-size: 14px; }
  .craft-project-label span { font-size: 8px; }
  .craft-controls { width: 460px; bottom: 7.5%; }
  .craft-side-note { bottom: 14%; font-size: 9px; }
}

@media (max-width: 680px) {
  .craft-showcase { height: 1030px; }
  .craft-word { font-size: clamp(46px, 14vw, 80px); letter-spacing: -.07em; }
  .craft-word--precise { top: 17%; left: 5%; right: auto; }
  .craft-word--clean { top: 24%; right: 5%; left: auto; }
  .craft-word--lasting { top: 70%; left: 5%; right: auto; }
  .craft-word--finishes { top: 78%; right: 5%; left: auto; }
  .craft-trust { top: 25px; left: 18px; width: 112px; }
  .craft-trust strong { font-size: 29px; }
  .craft-trust span { font-size: 9px; }
  .craft-statement { top: 19px; right: 15px; width: min(230px, calc(100% - 156px)); min-height: 134px; grid-template-columns: 44px 1fr; gap: 8px; padding: 17px 13px; border-radius: 20px 20px 28px 20px; }
  .craft-statement-number { font-size: 27px; }
  .craft-statement-copy { padding-left: 8px; }
  .craft-statement h3 { margin-bottom: 7px; font-size: 12px; }
  .craft-statement p { font-size: 10px; line-height: 1.2; }
  .craft-reticle { top: 32%; right: 9%; width: 80px; }
  .craft-reticle::before { width: calc(100% + 42px); left: -21px; }
  .craft-reticle::after { height: calc(100% + 42px); top: -21px; }
  .craft-stage { top: 255px; left: 0; width: 100%; height: 465px; transform: none; }
  .craft-panel { width: 235px; height: 352.5px; margin: -176.25px 0 0 -117.5px; border-radius: 24px 45px 24px 44px / 32px 65px 34px 40px; }
  .craft-panel[data-position="previous"] { transform: translate3d(calc(-112px + var(--craft-rear-x)), calc(42px + var(--craft-rear-y)), 0) rotate(-12deg) scale(.88); }
  .craft-panel[data-position="next"] { transform: translate3d(calc(112px + var(--craft-rear-x)), calc(65px + var(--craft-rear-y)), 0) rotate(10deg) scale(.88); }
  .craft-panel[data-position="hidden-left"] { transform: translate3d(-205px, 65px, 0) rotate(-18deg) scale(.77); }
  .craft-panel[data-position="hidden-right"] { transform: translate3d(205px, 65px, 0) rotate(18deg) scale(.77); }
  .craft-project-label { top: 68%; min-width: 165px; padding: 8px 10px; }
  .craft-project-label strong { margin-bottom: 4px; font-size: 12px; }
  .craft-project-label span { font-size: 7px; }
  .craft-controls { bottom: 128px; width: 220px; }
  .craft-arrow { width: 45px; height: 45px; }
  .craft-arrow svg { width: 19px; height: 19px; }
  .craft-side-note { bottom: 53px; font-size: 8px; line-height: 1.55; letter-spacing: .14em; }
  .craft-side-note--left { left: 18px; }
  .craft-side-note--right { right: 18px; }
  .craft-side-note span { width: 25px; margin-top: 9px; }
  .craft-footnotes { left: 18px; right: 18px; bottom: 14px; font-size: 7px; letter-spacing: .08em; }
}

@media (max-width: 380px) {
  .craft-trust { left: 14px; width: 94px; }
  .craft-trust strong { font-size: 25px; }
  .craft-trust span { font-size: 8px; }
  .craft-statement { right: 10px; width: min(190px, calc(100% - 128px)); grid-template-columns: 38px 1fr; padding: 15px 10px; }
  .craft-statement-number { font-size: 23px; }
  .craft-statement h3 { font-size: 10px; }
  .craft-statement p { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .craft-words, .craft-reticle, .craft-reticle-glow, .craft-panel, .craft-arrow, .craft-arrow svg, .craft-pagination span { transition: none !important; }
  .craft-statement.is-changing .craft-statement-copy, .craft-statement.is-changing .craft-statement-number { animation: none !important; }
}