/* STUDIO MEMO / mobile-first app — isolated from existing site pages */
:root{color-scheme:dark;--white:#f7f3ed;--warm:#d4c3b2;--black:#10100f;--pad:clamp(24px,6vw,92px);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{background:#080808;scrollbar-color:#464039 #080808}
body{margin:0;background:#080808;color:var(--white);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #f9ede0;outline-offset:4px}
[hidden]{display:none!important}

/* Original entry drawing and scroll scene — retained as-is. */
.entry-run{height:100svh}
.entry-overlay{position:fixed;inset:0;z-index:7;isolation:isolate;background:#080808;color:#fff}
.entry-overlay .scene{position:absolute;width:100%;height:100%;background:#fff;filter:grayscale(1) invert(1);opacity:.61}
.entry-caption{position:absolute;inset:auto 0 0;padding:13vh 6vw max(7svh,28px);text-align:center;background:linear-gradient(transparent,#060606d9)}
.entry-caption .overline{display:block;margin-bottom:8px;color:#c7c6b6;font-size:10px;letter-spacing:.17em;font-weight:620;text-transform:uppercase}
.entry-caption p{font-size:clamp(48px,7vw,96px);letter-spacing:-.07em;line-height:1;margin:8px 0 20px}
.entry-open{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 24px;color:#f5f5f5;border:1px solid #555;border-radius:50px;background:#222;text-decoration:none}
.entry-open:hover{background:#333}

/* One app viewport follows the entrance; no other pages or site navigation. */
.discovery{height:100svh;min-height:0;position:relative;isolation:isolate;overflow:hidden;background:#171411}
.slides-stage,.slides-track,.memo-slide{height:100%;min-height:0}
.slides-stage{overflow:hidden;touch-action:pan-y}
.slides-track{display:flex;width:100%;transition:transform 480ms cubic-bezier(.2,.72,.15,1);will-change:transform}
.memo-slide{flex:0 0 100%;min-width:0;position:relative;isolation:isolate;background:#201b18;overflow:hidden}
.slide-backdrop,.slide-shade,.welcome-backdrop,.welcome-shade{position:absolute;inset:0;pointer-events:none}
.slide-backdrop,.welcome-backdrop{z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat}
.slide-shade,.welcome-shade{z-index:-1;background:linear-gradient(180deg,#0a090929 0%,#0b09091a 29%,#0c0a0ab0 59%,#080808f5 100%)}
.memo-slide--tattoo .slide-backdrop{background-image:url("tattoo-hero.webp");background-position:48% 32%}
.memo-slide--hair .slide-backdrop{background:radial-gradient(circle at 64% 17%,#b4a39473 0,transparent 40%),linear-gradient(152deg,#51443b 0%,#3a322e 44%,#12110f 100%)}
.memo-slide--piercing .slide-backdrop{background:radial-gradient(ellipse at 78% 28%,#c1a78f9a,transparent 35%),radial-gradient(ellipse at 13% 59%,#7a665d,transparent 44%),linear-gradient(155deg,#554740,#241d19 70%,#121110)}
.memo-slide--hair .slide-shade,.memo-slide--piercing .slide-shade{background:linear-gradient(180deg,#100d0b10,#100d0b45 33%,#090807e8)}
.slide-inner,.welcome-inner{height:100%;padding:max(30px,env(safe-area-inset-top)) var(--pad) max(26px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between}
.slide-header,.welcome-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:48px}
.studio-brand{font-weight:560;font-size:20px;line-height:1;letter-spacing:.08em}
.studio-brand span{display:block;font-size:9px;font-weight:500;letter-spacing:.29em;margin-top:7px;color:#efdfcf}
.slide-count{font-size:11px;letter-spacing:.15em;color:#ecdfd5}
.slide-bottom{max-width:590px;width:100%;display:flex;flex-direction:column;align-items:flex-start}
.slide-kicker,.welcome-kicker{margin:0 0 8px;font-size:10px;letter-spacing:.22em;font-weight:650;color:#e9dbcf}
.slide-title{font-size:clamp(68px,11vw,112px);letter-spacing:-.077em;font-weight:500;line-height:.94;margin:4px 0 15px;text-wrap:balance}
.period{color:#d5bc9b}
.slide-desc{color:#eee1d4;font-size:clamp(15px,2vw,18px);line-height:1.48;max-width:34ch;margin:0 0 27px;text-wrap:pretty}
.slide-dots{display:flex;align-items:center;gap:8px;min-height:20px;margin-bottom:19px}
.slide-dot{background:#ffffff6b;min-width:9px;width:9px;height:5px;border:0;border-radius:8px;padding:0;transition:background .2s,width .2s}
.slide-dot[aria-current=true]{width:32px;background:#fff}
.slide-enter{width:min(100%,420px);border:1px solid #ffffff63;border-radius:100px;display:grid;grid-template-columns:52px 1fr 23px;align-items:center;gap:10px;padding:7px 15px 7px 7px;min-height:66px;background:#f7f3ed33;color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:left;letter-spacing:.01em;font-size:15px;font-weight:570;transition:background .2s}
.slide-enter:hover,.slide-enter:focus-visible{background:#f7f3ed4d}
.round-symbol{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#f5f1ea;color:#261d18;font-size:24px;font-weight:350}
.enter-chevron{font-size:28px;text-align:right;color:#f1e5da;font-weight:300}

/* Each choice opens an intentionally self-contained welcome screen. */
.memo-welcome{position:absolute;inset:0;z-index:3;background:#221d1a;opacity:0;transform:translateY(22px);pointer-events:none;transition:opacity 360ms ease,transform 360ms ease;isolation:isolate}
.memo-welcome.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.memo-welcome[data-discipline="tattoo"] .welcome-backdrop{background-image:url("tattoo-welcome.webp");background-position:47% 43%}
.memo-welcome[data-discipline="hair"] .welcome-backdrop{background:radial-gradient(circle at 70% 28%,#ad918b85,transparent 38%),linear-gradient(145deg,#776252,#392a23 55%,#161312)}
.memo-welcome[data-discipline="piercing"] .welcome-backdrop{background:radial-gradient(circle at 60% 34%,#c9ab9a81,transparent 42%),linear-gradient(145deg,#71625a,#2a2321 63%,#100d0b)}
.welcome-shade{background:linear-gradient(180deg,#09080763 0%,#08080820 35%,#0b090acc 67%,#080808f5 100%)}
.welcome-header{align-items:center}
.back-button{width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#16131254;backdrop-filter:blur(8px);font-size:24px;display:grid;place-items:center}
.welcome-brand{font-size:11px;letter-spacing:.22em;font-weight:600}
.welcome-bottom{max-width:590px;padding-bottom:clamp(8px,4vh,46px)}
.welcome-title{font-weight:500;font-size:clamp(54px,9.3vw,108px);letter-spacing:-.075em;line-height:.98;margin:0 0 19px;max-width:10ch}
.welcome-desc{font-size:17px;line-height:1.5;color:#f5e8db;margin:0;max-width:28ch}
.welcome-rule{height:1px;background:#eee3d580;width:min(100%,370px);margin:31px 0 16px}
.welcome-note{font-size:12px;letter-spacing:.08em;color:#ddcfc3;margin:0}

/* Comfortable on smaller phones and short laptop preview frames. */
@media(max-width:700px){
 :root{--pad:24px}
 .slide-inner,.welcome-inner{padding-top:max(23px,env(safe-area-inset-top));padding-bottom:max(30px,env(safe-area-inset-bottom))}
 .studio-brand{font-size:17px}
 .slide-title{font-size:clamp(64px,18vw,82px)}
 .slide-desc{font-size:15px;margin-bottom:22px}
 .slide-enter{min-height:62px}
 .welcome-title{font-size:clamp(50px,14vw,73px)}
 .welcome-bottom{padding-bottom:8vh}
}
@media(max-width:380px){:root{--pad:19px}.slide-title{font-size:62px}.slide-enter{min-height:59px}.slide-desc{margin-bottom:16px}.slide-dots{margin-bottom:11px}}
@media(max-height:640px){.slide-inner,.welcome-inner{padding-top:17px;padding-bottom:17px}.slide-title{font-size:clamp(47px,9vh,72px);margin-bottom:9px}.slide-desc{font-size:13px;margin-bottom:13px}.slide-dots{margin-bottom:9px}.slide-enter{min-height:51px;grid-template-columns:40px 1fr 18px}.round-symbol{width:38px;height:38px;font-size:20px}.welcome-title{font-size:clamp(42px,8vh,68px)}.welcome-rule{margin:16px 0 9px}.welcome-bottom{padding-bottom:0}}
@media(min-width:900px){.memo-slide--tattoo .slide-backdrop,.memo-welcome[data-discipline="tattoo"] .welcome-backdrop{background-size:auto 125%;background-position:72% 36%;background-color:#463b36}.slide-shade,.welcome-shade{background:linear-gradient(90deg,#0b0a0aba 0%,#10100d38 60%,#08080880),linear-gradient(0deg,#080808f0,transparent 65%)}.slide-bottom,.welcome-bottom{margin-left:clamp(20px,3vw,55px)}.slide-header,.welcome-header{padding-inline:clamp(20px,3vw,55px)}}
@media(prefers-reduced-motion:reduce){.entry-run,.entry-overlay{display:none!important}.slides-track,.memo-welcome,.slide-dot,.slide-enter{transition:none!important}}

/* After selecting a studio the visitor stays inside the app. */
body.app-entered{height:100svh;overflow-y:hidden;overscroll-behavior-y:none}
body.app-entered .entry-run{display:none!important}
body.app-entered .discovery{height:100svh}

/* Welcome screen: photograph-led, centered onboarding composition based on approved reference.
   Existing entrance and three-choice carousel remain unchanged. */
.memo-welcome .welcome-inner{
  justify-content:space-between;
  align-items:stretch;
}
.memo-welcome .welcome-header{
  align-items:flex-start;
  z-index:1;
}
.memo-welcome .welcome-brand{
  color:#f3ede5;
  text-shadow:0 1px 12px #09080770;
}
.memo-welcome .welcome-shade{
  background:linear-gradient(180deg,#18141138 0%,#0a090910 28%,#100e0c2a 47%,#0b0908c4 70%,#0b0a09f5 100%);
}
.memo-welcome .welcome-bottom{
  width:100%;
  max-width:520px;
  margin:0 auto!important;
  padding-bottom:clamp(19px,4.5vh,50px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
}
.memo-welcome .welcome-title{
  max-width:12ch;
  margin:0 0 18px;
  font-size:clamp(49px,6.3vw,78px);
  line-height:.99;
  font-weight:500;
  letter-spacing:-.07em;
  text-wrap:balance;
  text-shadow:0 3px 24px #0008;
}
.memo-welcome .welcome-desc{
  max-width:25ch;
  margin:0;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.52;
  color:#f4e8da;
  text-wrap:balance;
}
.memo-welcome .welcome-cta{
  width:min(100%,278px);
  min-height:51px;
  display:grid;
  place-items:center;
  margin-top:28px;
  padding:12px 22px;
  border:1px solid #f3e8da8c;
  border-radius:999px;
  background:#f0e9e51c;
  color:#fff;
  font-size:14px;
  font-weight:550;
  line-height:1.2;
  letter-spacing:.005em;
  box-shadow:inset 0 1px 2px #ffffff14;
  pointer-events:none;
  user-select:none;
}
.memo-welcome .welcome-note{
  margin:29px 0 0;
  color:#eee5d9ab;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.14em;
  font-weight:500;
}
.memo-welcome .welcome-rule{display:none}
@media(max-width:700px){
  .memo-welcome .welcome-bottom{
    padding-bottom:max(24px,5vh,env(safe-area-inset-bottom));
  }
  .memo-welcome .welcome-title{
    font-size:clamp(46px,12.8vw,59px);
    margin-bottom:19px;
    max-width:11ch;
  }
  .memo-welcome .welcome-desc{font-size:14px}
  .memo-welcome .welcome-cta{margin-top:25px;width:min(100%,265px);min-height:50px}
  .memo-welcome .welcome-note{margin-top:28px}
}
@media(max-height:640px){
  .memo-welcome .welcome-bottom{padding-bottom:clamp(12px,2vh,24px)}
  .memo-welcome .welcome-title{font-size:clamp(40px,9vh,54px);margin-bottom:12px}
  .memo-welcome .welcome-cta{margin-top:16px;min-height:44px}
  .memo-welcome .welcome-note{margin-top:16px}
}
@media(min-width:900px){
  .memo-welcome .welcome-shade{
    background:linear-gradient(180deg,#0b09082b 0%,#0b0a0910 37%,#0b0908aa 68%,#080807f3 100%);
  }
}


/* Studio Memo visual system — proposed for approval, applied to the current intro only.
   Headlines: Montserrat. Smaller copy and controls: Roboto. White typography throughout. */
.memo-home{
  --memo-display:"Montserrat",Arial,sans-serif;
  --memo-copy:"Roboto",Arial,sans-serif;
  font-family:var(--memo-copy);
  color:#fff;
}
.memo-home :is(h1,h2,h3,.slide-title,.welcome-title,.entry-caption p,.studio-brand,.welcome-brand){
  font-family:var(--memo-display);
}
.memo-home :is(p,button,.slide-kicker,.welcome-note,.slide-desc,.welcome-desc,.slide-count,.studio-brand span,.entry-caption .overline){
  font-family:var(--memo-copy);
}
.memo-home :is(.slide-kicker,.slide-desc,.welcome-desc,.welcome-note,.welcome-brand,.studio-brand,.studio-brand span,.entry-caption .overline){
  color:#fff;
}
.memo-home .period{color:#fff}
.memo-home .slide-dot{background:#ffffff73}
.memo-home .slide-dot[aria-current="true"]{background:#fff}

/* Onboarding reference: two equal-width pills, glass on the left and solid white on the right. */
.memo-home .memo-welcome .welcome-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  width:min(100%,410px);
  margin:28px auto 0;
  align-items:stretch;
}
.memo-home .memo-welcome .welcome-action{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:60px;
  padding:13px 18px;
  border-radius:999px;
  font-family:var(--memo-copy);
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  opacity:1;
  box-shadow:none;
  cursor:default;
}
.memo-home .memo-welcome .welcome-action--glass{
  background:rgba(37,34,33,.68);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.memo-home .memo-welcome .welcome-action--white{
  background:#fff;
  color:#161616; /* Black label only on white button for sufficient contrast. */
  border:1px solid #fff;
}
.memo-home .memo-welcome .welcome-action:disabled{
  opacity:1;
  -webkit-text-fill-color:currentColor;
}
.memo-home .memo-welcome .welcome-note{color:#fff}
@media(max-width:700px){
  .memo-home .memo-welcome .welcome-actions{margin-top:25px;gap:10px}
  .memo-home .memo-welcome .welcome-action{min-height:58px;padding:12px 11px;font-size:14px}
}
@media(max-height:640px){
  .memo-home .memo-welcome .welcome-actions{margin-top:16px}
  .memo-home .memo-welcome .welcome-action{min-height:48px}
}


/* Consistent Studio Memo glass action: preserve the full-width CTA dimensions. */
.memo-home .slide-enter{
  width:min(100%,420px);
  background:rgba(37,34,33,.68);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.memo-home .slide-enter:where(:hover,:focus-visible){
  background:rgba(51,46,44,.78);
  border-color:rgba(255,255,255,.5);
}
.memo-home .round-symbol{
  background:#fff;
  color:#161616;
}
.memo-home .memo-arrow{display:block;width:23px;height:23px;flex:none}
.memo-home .enter-chevron{display:grid;place-items:center;color:#fff;line-height:1}
.memo-home .enter-chevron .memo-arrow{width:20px;height:20px}
.memo-home .back-button{display:grid;place-items:center;color:#fff}
.memo-home .back-button .memo-arrow{width:23px;height:23px}


/* The user enters once; inside, sections follow each other in a natural vertical scroller.
   One viewport per section, with room for additional in-app screens later. */
.memo-inside{
  position:absolute;inset:0;z-index:3;display:none;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:none;
}
.memo-inside::-webkit-scrollbar{display:none}
.memo-inside.is-open{display:block}
.memo-inside>.memo-welcome{
  position:relative;inset:auto;z-index:1;
  width:100%;height:100svh;min-height:100svh;
  opacity:1;transform:none;pointer-events:auto;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.memo-inside[data-discipline="tattoo"]>.memo-portfolio{
  display:block;
}
.memo-inside:not([data-discipline="tattoo"])>.memo-portfolio{display:none}


/* Full-height in-app sections stay aligned with the visible phone viewport. */
@supports(height:100dvh){
  body.app-entered,body.app-entered .discovery{height:100dvh}
  .memo-inside>.memo-welcome,.memo-inside>.memo-portfolio{
    height:100dvh;
    min-height:100dvh;
  }
}


/* Approved Studio Memo glass style — frosted iOS-inspired controls.
   The second of two adjacent welcome buttons stays white. */
.memo-home{
  --memo-glass-bg:rgba(32,32,36,.38);
  --memo-glass-border:rgba(255,255,255,.20);
  --memo-glass-shadow:0 8px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.18);
}
.memo-home :is(.slide-enter,.memo-welcome .welcome-action--glass){
  background:var(--memo-glass-bg);
  color:#fff;
  border:1px solid var(--memo-glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--memo-glass-shadow);
}
.memo-home .slide-enter:is(:hover,:focus-visible){
  background:rgba(48,48,52,.48);
  border-color:rgba(255,255,255,.34);
}
.memo-home .memo-welcome .welcome-action--white{
  background:#fff;
  border-color:#fff;
  color:#161616;
  box-shadow:0 8px 30px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}


/* While a studio is open, its interior fully replaces the old discovery layer.
   Prevent scroll-through/bounce revealing 'Ontdek Tattoo' under the last section. */
.memo-home.memo-detail-open{height:100dvh!important;min-height:0;overflow:hidden;overscroll-behavior:none}
.memo-home.memo-detail-open .discovery{
  position:fixed;inset:0!important;display:block!important;
  width:100%;max-width:none;height:100dvh!important;min-height:0!important;
  margin:0;padding:0!important;overflow:hidden;background:#171411
}
.memo-home.memo-detail-open .slides-stage{display:none!important}
.memo-home.memo-detail-open .memo-inside{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:none;scroll-snap-type:y mandatory
}

/* Once visitors enter the studio, keep the underlying discovery carousel out
   of the vertical scroll. The tattoo form is the final indoor section. */
body.memo-home.app-entered{
  position:fixed;inset:0;width:100%;height:100dvh;
  overflow:hidden;overscroll-behavior:none;
}
.memo-home .memo-inside.is-open{
  background:#171315;
  overscroll-behavior-y:none;
  scroll-padding-bottom:0;
}
.memo-home .discovery:has(.memo-inside.is-open) .slides-stage{
  visibility:hidden;pointer-events:none;
}