/* Tattoo Memo V2 — full photographic backdrop, centered transparent glass wizard.
   The native tattoo body is preserved, the request opens as a temporary foreground layer. */
.memo-home .memo-request{
  --req-bg:#0c0c0d;--req-ink:#fff;--req-muted:rgba(255,255,255,.68);
  --req-panel:rgba(15,14,15,.66);--req-choice:rgba(25,23,25,.37);
  --req-outline:rgba(255,255,255,.20);--req-active:rgba(7,7,8,.82);
  position:absolute;inset:0;z-index:12;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;color:#fff;
  background:
    linear-gradient(135deg,rgba(20,15,21,.19),rgba(11,8,12,.35)),
    url("tattoo-welcome.webp") 50% 40%/cover no-repeat,#382928;
  color-scheme:dark;
}
.memo-home .memo-request[hidden]{display:none!important}
.memo-request *{box-sizing:border-box}
.memo-request::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 26% 75%,rgba(202,124,93,.42),transparent 54%),
  linear-gradient(0deg,#0d0b0c66,#15101318 58%,#0d0b0c55);
}
.memo-request-shell{
  width:min(calc(100% - 30px),580px);
  height:min(calc(100dvh - 36px),960px);
  min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(18px,3.8vh,37px) clamp(18px,5vw,43px) clamp(16px,2.7vh,28px);
  border:1px solid rgba(255,255,255,.44);border-radius:clamp(30px,6vw,56px);
  color:var(--req-ink);
  background:var(--req-panel);
  -webkit-backdrop-filter:blur(38px) saturate(152%);
  backdrop-filter:blur(38px) saturate(152%);
  box-shadow:0 24px 70px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.16);
}
.memo-request-header{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:16px;flex:none;min-height:42px}
.request-back,.request-close{
  display:grid;place-items:center;width:36px;height:40px;border:0;
  background:transparent;color:#fff;padding:0;
}
.request-back svg,.request-close svg{width:24px;height:24px}
.request-progress-wrap{position:relative;display:flex;align-items:center;height:32px;min-width:0}
.request-progress{position:absolute;left:0;right:0;height:5px;border-radius:8px;background:#ffffff3d;overflow:hidden}
#request-progress-fill{display:block;height:100%;width:10%;background:#efbc96;border-radius:8px;transition:width .25s}
.request-progress-text{
  position:relative;z-index:1;min-width:52px;height:34px;display:grid;place-items:center;
  margin:auto;border-radius:50px;background:#fff;color:#171717;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  font:700 12px/1 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.memo-request-scroll{
  flex:1;min-height:0;min-width:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:clamp(27px,5.5vh,58px) 1px 18px;
}
.memo-request-scroll::-webkit-scrollbar{display:none}
.memo-request-step{width:100%;animation:request-rise .25s ease both}
.memo-request-step[hidden]{display:none!important}
.request-step-intro{margin:0 0 clamp(23px,4.1vh,38px)}
.request-step-kicker{
  margin:0 0 12px;color:#ffffffb9;
  font:600 10px/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:.19em;
}
.request-step-intro h2{
  margin:0;color:#fff;
  font:600 clamp(30px,8vw,50px)/1.08 var(--memo-display,"Montserrat",Arial,sans-serif);
  letter-spacing:-.06em;text-wrap:balance;
}
.request-step-description{
  color:#ffffffce;font:400 clamp(13px,3.4vw,16px)/1.5 var(--memo-copy,"Roboto",Arial,sans-serif);
  margin:14px 0 0;
}
.memo-request :is(.memo-choice,.request-pill-input,.request-big-input,.memo-upload-button){
  border:1px solid rgba(255,255,255,.14);
  background:var(--req-choice);color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(136%);
  backdrop-filter:blur(14px) saturate(136%);
}
.memo-choice-stack{display:flex;flex-direction:column;gap:11px}
.memo-choice{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:67px;min-width:0;
  padding:17px clamp(18px,4.5vw,26px);
  border-radius:27px;text-align:left;
  font:500 clamp(14px,3.7vw,17px)/1.34 var(--memo-copy,"Roboto",Arial,sans-serif);
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s;
}
.memo-choice:focus-visible{outline-offset:3px}
.memo-choice[aria-pressed=true]{
  background:var(--req-active);border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 #ffffff18;
}
.memo-choice-tick{font-size:18px;opacity:0;flex:none}
.memo-choice[aria-pressed=true] .memo-choice-tick{opacity:1}
.memo-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.memo-choice-grid .memo-choice{min-height:70px;border-radius:24px;padding:12px 15px;font-size:clamp(12px,3.2vw,16px)}
.memo-choice-rail{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:3px 3px 9px;
}
.memo-choice-rail::-webkit-scrollbar{display:none}
.memo-choice-rail .memo-choice{flex:0 0 min(79%,325px);min-height:75px;scroll-snap-align:center}
.memo-photo-rail,.memo-artist-rail{
  display:flex;gap:11px;width:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x;padding:4px 1px 9px;
}
.memo-photo-rail::-webkit-scrollbar,.memo-artist-rail::-webkit-scrollbar{display:none}
.memo-photo-card{
  position:relative;isolation:isolate;
  flex:0 0 clamp(112px,38%,170px);height:clamp(142px,24vh,196px);
  border:2px solid transparent;border-radius:26px;
  overflow:hidden;padding:0;background:#252123;
  scroll-snap-align:start;transition:border-color .18s,transform .18s;
}
.memo-photo-card img,.memo-artist-card img{display:block;width:100%;height:100%;object-fit:cover}
.memo-photo-card[aria-pressed=true]{
  border-color:#fff;transform:translateY(-2px);
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.memo-photo-check,.memo-artist-selected{
  position:absolute;top:10px;right:10px;z-index:2;
  display:grid;place-items:center;width:29px;height:29px;
  background:#fff;color:#101014;border-radius:50%;
  font:700 16px/1 var(--memo-copy,"Roboto",Arial,sans-serif);opacity:0;
}
.memo-photo-card[aria-pressed=true] .memo-photo-check,.memo-artist-card[aria-pressed=true] .memo-artist-selected{opacity:1}
.memo-group-label{
  margin:0 0 12px;color:#ffffffb9;
  font:600 10px/1.4 var(--memo-copy,"Roboto",Arial,sans-serif);letter-spacing:.15em;
}
.memo-group-label--below{margin:22px 0 12px}
.memo-request :is(.request-big-input,.request-pill-input){
  display:block;width:100%;min-width:0;outline:none;
  padding:17px 20px;border-radius:26px;
  -webkit-text-fill-color:#fff;
  font:400 clamp(15px,3.6vw,17px)/1.5 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.memo-request .request-big-input{resize:vertical;min-height:clamp(215px,40vh,320px)}
.memo-request .request-pill-input{min-height:70px}
.memo-request :is(.request-big-input,.request-pill-input)::placeholder{
  color:#ffffffe0;-webkit-text-fill-color:#ffffffe0;
}
.memo-request :is(.request-big-input,.request-pill-input):focus{
  border-color:#ffffffa0;background:rgba(19,17,19,.61);
}
.request-pill-input--below{margin-top:22px}
.memo-upload-button{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;min-height:74px;margin-top:22px;padding:17px 23px;
  border-radius:27px;cursor:pointer;
  font:500 clamp(15px,3.6vw,17px)/1.35 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.memo-upload-plus{font:400 25px/1 var(--memo-copy,"Roboto",Arial,sans-serif)}
.memo-upload-input{position:absolute;width:1px;height:1px;opacity:0}
.request-hint{font:400 11px/1.5 var(--memo-copy,"Roboto",Arial,sans-serif);color:#ffffffb9;margin:12px 0 0}
.request-file-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.request-file-item{
  max-width:100%;display:flex;align-items:center;gap:9px;
  background:#0808085c;border:1px solid #ffffff40;border-radius:16px;padding:6px 10px 6px 6px;
  color:#fff;font:400 11px/1.35 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.request-file-item img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none}
.request-file-item span{display:block;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memo-artist-card{
  position:relative;isolation:isolate;overflow:hidden;min-width:0;
  flex:0 0 clamp(164px,60%,230px);height:clamp(232px,38svh,335px);
  border:2px solid transparent;border-radius:32px;padding:0;
  background:linear-gradient(135deg,#484048,#222025);color:#fff;
  scroll-snap-align:center;transition:transform .2s,border-color .2s;
}
.memo-artist-card::after{
  content:"";position:absolute;inset:36% 0 0;
  background:linear-gradient(transparent,#050505ed);pointer-events:none;
}
.memo-artist-card[aria-pressed=true]{border-color:#fff;transform:translateY(-2px)}
.memo-artist-card-name{
  position:absolute;z-index:1;bottom:28px;left:12px;right:12px;
  color:#fff;font:600 clamp(18px,4.8vw,24px)/1.1 var(--memo-display,"Montserrat",Arial,sans-serif);
  letter-spacing:-.03em;text-align:center;
}
.memo-artist-card-hint{
  position:absolute;z-index:1;bottom:10px;left:12px;right:12px;
  color:#ffffffb6;font:400 10px/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
  text-align:center;
}
.memo-artist-card--advice{display:grid;place-items:center;background:rgba(16,16,18,.53);border-color:rgba(255,255,255,.15)}
.memo-artist-card--advice::after{display:none}
.memo-artist-card--advice .memo-artist-card-name{position:static;padding:16px}
.memo-contact-fields{display:flex;flex-direction:column;gap:12px}
.memo-contact-consent{
  display:flex;align-items:center;gap:13px;margin:24px 0 6px;
  color:#fff;font:400 13px/1.5 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.memo-contact-consent input{appearance:auto;accent-color:#111;flex:0 0 23px;width:23px;height:23px;margin:0}
.memo-request-footer{flex:none;padding-top:10px;text-align:center}
.request-prev-button{display:none}
.memo-request .request-next-button{
  display:grid;place-items:center;width:100%;min-height:65px;border:0;
  border-radius:26px;padding:15px 20px;background:#fff;color:#171719;
  box-shadow:0 8px 26px #0003;
  font:600 16px/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.request-footer-note{
  margin:11px 0 0;color:#ffffffc0;
  font:400 11px/1.3 var(--memo-copy,"Roboto",Arial,sans-serif);
}
.memo-review-grid{display:flex;flex-direction:column;gap:10px}
.memo-review-card{
  width:100%;padding:16px 19px;border-radius:22px;
  background:var(--req-choice);border:1px solid #ffffff38;overflow-wrap:anywhere;
}
.memo-review-title{margin:0 0 7px;color:#ffffffb9;font:600 10px/1.3 var(--memo-copy,"Roboto",Arial,sans-serif);letter-spacing:.13em}
.memo-review-value{margin:0;color:#fff;font:400 15px/1.45 var(--memo-copy,"Roboto",Arial,sans-serif);white-space:pre-wrap}
.memo-preview-warning{padding:18px 5px 4px;color:#ffffffb9;font:400 12px/1.5 var(--memo-copy,"Roboto",Arial,sans-serif)}
@keyframes request-rise{from{opacity:.55;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:480px){
  .memo-request-shell{
    width:calc(100% - 20px);height:calc(100dvh - 28px);
    border-radius:34px;padding:17px 19px 17px;
  }
  .memo-request-scroll{padding-top:31px}
  .request-step-intro{margin-bottom:25px}
  .request-step-intro h2{font-size:clamp(29px,7.5vw,40px)}
  .memo-choice{min-height:63px;border-radius:25px}
  .memo-request .request-next-button{min-height:60px;border-radius:24px}
}
@media(max-height:690px){
  .memo-request-shell{height:calc(100dvh - 15px);padding-block:12px}
  .memo-request-scroll{padding-top:17px}
  .request-step-intro{margin-bottom:17px}
  .memo-choice{min-height:57px}
  .memo-request .request-next-button{min-height:53px}
  .memo-request .request-big-input{min-height:165px}
  .memo-photo-card{height:135px}
  .memo-artist-card{height:210px}
}
@media(prefers-reduced-motion:reduce){.memo-request-step{animation:none}.memo-choice,.memo-photo-card,.memo-artist-card,#request-progress-fill{transition:none}}


/* END OF TATTOO PAGE: the same wizard is the final section after Studio.
   Book Now jumps to it, without rendering a duplicate or trapping document scroll. */
.memo-home .memo-inside>.memo-request{
  position:relative;inset:auto;z-index:1;
  display:grid;place-items:center;
  width:100%;height:100svh;min-height:100svh;
  scroll-snap-align:start;scroll-snap-stop:always;
}
@supports(height:100dvh){
  .memo-home .memo-inside>.memo-request{height:100dvh;min-height:100dvh}
}
.memo-inside:not([data-discipline="tattoo"])>.memo-request{display:none!important}
/* If the step fits in the card, it stays vertically centered and doesn't scroll.
   Only longer steps and the final review need internal scrolling. */
.memo-home .memo-inside>.memo-request .memo-request-scroll{
  display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;
}
.memo-home .memo-inside>.memo-request .memo-request-step:not([hidden]){
  margin-block:auto;
}

/* Tattoo intake status: one uncluttered confirmation, matching the same glass UI. */
.memo-request .request-anti-spam{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.memo-intake-feedback{margin:17px 0 0;padding:15px 18px;border:1px solid #ffffff46;border-radius:20px;background:rgba(18,18,20,.44);font:400 13px/1.5 var(--memo-copy,"Roboto",Arial,sans-serif);color:#fff;overflow-wrap:anywhere}
.memo-intake-feedback[data-state="error"]{border-color:#ffbf9a99}
.memo-intake-feedback[data-state="success"]{border-color:#ffffff9e;background:rgba(15,15,17,.62)}
.memo-request .request-next-button:disabled{opacity:.55;cursor:default}

/* Guided, accessible validation without changing the existing glass style. */
.memo-request-step-error{
  display:block;margin:0 0 10px;padding:11px 14px;
  border:1px solid rgba(255,194,157,.65);border-radius:14px;
  background:rgba(94,39,29,.72);color:#fff;
  font:500 12px/1.45 var(--memo-copy,"Roboto",Arial,sans-serif);
  text-align:left
}
.memo-request-step-error[hidden]{display:none!important}
.memo-request [aria-invalid="true"],.memo-request [data-invalid="true"]{
  border-color:#ffb999!important;outline:2px solid rgba(255,185,153,.35);outline-offset:2px
}
.memo-request .memo-artist-card:disabled{
  opacity:.46;cursor:not-allowed;filter:grayscale(.5)
}
.memo-request .memo-artist-card:disabled .memo-artist-card-hint{
  color:#fff;opacity:1;text-transform:none
}
.memo-nomi-credit{
  position:absolute;left:0;right:0;bottom:3px;z-index:2;
  margin:0;text-align:center;color:rgba(255,255,255,.72);
  font:600 10px/1.25 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:.18em;pointer-events:none;text-shadow:0 2px 8px #0009
}
.memo-nomi-credit span:first-child{padding-inline:7px;font-size:14px;vertical-align:-1px}
.memo-nomi-credit span:last-child{letter-spacing:.25em}