:root {
  --paper:#f5f1e9;
  --ink:#201a19;
  --muted:#625551;
  --purple:#70364e;
  --line:#ded4c8;
  --white:#fffaf2;
}
.mast {background:var(--paper);border-bottom:0}
.bar {min-height:74px}
.brand-mark {background:#2e1c23;color:#f2c0ce;border-radius:12px}
.brand small {color:#6e4250}
.mast nav {font-weight:700}
.mast .outline {background:#fffaf4;border-color:#d7cabc}
.hero-shell {background:transparent}
.hero {
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(18px,4.5vw,65px);align-items:center;
  min-height:590px;margin-top:8px;padding:clamp(28px,5vw,66px);
  border-radius:30px;background:#201819;
  color:#fff6e8;
}
.hero::before {
  content:"";position:absolute;z-index:-1;inset:0;
  background:radial-gradient(ellipse at 22% 44%,#5b364c 0%,transparent 60%),radial-gradient(ellipse at 90% 95%,#4d292c 0%,transparent 54%);
}
.hero::after {
  content:"";position:absolute;z-index:-1;inset:0;
  background:repeating-linear-gradient(116deg,#ffead609 0 1px,transparent 1px 34px);
  mask-image:linear-gradient(110deg,#000,transparent 74%);pointer-events:none;
}
.intro .studio-label {color:#efd1be;margin-bottom:19px}
.intro .dot {background:#f1b4c4;box-shadow:0 0 12px #e79eafaa}
.studio-id {color:#d1a8b1;border-color:#a27a82}
h1 {font-size:clamp(58px,6.2vw,86px);letter-spacing:-.07em;line-height:.98;margin-bottom:22px}
h1 em {color:#f3b9ca}
.hero .lede {color:#ead8d1;font-size:16px;line-height:1.85;max-width:330px}
.hero .dark {background:#f6d3d9;color:#2e1b25}
.hero .textlink {color:#f4d4cc}
.occasion-picker {border-color:#fff3;padding-top:15px}
.picker-label {color:#f6e5de}
.picker-options button {color:#f2e4dd;background:#fff1;border-color:#fff4}
.picker-options button[aria-pressed=true] {color:#281a22;background:#f5d5db;border-color:#f5d5db}
.picker-options button:hover {border-color:#f3c5d0}
#demo-detail {color:#ead8d1}
.demo {padding:10px;background:#fff8ee0d;border:1px solid #ffead62e;border-radius:23px;box-shadow:0 24px 55px #140a1460}
.demo-topline {padding:3px 7px 11px;color:#f1d9d5}
.demo-topline i {background:#e9a9bc;box-shadow:0 0 0 3px #e9a9bc30}
.stage {height:clamp(350px,37vw,450px);border:1px solid #fff3;border-radius:16px;background:radial-gradient(ellipse at 50% 48%,#b67f99,#74445f 39%,#402b41 75%)}
.stage[data-occasion=graduation] {background:radial-gradient(ellipse at 50% 48%,#8cac87,#527056 42%,#2e443b 78%)}
.stage[data-occasion=pregnancy] {background:radial-gradient(ellipse at 50% 48%,#c89476,#895849 42%,#533831 78%)}
.stage[data-occasion=reveal] {background:radial-gradient(ellipse at 50% 48%,#b099c5,#80648e 42%,#52415d 78%)}
.stage .present {--box-scale:1.14}
.stage-badge {background:#231621a8;color:#fff4ea;border:1px solid #fff4}
.stage-badge i {background:#f6b6c8}
.demo-steps {background:transparent}
.demo-steps li {background:#fff1;color:#f0dad7}
.demo-steps [aria-current] {background:#f5d5db;color:#3c2333}
.demo-followup {color:#efdad2}
.demo-followup a {color:#ffdeea}
.occasion {border:0;padding-block:69px 56px}
.section-intro {margin-bottom:28px}
.section-intro h2 {font-size:clamp(37px,5.9vw,71px);line-height:1.02}
.section-intro>p {max-width:330px}
.card {background:#fffbf4;border-color:var(--line);border-radius:19px}
.card-art {min-height:167px}
.card-art::before {width:109px;height:109px}
.gallery-illustration {width:67%;max-width:145px;z-index:1;filter:drop-shadow(0 8px 7px #4a233928);transform:rotate(-7deg);transition:transform .25s}
.card:hover .gallery-illustration {transform:translateY(-5px) rotate(0)}
.card h3 {margin-top:15px}
.order {background:#eee5db;border-color:#e0d2c5}
.how li b {background:#ead9dc}
@media(max-width:850px) {
  .hero {padding:25px;gap:16px}
  .stage .present {--box-scale:.9}
  h1 {font-size:clamp(49px,8.1vw,70px)}
}
@media(max-width:680px) {
  .hero {grid-template-columns:minmax(0,1fr);padding:20px 13px 14px;gap:19px;border-radius:21px;min-height:0;margin-top:8px}
  .intro {padding-inline:4px}
  h1 {font-size:clamp(53px,13vw,71px);margin-bottom:14px}
  .intro .studio-label {margin-bottom:12px}
  .hero .lede {font-size:14px}
  .demo {padding:7px;border-radius:17px}
  .stage {height:306px;border-radius:12px}
  .stage .present {--box-scale:.80}
  .demo-topline span:last-child {font-size:8px}
  .occasion {padding-block:36px}
  .card-art {min-height:108px}
  .card-art::before {width:69px;height:69px}
  .gallery-illustration {width:62%}
}
@media(max-width:365px) {
  .hero {padding-inline:10px}
  .stage {height:276px}
  .stage .present {--box-scale:.73}
}
.intro {animation:studio-enter .42s ease-out both}
@keyframes studio-enter {from{opacity:.86;transform:translateY(8px)}}