/* JULIA V4 — one editorial scroll story, one custom icon language. */
:root {
  --julia-arrow-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.25 18.75 18 6M9.2 6H18v8.8' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='5.25' cy='18.75' r='1.35' fill='black'/%3E%3C/svg%3E");
  --julia-arrow-east: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h16.5m-6.3-6.3L20 12l-6.3 6.3' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E");
}

/* The old typeface arrows are visually replaced by this thin, jewelled arrow set.
   Their original aria-labels and links remain intact. */
:is(.button-arrow,.nav-book > span,.text-link > span,.service-more > a > span,.hero-proof > a > span,
    .hero-master > a,.service-option__arrow,.beauty-service > span:last-child,
    .work-card__open,.circle-link,.gallery-controls button,.story-exit a > span,
    .back-arrow,.back-top-arrow) {
  font-size: 0 !important;
  line-height: 0 !important;
}
:is(.button-arrow,.nav-book > span,.text-link > span,.service-more > a > span,.hero-proof > a > span,
    .hero-master > a,.service-option__arrow,.beauty-service > span:last-child,
    .work-card__open,.circle-link,.gallery-controls button,.story-exit a > span,
    .back-arrow,.back-top-arrow)::after {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  background: currentColor;
  -webkit-mask: var(--julia-arrow-diag) center/contain no-repeat;
  mask: var(--julia-arrow-diag) center/contain no-repeat;
  transition: transform .45s var(--ease);
}
:is(.button-primary,.nav-book,.text-link,.service-option,.beauty-service,.work-card):hover
  :is(.button-arrow,span[aria-hidden="true"],.service-option__arrow,.work-card__open)::after {
  transform: translate(2px,-2px);
}
.gallery-controls button::after,.hero-proof > a > span::after,
.hero-actions .text-link > span::after,.story-exit a > span::after,
.back-arrow::after,.back-top-arrow::after {
  -webkit-mask-image: var(--julia-arrow-east);
  mask-image: var(--julia-arrow-east);
}
.gallery-controls button[data-gallery-prev]::after,.back-arrow::after { transform: rotate(180deg); }
.hero-proof > a > span::after,.hero-actions .text-link > span::after,.story-exit a > span::after { transform: rotate(90deg); }
.back-top-arrow::after { transform: rotate(-90deg); }
.gallery-controls button::after,.circle-link::after,.hero-master > a::after,.work-card__open::after { width:21px;height:21px;flex-basis:21px; }
.gallery-controls button { display:grid;place-items:center; }
.hero-master > a,.circle-link,.work-card__open { display:grid;place-items:center; }
.service-option__arrow { display:grid;place-items:center; }
.service-option.is-active .service-option__arrow { transform:none; }
.service-option.is-active .service-option__arrow::after { transform:rotate(45deg); }
.back-arrow,.back-top-arrow { display:inline-flex;vertical-align:middle;align-items:center;margin-right:8px; }
.back-top-arrow { margin-right:0;margin-left:6px; }

/* The cinematic bridge brings the original JULIA illustration back into the
   brand, then reveals actual piercing and master photographs while scrolling. */
.story-scroll {
  position: relative;
  height: 310svh;
  background: #19131f;
}
.story-stage {
  position: sticky;
  top: 88px;
  height: calc(100svh - 88px);
  overflow: hidden;
  isolation: isolate;
  color: #fbf4ff;
  background: linear-gradient(132deg,#291d34 0%,#1d1826 44%,#120f18 100%);
}
.story-stage::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(17,13,24,.7) 0%,rgba(17,13,24,.42) 39%,transparent 65%);
}
.story-halo {
  position:absolute;
  inset:-30% 12% -30% -28%;
  pointer-events:none;
  background:radial-gradient(circle at 60% 48%,rgba(147,100,198,.26),transparent 46%);
  transform:translateZ(0);
}
.story-wordmark {
  position:absolute;
  z-index:1;
  top:4%;
  left:var(--edge);
  font-weight:550;
  font-size:clamp(155px,26vw,450px);
  letter-spacing:-.105em;
  line-height:.8;
  color:rgba(204,161,238,.16);
  white-space:nowrap;
  user-select:none;
}
.story-image-stack {
  position:absolute;
  z-index:1;
  width:min(49vw,690px);
  right:6.5%;
  top:9%;
  bottom:7%;
  transform:translateZ(0);
}
.story-frame {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#f4eee9;
  border-radius:min(18vw,220px) 5px 5px 5px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 75px #10091765;
}
.story-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  transform:translateZ(0);
}
.story-frame--figure img { object-position:center 25%; }
.story-frame--detail,.story-frame--master { opacity:0; }
.story-frame--master img { object-position:center 20%; }
.story-jewel {
  position:absolute;
  z-index:5;
  width:clamp(150px,16.5vw,250px);
  right:42%;
  bottom:5%;
  filter:drop-shadow(0 18px 13px #09030a69);
  pointer-events:none;
  transform:rotate(-22deg);
}
.story-topline {
  position:absolute;
  z-index:6;
  top:32px;
  left:var(--edge);
  right:var(--edge);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:#dfcaea;
}
.story-beats {
  position:absolute;
  z-index:6;
  left:var(--edge);
  top:45%;
  width:min(52%,750px);
  height:45%;
  transform:translateY(-38%);
  pointer-events:none;
}
.story-beat {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.story-beat--second,.story-beat--third { opacity:0; }
.story-beat__number {
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#d8b9ec;
  margin-bottom:28px;
}
.story-beat h2 {
  font-size:clamp(60px,7.15vw,116px);
  line-height:1.02;
  max-width:790px;
  font-weight:450;
  letter-spacing:-.065em;
  text-shadow:0 3px 25px #150e205e;
}
.story-beat h2 em { color:#dfbdf7;white-space:nowrap; }
.story-beat p {
  color:#f1e5f7;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.7;
  max-width:345px;
  margin-top:25px;
  text-shadow:0 3px 17px #150e20b8;
}
.story-counter {
  position:absolute;
  right:var(--edge);
  top:47%;
  z-index:7;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  font-size:11px;
  letter-spacing:.13em;
  color:#dbd0df;
}
.story-counter__track {
  height:120px;
  width:1px;
  background:rgba(255,255,255,.27);
  position:relative;
}
.story-counter__track i {
  position:absolute;
  inset:0;
  background:#ead0ff;
  transform:scaleY(0);
  transform-origin:top;
}
.story-scroll-cue {
  position:absolute;
  z-index:6;
  bottom:32px;
  left:var(--edge);
  display:flex;
  align-items:center;
  gap:14px;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:9px;
  color:#cebfd9;
}
.story-scroll-cue__line { display:block;width:45px;height:1px;background:#ae89c4; }
.story-exit { background:#e7d9ee; }
.story-exit .wrap { display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:27px; }
.story-exit span:first-child { font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#6b477e; }
.story-exit a { display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:550; }
.story-exit a > span::after { width:18px;height:18px; }
.offers-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:45px; }
.offers-grid .offer-note { margin:0;align-items:flex-start;flex-wrap:wrap;gap:20px;padding:27px 25px; }
.offers-grid .offer-note > .tiny-spark { font-size:37px; }
.offers-grid .offer-note > div { flex:1 1 65%; }
.offers-grid .offer-note > .text-link { margin-left:55px; }
.offers-grid .offer-note--friend { background:#daceeb; }
.offers-grid .offer-note strong { font-size:14px; }
.offers-grid .offer-note p { font-size:12px; }

@media(max-width:900px) {
  .story-stage { top:76px;height:calc(100svh - 76px); }
  .story-scroll { height:300svh; }
  .story-image-stack { width:61%;right:-3%;top:10%;bottom:8%; }
  .story-beats { width:70%;top:45%; }
  .story-beat h2 { font-size:clamp(54px,8.2vw,80px); }
  .story-jewel { right:38%;bottom:3%; }
  .story-stage::after { background:linear-gradient(90deg,rgba(17,13,24,.81),rgba(17,13,24,.43) 61%,transparent 100%); }
  .offers-grid { grid-template-columns:1fr; }
  .offers-grid .offer-note { padding:25px; }
}
@media(max-width:600px) {
  .story-counter { display:none; }
  .sound-toggle { left:auto;right:12px;bottom:12px;opacity:.85;backdrop-filter:blur(9px); }
  .story-scroll { height:315svh; }
  .story-stage { top:70px;height:calc(100svh - 70px); }
  .story-topline { left:var(--edge);right:var(--edge);top:20px;font-size:7px;letter-spacing:.12em; }
  .story-topline span:last-child { text-align:right; }
  .story-wordmark { top:7%;left:-4%;font-size:34vw; }
  .story-image-stack { width:auto;left:15%;right:-13%;top:9%;bottom:30%; }
  .story-frame { border-radius:105px 3px 3px 3px; }
  .story-frame--figure img { object-position:center 20%; }
  .story-frame--detail img { object-position:45% 32%; }
  .story-frame--master img { object-position:center 20%; }
  .story-stage::after { background:linear-gradient(180deg,transparent 17%,rgba(20,14,29,.1) 38%,rgba(20,14,29,.72) 57%,#1b1523 84%); }
  .story-jewel { width:140px;right:-18px;bottom:26%; }
  .story-beats { left:var(--edge);right:var(--edge);top:auto;bottom:8%;transform:none;width:auto;height:37%; }
  .story-beat { inset:auto 0 0; }
  .story-beat__number { font-size:9px;letter-spacing:.14em;margin-bottom:13px; }
  .story-beat h2 { font-size:clamp(39px,10.9vw,56px);line-height:1.03;max-width:100%; }
  .story-beat h2 em { white-space:normal; }
  .story-beat p { font-size:12px;line-height:1.65;max-width:300px;margin-top:14px; }
  .story-counter { top:33%;right:17px;font-size:9px;gap:8px; }
  .story-counter__track { height:74px; }
  .story-scroll-cue { left:var(--edge);bottom:15px;font-size:7px;letter-spacing:.12em;gap:9px; }
  .story-scroll-cue__line { width:28px; }
  .story-exit .wrap { display:flex;align-items:flex-start;flex-direction:column;gap:10px;padding-block:25px; }
  .story-exit span:first-child { font-size:9px; }
  .story-exit a { font-size:11px;max-width:315px;line-height:1.55; }
  .offers-grid { gap:12px;margin-top:27px; }
  .offers-grid .offer-note { gap:11px;padding:21px 18px; }
  .offers-grid .offer-note > .tiny-spark { font-size:28px; }
  .offers-grid .offer-note > div { flex:1 1 75%; }
  .offers-grid .offer-note > .text-link { margin-left:39px;font-size:11px; }
  .offers-grid .offer-note p { font-size:12px; }
}
@media(max-width:375px) and (max-height:700px) {
  .story-image-stack { top:8%;bottom:34%; }
  .story-beats { bottom:8%;height:43%; }
  .story-beat h2 { font-size:38px; }
  .story-beat p { font-size:11px; }
  .story-jewel { width:114px;bottom:30%; }
}
/* Progressive enhancement: with scripts blocked, the complete narrative is
   still readable as static chapters, and never becomes a 3-screen dead zone. */
body:not(.has-story-motion) .story-scroll { height:auto; }
body:not(.has-story-motion) .story-stage { position:relative;top:auto;height:auto;min-height:690px;padding:70px var(--edge); }
body:not(.has-story-motion) .story-image-stack { width:42%;height:470px;top:70px;bottom:auto; }
body:not(.has-story-motion) .story-frame--detail,
body:not(.has-story-motion) .story-frame--master { display:none; }
body:not(.has-story-motion) .story-beats { position:relative;top:auto;left:auto;right:auto;bottom:auto;width:55%;height:auto;transform:none;display:grid;gap:34px;padding-top:190px; }
body:not(.has-story-motion) .story-beat { position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important; }
body:not(.has-story-motion) .story-beat h2 { font-size:clamp(40px,5vw,62px); }
body:not(.has-story-motion) .story-jewel,
body:not(.has-story-motion) .story-counter,
body:not(.has-story-motion) .story-scroll-cue { display:none; }
@media(max-width:600px) {
  body:not(.has-story-motion) .story-stage { min-height:0;padding:70px var(--edge) 50px; }
  body:not(.has-story-motion) .story-image-stack { position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:340px;margin-top:35px; }
  body:not(.has-story-motion) .story-beats { width:100%;padding-top:35px; }
  body:not(.has-story-motion) .story-stage::after { background:none; }
}
@media(prefers-reduced-motion:reduce) {
  .story-scroll { height:auto; }
  .story-stage { position:relative;top:auto;height:auto;min-height:720px;padding:75px var(--edge); }
  .story-image-stack { width:42%;top:70px;bottom:auto;height:470px; }
  .story-frame--detail,.story-frame--master { display:none; }
  .story-beats { position:relative;left:auto;top:auto;bottom:auto;right:auto;width:55%;height:auto;transform:none;display:grid;gap:35px;padding-top:200px; }
  .story-beat { position:relative;opacity:1!important;visibility:visible!important;transform:none!important; }
  .story-beat h2 { font-size:clamp(40px,5vw,62px); }
  .story-jewel,.story-counter,.story-scroll-cue { display:none; }
  .story-topline { top:25px; }
}
@media(max-width:600px) and (prefers-reduced-motion:reduce) {
  .story-stage { padding:70px var(--edge) 50px;min-height:0; }
  .story-image-stack { position:relative;width:100%;height:340px;left:auto;right:auto;top:auto;bottom:auto;margin-top:35px; }
  .story-beats { width:100%;padding-top:42px; }
  .story-beat { display:block; }
  .story-stage::after { background:none; }
}