/* Plate 8, "Free design". Scoped to .hands; reads tokens from /v2/system.css. */

.hands{
  --win-w:min(100%, 35rem);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;justify-items:center;
  min-height:100svh;padding:clamp(44px,7.5vh,84px) var(--g) clamp(28px,5vh,52px);
  overflow:hidden;scroll-margin-top:0;
}
.hands-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* without WebGL2: hands.js places the two photographs with the same layout; lighten drops their black ground */
.hands.no-gl .hands-canvas{display:none}
.hands-flat{position:absolute;left:0;top:0;z-index:0;max-width:none;transform-origin:0 0;mix-blend-mode:lighten;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.hands-flat.on{opacity:1}
.win [hidden]{display:none !important}

/* ---------- copy ---------- */
.hands-copy{position:relative;z-index:2;text-align:center;max-width:100%}
.hands-title{
  font-family:var(--didone);font-weight:420;font-stretch:62.5%;
  font-size:clamp(58px,6.6vw,132px);line-height:.92;letter-spacing:-.012em;
  color:var(--marble);text-wrap:balance;
}
.hands-title span{white-space:nowrap}
.hands-lede{
  margin:clamp(14px,2vh,22px) auto 0;max-width:36em;
  font:400 clamp(18px,1.25vw,22px)/1.42 var(--garamond);color:var(--marble-2);text-wrap:balance;
}
.hands-price{margin-top:6px;font:italic 400 clamp(18px,1.25vw,22px)/1.4 var(--garamond);color:var(--marble)}

/* ---------- the window ---------- */
.win{
  position:relative;z-index:3;width:var(--win-w);margin:clamp(28px,5vh,56px) 0;align-self:center;
  background:var(--night);border:2px solid var(--marble);color:var(--marble);
  transition:width .7s var(--ease);scroll-margin-top:clamp(24px,8vh,80px);
}
.win[data-at="2"]{--win-w:min(100%, 52rem)}
.win-bar{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px 0 12px;border-bottom:2px solid var(--marble)}
.win-title{font:400 24px/1 var(--pixel);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;transform:translateY(-1px)}
.win-stripes{flex:1;align-self:stretch;margin:9px 0;background:repeating-linear-gradient(to bottom,var(--marble) 0 2px,transparent 2px 4px);opacity:.85;transition:background .4s}
.win-btns{display:flex;gap:5px}
.win-btns svg{width:22px;height:22px;fill:var(--marble);border:2px solid var(--marble);padding:1px}
.is-lit .win{animation:win-lit 1.8s var(--ease) both}
.is-lit .win-stripes{background:repeating-linear-gradient(to bottom,var(--lagoon) 0 2px,transparent 2px 4px)}
@keyframes win-lit{0%{border-color:var(--lagoon);background:#0a2a28}35%{border-color:var(--lagoon)}100%{border-color:var(--marble);background:var(--night)}}

.win-body{padding:22px 24px 24px}
.win-step:focus,.win [data-focus]:focus{outline:none}
.win-title.is-typing::after{content:"";display:inline-block;width:.42em;height:.72em;margin-left:2px;background:var(--lagoon);vertical-align:-.02em;animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.win-label{display:block;margin-bottom:8px;font:400 17px/1.25 var(--garamond);color:var(--marble-2)}
.win-label i{color:var(--ash)}
.win input[type="text"],.win textarea{
  display:block;width:100%;min-width:0;height:50px;padding:0 14px;border:2px solid var(--marble-2);border-radius:0;
  background:var(--night);color:var(--marble);caret-color:var(--lagoon);
  font:500 18px/1 var(--mono);letter-spacing:.02em;outline:none;-webkit-appearance:none;appearance:none;
}
.win .win-contact{height:56px;font-size:21px}
.win textarea{height:auto;min-height:100px;padding:11px 14px;resize:vertical;font:400 19px/1.4 var(--garamond);letter-spacing:0}
.win input::placeholder,.win textarea::placeholder{color:var(--ash);opacity:1}
.win input:focus,.win textarea:focus{border-color:var(--lagoon)}
.win input[aria-invalid="true"]{border-color:var(--flame)}
.win-msg{margin-top:20px}
.win textarea + .win-go{width:100%;margin-top:16px}
.win-go{
  flex:none;height:56px;padding:0 20px;border:2px solid var(--marble);border-radius:0;
  background:var(--marble);color:var(--night);cursor:pointer;
  font:600 19px/1 var(--garamond);letter-spacing:.005em;white-space:nowrap;
  box-shadow:4px 4px 0 var(--marble-shade);transition:background .15s,border-color .15s;
}
.win-go:hover,.win-go:focus-visible{background:var(--lagoon);border-color:var(--lagoon)}
.win-go:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--marble-shade)}
.win-go:disabled{cursor:progress;background:var(--marble-2);border-color:var(--marble-2)}
.win-err{min-height:0;margin-top:10px;font:400 16px/1.35 var(--garamond);color:#FF6A5C}
.win-err:empty{display:none}
.win-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.win-got{font-family:var(--didone);font-stretch:62.5%;font-weight:420;font-size:clamp(30px,2.4vw,40px);line-height:1;color:var(--marble)}
.win-note{margin:10px 0 16px;font:400 16px/1.3 var(--garamond);color:var(--marble-2)}
.win-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px;margin-bottom:22px}
.win-field{display:block;min-width:0}
.win-kinds{order:1;grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0;min-width:0}
.win-kinds legend{padding:0;float:left;width:100%}
.win-kinds label{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 12px;border:2px solid var(--night-3);cursor:pointer;font:400 16px/1.15 var(--garamond);color:var(--marble)}
.win-kinds input{position:absolute;opacity:0;width:1px;height:1px}
.win-kinds label::before{content:"";flex:none;width:14px;height:14px;box-shadow:inset 0 0 0 2px var(--marble-2)}
.win-kinds label:has(input:checked){border-color:var(--lagoon)}
.win-kinds label:has(input:checked)::before{background:var(--lagoon);box-shadow:inset 0 0 0 2px var(--lagoon),inset 0 0 0 4px var(--night)}
.win-kinds label:has(input:focus-visible){outline:2px solid var(--lagoon);outline-offset:2px}
.win-done p + p{margin-top:12px;font:400 19px/1.4 var(--garamond);color:var(--marble-2)}
.win-done a{color:var(--lagoon);text-underline-offset:4px}

/* ---------- direct line ---------- */
.hands-direct{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 22px;margin-top:clamp(18px,3vh,30px);font:500 15px/1 var(--mono);letter-spacing:.02em}
.hands-direct a{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--marble)}
.hands-direct a:hover{color:var(--lagoon)}
.hands-direct svg{width:26px;height:26px;fill:currentColor}
.hands-direct .hands-num{color:var(--marble-2);padding-left:22px;border-left:1px solid var(--brass)}

/* ---------- narrow landscape: a slimmer window so the hands keep their room ---------- */
@media (min-width:760px) and (max-width:1179px){
  .win{--win-w:min(100%, 25rem)}
  .win-go{width:100%}
  .win[data-at="2"]{--win-w:min(100%, 36rem)}
  .win-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .win-grid .win-field:first-child{grid-column:1 / -1}
}

/* ---------- phones and portrait tablets: one diagonal, the window between the fingertips ----------
   hands.js reads the same query (STACK) to switch its layout. */
@media (max-width:759px), (max-width:1099px) and (max-aspect-ratio:1/1){
  .hands{justify-items:stretch;grid-template-rows:auto;padding:56px max(18px, var(--g)) 36px}
  .hands-copy{text-align:left}
  .hands-title{font-size:min(23vw,132px);line-height:.88;text-wrap:initial}
  .hands-title span{display:block;white-space:normal}
  .hands-lede{margin:16px 0 0;font-size:19px;max-width:20em;text-wrap:pretty}
  .hands-price{font-size:19px}
  .win,.win[data-at="2"]{--win-w:min(100%, 35rem);justify-self:center;margin:clamp(210px, 32vw, 300px) 0 0}
  .win-body{padding:18px 16px 18px}
  .win-go{width:100%;font-size:20px;height:58px}
  .win .win-contact{height:58px}
  .win-grid{grid-template-columns:minmax(0,1fr)}
  .win-grid .win-field:first-child{grid-column:auto}
  .win-kinds{order:0;display:grid;grid-template-columns:1fr 1fr}
  .win-kinds legend{grid-column:1 / -1}
  .win-kinds label{padding:0 10px}
  .hands-direct{flex-direction:column;align-items:flex-end;justify-self:end;margin-top:34px;gap:0;font-size:16px}
  .hands-direct a{flex-direction:row-reverse}
  .hands-direct .hands-num{margin-top:10px;padding:14px 0 0;border-left:0;border-top:1px solid var(--brass)}
}

@media (prefers-reduced-motion:reduce){
  .win{transition:none}
  .is-lit .win{animation:none}
}