/* JULIA V5 — spatial art direction, continuous editorial motion and a real-work composition study. */

/* Every foreground choice (shape, line, gemstone and transition) lives in the same
   pearl / smoked-plum / chrome design language. */
.home-hero {
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse 32% 30% at 74% 20%,rgba(188,153,211,.2),transparent 78%),
    linear-gradient(145deg,#fcfaf6 0%,#f4eee9 47%,#f2eaf4 100%);
}
.home-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:0;
  background-image:radial-gradient(#86699830 .65px,transparent .65px);
  background-size:19px 19px;
  -webkit-mask-image:linear-gradient(100deg,transparent 36%,#0008 85%,transparent);
  mask-image:linear-gradient(100deg,transparent 36%,#0008 85%,transparent);
  opacity:.35;
}
.hero-space { position:absolute;z-index:-1;pointer-events:none;filter:blur(7px);border-radius:50%;transform:translateZ(0); }
.hero-space--one { width:53vw;height:53vw;right:-20vw;top:-18vw;background:radial-gradient(circle,#d9c6ed91 0%,#e5d8ea32 40%,transparent 70%); }
.hero-space--two { width:38vw;height:38vw;left:-20vw;bottom:-19vw;background:radial-gradient(circle,#bba3dc55,transparent 67%); }
.home-hero .hero-shell { position:relative;z-index:1;min-height:min(760px,calc(100svh - 88px));padding-block:58px 78px;gap:clamp(48px,5vw,95px); }
.home-hero .hero-copy { position:relative;z-index:4; }
.home-hero .hero-copy .eyebrow { margin-bottom:30px;letter-spacing:.095em;color:#675a67; }
.home-hero .hero-copy h1 { font-size:clamp(63px,6.25vw,98px);font-weight:430;letter-spacing:-.075em;line-height:.995;text-wrap:balance; }
.home-hero .hero-copy h1 em { color:#805598;font-style:italic; }
.home-hero .hero-description { max-width:445px;line-height:1.68;margin-top:28px;color:#6a606c; }
.home-hero .hero-actions { gap:25px;margin-top:28px; }
.home-hero .hero-actions .button-primary { background:#242028;border-color:#242028;box-shadow:0 15px 37px #32223a1a; }
.home-hero .hero-actions .button-primary:hover { background:#6e4d83;border-color:#6e4d83; }
.home-hero .hero-master { border-top:1px solid #d3c5d5;padding-top:20px;max-width:410px;margin-top:34px; }
.home-hero .hero-master a { margin-left:auto; }
.home-hero .hero-art { position:relative;padding:23px 0 37px 30px;transform-style:preserve-3d; }
.home-hero .hero-art::before {
  content:"";position:absolute;inset:7px 24px 12px 58px;z-index:0;
  border:1px solid rgba(129,96,153,.34);border-radius:230px 6px 6px 6px;
  transform:translate(17px,-7px);pointer-events:none;
}
.home-hero .hero-portrait-wrap { aspect-ratio:.86;border-radius:230px 7px 7px 7px;box-shadow:0 34px 85px #33223d28; }
.home-hero .hero-photo { object-position:center 48%; }
.home-hero .hero-photo-caption { left:36px;right:28px;bottom:22px; }
.home-hero .hero-photo-cross {
  position:absolute;z-index:2;left:17%;top:15%;width:45px;height:45px;
  border:1px solid rgba(255,255,255,.57);border-radius:50%;opacity:.6;pointer-events:none;
}
.home-hero .hero-photo-cross::before,.home-hero .hero-photo-cross::after {
  content:"";position:absolute;background:#ffffffb8;left:50%;top:50%;transform:translate(-50%,-50%);
}
.home-hero .hero-photo-cross::before { width:18px;height:1px; }
.home-hero .hero-photo-cross::after { width:1px;height:18px; }
.hero-art__edition { position:absolute;z-index:4;top:2px;left:30px;font-size:9px;letter-spacing:.16em;color:#786383; }
.hero-art__coordinates { position:absolute;right:0;bottom:4px;font-size:8px;letter-spacing:.17em;color:#8f7c96;text-transform:uppercase; }
.home-hero .hero-object { width:clamp(175px,18vw,245px);height:clamp(175px,18vw,245px);left:-72px;bottom:10%;z-index:5;filter:drop-shadow(0 22px 20px #25132a38); }
.home-hero .hero-art-label { display:none; }
.home-hero .hero-proof { position:relative;z-index:1;background:#ffffff36;backdrop-filter:blur(7px); }
.home-hero .hero-proof>div { gap:12px; }

/* Full-view composition study, grounded in a real JULIA photo.
   Laser/glint overlays are explicitly decorative, not simulated piercings. */
.composition-journey { position:relative;height:320svh;background:#1b1620; }
.composition-stage {
  position:sticky;top:88px;height:calc(100svh - 88px);overflow:hidden;isolation:isolate;
  color:#faf5fd;
  background:radial-gradient(ellipse 72% 70% at 28% 52%,#40304d 0%,#251c2d 59%,#17121e 100%);
}
.composition-stage::before {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);
  background-size:calc(100% / 13) calc(100% / 8);
  -webkit-mask-image:linear-gradient(90deg,#0002,#0007 53%,transparent);
  mask-image:linear-gradient(90deg,#0002,#0007 53%,transparent);
  opacity:.15;
}
.composition-stage::after {
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent 5%,transparent 48%,#1b15202b 68%,#15121a70 100%);
}
.composition-depth { position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(60px); }
.composition-depth--one { width:42vw;height:42vw;left:5vw;top:5vh;background:rgba(133,93,166,.3); }
.composition-depth--two { width:45vw;height:45vw;right:-16vw;bottom:-21vw;background:rgba(158,105,191,.17); }
.composition-topline { position:absolute;z-index:8;top:35px;left:var(--edge);right:var(--edge);display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#d9bddf; }
.composition-wordmark { position:absolute;z-index:1;bottom:-8%;left:-3%;font-size:clamp(145px,20vw,350px);line-height:.8;letter-spacing:-.1em;font-weight:520;color:#d2ade71c;white-space:nowrap;user-select:none;pointer-events:none; }
.composition-visual { position:absolute;z-index:2;left:8%;top:12%;height:77%;width:min(48vw,620px);perspective:900px; }
.composition-photo { position:absolute;inset:0 8% 0 7%;overflow:hidden;border-radius:230px 160px 8px 8px;background:#b9a0b3;box-shadow:0 30px 100px #09040f8c; }
.composition-photo>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 47%;transform:scale(1.04) translateZ(0); }
.composition-photo__wash { position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#d3adeb15 0%,transparent 40%,#12081f40 100%); }
.composition-photo::after { content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.38);border-radius:inherit;pointer-events:none; }
.composition-orbit { position:absolute;z-index:-1;border:1px solid rgba(231,205,251,.3);border-radius:50%;pointer-events:none; }
.composition-orbit--outer { width:110%;height:65%;left:0%;top:14%;transform:rotate(-28deg);box-shadow:0 0 42px #bca5db1c; }
.composition-orbit--inner { width:87%;height:58%;left:6%;top:18%;transform:rotate(44deg);border-color:#c9a9d551; }
.composition-visual__tag { position:absolute;z-index:6;bottom:-25px;left:12%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:8px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:#d7c3df; }
.composition-visual__tag span:last-child { color:#b5a4bb;text-align:right;letter-spacing:.025em;text-transform:none;font-size:10px; }
.composition-scan,.composition-gem { position:absolute;z-index:5;pointer-events:none;opacity:0;transform:scale(.4); }
.composition-scan { width:70px;height:70px;border:1px solid #f5e8ffcb;border-radius:50%;box-shadow:0 0 15px #f7daff55,inset 0 0 17px #f7daff42; }
.composition-scan i { position:absolute;inset:-15px;border:1px dashed #eacbf76e;border-radius:50%; }
.composition-scan--one { left:68%;top:34%; }
.composition-scan--two { left:15%;top:68%; }
.composition-scan--three { left:29%;top:67%; }
.composition-gem { width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 12px 5px #e9bafa,0 0 28px 14px #ddb9f071; }
.composition-gem--one { left:74%;top:42%; }
.composition-gem--two { left:23%;top:76%; }
.composition-gem--three { left:36%;top:75%; }
.composition-copy { position:absolute;z-index:7;right:7%;top:25%;width:min(42vw,640px); }
.composition-kicker { display:block;margin-bottom:18px;max-width:460px;color:#dfc6ee;font-size:10px;letter-spacing:.15em;text-transform:uppercase; }
.composition-copy h2 { font-size:clamp(53px,5.4vw,93px);font-weight:420;line-height:.98;letter-spacing:-.07em;text-shadow:0 8px 40px #16101c71; }
.composition-copy h2 em { color:#dfbaff; }
.composition-beats { position:relative;height:178px;margin-top:34px;max-width:440px; }
.composition-beat { position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start; }
.composition-beat--second,.composition-beat--third { opacity:0; }
.composition-beat__index { font-size:10px;color:#d0a9e7;letter-spacing:.17em; }
.composition-beat h3 { font-size:clamp(22px,2.25vw,34px);font-weight:450;line-height:1.16;letter-spacing:-.045em;margin-top:12px; }
.composition-beat p { color:#d6c9dd;max-width:385px;font-size:14px;line-height:1.65;margin-top:12px; }
.composition-cta { display:inline-flex;gap:18px;align-items:center;justify-content:space-between;padding:13px 0 14px;border-bottom:1px solid #9e7faf;color:#faf4fd;font-size:12px;font-weight:500;transition:color .25s; }
.composition-cta:hover { color:#dab2f5; }
.composition-cta>span { font-size:0;line-height:0; }
.composition-cta>span::after { content:"";display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--julia-arrow-diag) center/contain no-repeat;mask:var(--julia-arrow-diag) center/contain no-repeat; }
.composition-progress { position:absolute;z-index:8;bottom:30px;right:var(--edge);display:flex;gap:14px;align-items:center;font-size:9px;letter-spacing:.15em;color:#d9b8e6; }
.composition-progress>div { width:112px;height:1px;background:#e7d1f23d; }
.composition-progress i { display:block;width:100%;height:1px;background:#eee2f7;transform:scaleX(0);transform-origin:left; }

/* Chapters flow into one another instead of behaving as isolated cards. */
.composition-journey + .master-section { background:linear-gradient(180deg,#201a25,#27232c 280px);padding-top:110px; }
.master-portrait { border-radius:220px 7px 7px 7px;box-shadow:0 25px 70px #0b081529; }
.material-object { background:radial-gradient(ellipse at 50% 45%,#594066 0%,#372b43 44%,#241d2b 77%);border-radius:160px 8px 8px 8px;box-shadow:inset 0 0 130px #130b2060; }
.material-object::before { content:"";position:absolute;inset:10%;border:1px solid #b4a2c333;border-radius:50%;transform:rotate(35deg);pointer-events:none; }
.works-section { background:linear-gradient(180deg,#faf7f4,#f4edf7); }
.work-card__image { border-radius:110px 5px 5px 5px;box-shadow:0 18px 28px #25182b10; }
.work-card:nth-child(even) .work-card__image { border-radius:5px 110px 5px 5px; }
.work-card__caption { border-top:1px solid #d5c4d8;margin-top:14px;padding-top:12px; }
.visit-process { --journey-progress:0;position:relative; }
.process-grid { position:relative;isolation:isolate; }
.process-grid::before,.process-grid::after { content:"";position:absolute;top:0;left:0;width:100%;height:1px;pointer-events:none; }
.process-grid::before { background:#d6c6da; }
.process-grid::after { background:#9264ad;transform:scaleX(var(--journey-progress));transform-origin:left; }
.process-card { border-top:0;position:relative; }
.process-card::before { content:"";position:absolute;width:6px;height:6px;top:-2.5px;left:0;background:#ba8dd2;border-radius:50%;box-shadow:0 0 0 7px #d9bce22c; }
.offers-grid .offer-note { border:1px solid #bda5c64f;border-radius:3px 80px 3px 3px;box-shadow:0 18px 37px #5b38670d; }
.offers-grid .offer-note--friend { border-radius:80px 3px 3px 3px; }

@media(max-width:1150px) {
  .home-hero .hero-shell { gap:30px;min-height:0;padding-block:38px 58px; }
  .home-hero .hero-copy h1 { font-size:clamp(52px,6.5vw,78px); }
  .composition-copy { right:5%;width:45%; }
  .composition-copy h2 { font-size:clamp(49px,5.7vw,77px); }
  .composition-visual { left:4%;width:49%; }
}
@media(max-width:900px) {
  .home-hero .hero-shell { padding-block:34px 46px; }
  .home-hero .hero-copy h1 { font-size:clamp(42px,6.7vw,65px); }
  .home-hero .hero-art { padding-left:10px; }
  .home-hero .hero-art::before { left:34px; }
  .home-hero .hero-object { left:-44px; }
  .composition-stage { top:76px;height:calc(100svh - 76px); }
  .composition-journey { height:300svh; }
  .composition-photo { border-radius:160px 120px 6px 6px; }
  .composition-copy h2 { font-size:clamp(44px,6.2vw,64px); }
  .composition-beat h3 { font-size:22px; }
  .composition-beat p { font-size:12px; }
  .composition-visual__tag span:last-child { max-width:180px; }
}
@media(max-width:600px) {
  .home-hero { background:linear-gradient(155deg,#fdfbf7 0%,#f7f1f1 51%,#efe4f3 100%); }
  .home-hero .hero-shell { display:flex;flex-direction:column;gap:0;min-height:0;padding-top:24px;padding-bottom:27px; }
  .home-hero .hero-copy { padding:0; }
  .home-hero .hero-copy .eyebrow { margin-bottom:15px;letter-spacing:.045em;font-size:8px;line-height:1.4; }
  .home-hero .hero-copy .eyebrow .tiny-spark { font-size:19px; }
  .home-hero .hero-copy h1 { font-size:clamp(42px,10.8vw,58px);line-height:.985;letter-spacing:-.075em; }
  .home-hero .hero-copy h1 em { letter-spacing:-.062em; }
  .home-hero .hero-description { max-width:340px;margin-top:17px;font-size:12px;line-height:1.65;color:#645b65; }
  .home-hero .hero-actions { gap:14px;margin-top:19px;align-items:center;flex-wrap:nowrap; }
  .home-hero .hero-actions .button-primary { min-height:46px;min-width:0;padding:12px 16px;gap:19px;font-size:11px;box-shadow:0 13px 29px #32223a20; }
  .home-hero .hero-actions .text-link { margin:0;font-size:9px;gap:5px;line-height:1.3;white-space:normal; }
  .home-hero .hero-actions .text-link span::after { width:15px;height:15px;flex-basis:15px; }
  .home-hero .hero-master { display:none; }
  .home-hero .hero-art { width:100%;margin-top:25px;padding:14px 0 25px 16px; }
  .home-hero .hero-art::before { inset:1px 8px 17px 32px;border-radius:155px 5px 5px 5px;transform:translate(12px,-6px); }
  .home-hero .hero-portrait-wrap { width:100%;aspect-ratio:.92;border-radius:155px 5px 5px 5px;box-shadow:0 23px 45px #35213b25; }
  .home-hero .hero-photo { object-position:center 43%; }
  .home-hero .hero-photo-caption { left:24px;right:15px;bottom:16px;flex-direction:row;align-items:end;justify-content:space-between;gap:8px; }
  .home-hero .hero-photo-caption span:first-child { display:block;font-size:9px;font-weight:500; }
  .home-hero .hero-photo-caption span:last-child { font-size:7px;text-align:right;letter-spacing:.09em; }
  .home-hero .hero-photo-cross { top:13%;left:25%;width:34px;height:34px; }
  .home-hero .hero-object { width:145px;height:145px;left:-30px;top:48%;bottom:auto;filter:drop-shadow(0 18px 18px #291a2c50); }
  .home-hero .hero-art__edition { top:-8px;left:15px;font-size:8px;letter-spacing:.12em;color:#695073; }
  .home-hero .hero-art__coordinates { right:0;bottom:0;font-size:7px;letter-spacing:.18em; }
  .home-hero .hero-space--one { width:100vw;height:100vw;top:19%;right:-60vw; }
  .home-hero .hero-space--two { width:80vw;height:80vw;left:-40vw;bottom:10%; }
  .home-hero .hero-proof { margin-top:4px;padding-block:20px;backdrop-filter:none; }
  .home-hero .hero-proof .proof-mark { display:none; }
  .home-hero .hero-proof>div { padding-left:9px;border-left:1px solid #bba7c4;font-size:9px;line-height:1.5; }
  .home-hero .hero-proof strong { font-size:9px; }
  .composition-journey { height:287svh; }
  .composition-stage { top:70px;height:calc(100svh - 70px);background:radial-gradient(ellipse at 65% 25%,#493453 0%,#231a2b 63%,#17121d 100%); }
  .composition-stage::after { background:linear-gradient(180deg,transparent 16%,#1a10230b 32%,#1b132356 48%,#1d1727e8 72%,#19131ff5 100%); }
  .composition-topline { top:20px;left:var(--edge);right:var(--edge);font-size:8px;line-height:1.5;letter-spacing:.12em; }
  .composition-topline span:last-child { text-align:right;max-width:145px; }
  .composition-wordmark { font-size:31vw;bottom:23%;left:-11%;color:#dfb5fb14; }
  .composition-depth--one { width:95vw;height:95vw;left:-35vw;top:10%; }
  .composition-depth--two { width:100vw;height:100vw;right:-65vw;bottom:0; }
  .composition-visual { z-index:2;left:14%;right:-12%;top:8%;width:auto;height:62%; }
  .composition-photo { inset:0 6% 0 0;border-radius:160px 120px 5px 5px; }
  .composition-photo>img { object-position:50% 47%; }
  .composition-orbit--outer { width:105%;left:-5%;top:15%; }
  .composition-orbit--inner { width:85%;left:7%;top:19%; }
  .composition-visual__tag { display:none; }
  .composition-scan { width:43px;height:43px; }
  .composition-scan i { inset:-10px; }
  .composition-copy { top:auto;bottom:7.5%;left:var(--edge);right:var(--edge);width:auto; }
  .composition-kicker { font-size:8px;letter-spacing:.11em;margin-bottom:9px; }
  .composition-copy h2 { font-size:clamp(37px,10.6vw,55px);line-height:.96;letter-spacing:-.068em; }
  .composition-beats { height:132px;margin-top:17px;max-width:330px; }
  .composition-beat__index { font-size:9px; }
  .composition-beat h3 { font-size:21px;margin-top:7px;line-height:1.1; }
  .composition-beat p { font-size:11px;line-height:1.5;margin-top:7px;max-width:305px; }
  .composition-cta { gap:11px;padding:8px 0 10px;font-size:10px;line-height:1.45;max-width:100%; }
  .composition-cta>span::after { width:17px;height:17px; }
  .composition-progress { right:var(--edge);bottom:18px;gap:10px;font-size:8px; }
  .composition-progress>div { width:72px; }
  .composition-journey + .master-section { padding-top:70px;background:linear-gradient(180deg,#221b29,#27232c 200px); }
  .master-portrait { border-radius:115px 5px 5px 5px; }
  .material-object { border-radius:110px 4px 4px 4px; }
  .work-card__image { border-radius:80px 4px 4px 4px; }
  .work-card:nth-child(even) .work-card__image { border-radius:4px 80px 4px 4px; }
  .process-grid::before,.process-grid::after { width:1px;height:100%;top:0;left:16px; }
  .process-grid::after { transform:scaleY(var(--journey-progress));transform-origin:top; }
  .process-card { padding-left:27px; }
  .process-card::before { top:35px;left:13px; }
  .offers-grid .offer-note,.offers-grid .offer-note--friend { border-radius:3px 56px 3px 3px; }
}
@media(max-width:360px) {
  .home-hero .hero-copy h1 { font-size:41px; }
  .home-hero .hero-actions { gap:10px; }
  .home-hero .hero-actions .button-primary { padding-inline:11px;gap:12px; }
  .home-hero .hero-actions .text-link { font-size:8px; }
  .composition-copy { bottom:6%; }
  .composition-copy h2 { font-size:38px; }
  .composition-beats { height:135px; }
  .composition-beat h3 { font-size:19px; }
}

/* Safe fallback when scripts or motion capability are absent. All three useful
   messages remain readable without a sticky dead zone. */
body:not(.has-composition-motion) .composition-journey { height:auto; }
body:not(.has-composition-motion) .composition-stage { position:relative;top:auto;height:auto;min-height:650px;padding:90px var(--edge) 70px; }
body:not(.has-composition-motion) .composition-topline { top:25px; }
body:not(.has-composition-motion) .composition-visual { position:relative;left:auto;right:auto;top:auto;width:42%;height:470px;float:left;margin:0 6% 45px 0; }
body:not(.has-composition-motion) .composition-copy { position:relative;right:auto;left:auto;top:auto;bottom:auto;width:auto; }
body:not(.has-composition-motion) .composition-beats { position:relative;height:auto;display:grid;gap:22px;margin-bottom:26px; }
body:not(.has-composition-motion) .composition-beat { position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important; }
body:not(.has-composition-motion) .composition-scan,body:not(.has-composition-motion) .composition-gem { opacity:.7;transform:none; }
body:not(.has-composition-motion) .composition-progress { display:none; }
@media(max-width:600px) {
  body:not(.has-composition-motion) .composition-stage { padding:80px var(--edge) 55px;min-height:0; }
  body:not(.has-composition-motion) .composition-visual { float:none;width:100%;height:390px;margin:0 0 30px; }
  body:not(.has-composition-motion) .composition-photo { inset:0 2%; }
  body:not(.has-composition-motion) .composition-copy { position:relative;left:auto;right:auto;bottom:auto; }
  body:not(.has-composition-motion) .composition-copy h2 { font-size:42px; }
  body:not(.has-composition-motion) .composition-beats { height:auto;gap:23px; }
  body:not(.has-composition-motion) .composition-stage::after { background:none; }
}
@media(prefers-reduced-motion:reduce) {
  .home-hero .hero-space { display:none; }
  .composition-journey { height:auto; }
  .composition-stage { position:relative;top:auto;height:auto;min-height:700px;padding:90px var(--edge) 70px; }
  .composition-visual { position:relative;left:auto;right:auto;top:auto;width:40%;height:470px;float:left;margin:0 8% 40px 0; }
  .composition-copy { position:relative;right:auto;left:auto;top:auto;bottom:auto;width:auto; }
  .composition-beats { height:auto;display:grid;gap:22px;margin-bottom:25px; }
  .composition-beat { position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important; }
  .composition-scan,.composition-gem { opacity:.75;transform:none; }
  .composition-progress { display:none; }
}
@media(max-width:600px) and (prefers-reduced-motion:reduce) {
  .composition-stage { min-height:0;padding:75px var(--edge) 55px; }
  .composition-visual { float:none;width:100%;height:390px;margin:0 0 30px; }
  .composition-photo { inset:0 2%; }
  .composition-copy h2 { font-size:42px; }
  .composition-beats { height:auto; }
  .composition-stage::after { background:none; }
}