/* Voile, bridal concept. Palette "air": cool veil whites + one hidden "something blue" thread. Type: Tenor Sans + Figtree. */
:root{
  --veil:#F4F6F9; --paper:#FFFFFF; --mist:#E2E7EE; --ink:#1C2232; --mute:#5D6576; --blue:#45629C; --pale:#CBD7EA;
  --disp:'Tenor Sans', 'Gill Sans', 'Optima', sans-serif; --body:'Figtree', system-ui, sans-serif;
  --gut:20px; --max:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--veil);color:var(--ink);font:300 16px/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;height:56px;padding:0 var(--gut);
  transition:background .5s, box-shadow .5s}
.hd.is-solid{background:rgba(244,246,249,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(28,34,50,.06)}
.hd__mark{font-family:var(--disp);font-size:22px;letter-spacing:.08em;text-decoration:none;margin-right:auto}
.hd__nav{display:none}
.hd__nav a{text-decoration:none;font-size:14px;color:var(--mute)}
.hd__nav a:hover{color:var(--ink)}
.hd__book{font-size:14px;font-weight:500;text-decoration:none;color:var(--blue);padding:8px 0;border-bottom:1px solid currentColor}

/* hero: the gown is the object. Studio light: a soft cool glow behind her, a floor line under the hem */
.hero{position:relative;min-height:100svh;padding:68px var(--gut) calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;
  background:var(--veil);overflow:hidden}
.hero__text{position:relative;z-index:2}
.hero h1{font-size:clamp(30px, 8.4vw, 84px);line-height:1.06;max-width:13ch}
.hero__sub{display:none;margin-top:14px;max-width:34ch;color:var(--mute);font-size:17px}
.dress{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin:4px calc(-1 * var(--gut)) 0}
.dress__stage{position:relative;flex:1 1 auto;min-height:440px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dress__stage.is-drag{cursor:grabbing}
.dress__poster,.dress__cv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.dress__cv{opacity:0;transition:opacity .4s}
.dress.is-live .dress__cv{opacity:1}
.dress.is-live .dress__poster{visibility:hidden}
.dress__detail{position:absolute;inset:0;padding:0 var(--gut) 4px;background:var(--veil);z-index:3;display:grid;grid-template-rows:minmax(0, 1fr) auto;align-items:center;animation:dIn .7s cubic-bezier(.2,.6,.2,1)}
.dress__detail[hidden]{display:none}
.dress__detail img{width:100%;height:100%;min-height:0;object-fit:contain}
.dress__dcap{margin-top:12px;font-size:14px;color:var(--mute);max-width:36ch}
@keyframes dIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.dress__tag{position:absolute;left:var(--gut);top:6px;z-index:2;display:grid;font-size:13px;color:var(--mute);line-height:1.35;pointer-events:none}
.dress__tag b{font-family:var(--disp);font-weight:400;font-size:22px;color:var(--ink)}
.dress__veil{position:absolute;right:var(--gut);top:4px;z-index:4;min-height:44px;padding:0 2px;border:0;background:none;font-size:14px;font-weight:500;color:var(--blue);
  border-bottom:1px solid currentColor;cursor:pointer}
.dress__veil[aria-pressed="true"]{color:var(--ink)}
.dress__detail:not([hidden]) ~ .dress__veil,.dress__detail:not([hidden]) ~ .dress__hint{visibility:hidden}
.dress__hint{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--ink);pointer-events:none;transition:opacity .6s;text-shadow:0 0 14px #fff, 0 0 4px #fff;white-space:nowrap}
.dress__hint.is-off{opacity:0}
.dress__arc{width:120px;height:22px;border:1.5px solid var(--blue);border-top:0;border-radius:0 0 60px 60px / 0 0 22px 22px;position:relative;animation:arc 3.2s ease-in-out infinite}
.dress__arc::before,.dress__arc::after{content:"";position:absolute;top:-4px;width:7px;height:7px;border:1.5px solid var(--blue);border-width:0 0 1.5px 1.5px}
.dress__arc::before{left:-3px;transform:rotate(-40deg)}
.dress__arc::after{right:-3px;transform:rotate(220deg)}
@keyframes arc{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
.views{display:flex;justify-content:center;gap:4px;padding:0 var(--gut);margin-top:4px}
.views button{flex:1 1 0;min-height:46px;border:0;background:none;font-size:14px;color:var(--mute);cursor:pointer;position:relative}
.views button::after{content:"";position:absolute;left:28%;right:28%;bottom:8px;height:1px;background:var(--blue);transform:scaleX(0);transition:transform .4s}
.views button[aria-pressed="true"]{color:var(--ink);font-weight:500}
.views button[aria-pressed="true"]::after{transform:none}
.hero .hero__cta{margin-top:10px;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;margin-top:20px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:500;font-size:15px;border:0;border-radius:2px;cursor:pointer;transition:background .3s}
.btn:hover{background:var(--blue)}
.btn--wide{width:100%}

/* look closer */
.closer{padding:88px var(--gut);background:var(--paper)}
.closer h2{font-size:clamp(30px, 8vw, 56px);line-height:1.08}
.closer__rail{display:flex;gap:14px;margin:28px calc(-1 * var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.closer__rail::-webkit-scrollbar{display:none}
.cl{flex:0 0 78%;margin:0;scroll-snap-align:start;scroll-margin-left:var(--gut)}
.cl__btn{display:block;width:100%;padding:0;border:0;background:var(--veil);cursor:zoom-in}
.cl__btn img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cl figcaption{margin-top:12px;font-size:14px;color:var(--mute)}
.cl figcaption b{display:block;font-family:var(--disp);font-weight:400;font-size:22px;color:var(--ink);margin-bottom:2px}
.spec{margin:36px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;border-top:1px solid var(--mist);padding-top:22px}
.spec div{min-width:0}
.spec dt{font-size:13px;color:var(--blue);font-weight:500}
.spec dd{margin:2px 0 0;font-size:15px}
.gown__try{display:inline-block;margin-top:10px;font-size:14px;font-weight:500;color:var(--blue);text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0}
.gown--elin .gown__ph{background:var(--veil)}
.gown--elin .gown__ph img{object-fit:contain}

/* journey */
section{position:relative}
.journey,.gowns,.book,.visit{padding:88px var(--gut)}
.journey__head h2,.gowns__head h2,.book h2,.visit h2{font-size:clamp(30px, 8vw, 56px);line-height:1.08;max-width:14ch}
.journey__head p,.gowns__head p,.book__lede{margin-top:14px;color:var(--mute);max-width:38ch}
.journey__body{margin-top:36px;position:relative}
.stage{margin:0;position:relative}
.stage__layers{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--mist);touch-action:pan-y}
.stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);will-change:clip-path}
.stage__img.is-on{clip-path:inset(0 0 0 0)}
.stage__img.is-in{transition:clip-path 1.6s cubic-bezier(.45,.05,.2,1)}
.stage__sheer{position:absolute;left:-10%;right:-10%;height:46%;top:100%;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) .7px, transparent 1.1px) 0 0/4px 4px,
    linear-gradient(rgba(244,246,249,0), rgba(244,246,249,.72) 30%, rgba(244,246,249,.82) 70%, rgba(244,246,249,0));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(transparent, #000 25%, #000 75%, transparent);mask:linear-gradient(transparent, #000 25%, #000 75%, transparent)}
.stage__sheer.is-run{animation:sheer 1.6s cubic-bezier(.45,.05,.2,1) forwards}
@keyframes sheer{0%{top:100%;opacity:1}85%{opacity:1}100%{top:-46%;opacity:0}}
.stage__cap{margin-top:12px;font-size:14px;color:var(--mute);min-height:2.6em}
.steps{list-style:none;margin:28px 0 0;padding:0 0 0 22px;position:relative}
.steps li{position:relative;padding:0 0 22px}
.steps li::before{content:"";position:absolute;left:-22px;top:9px;width:9px;height:9px;border-radius:50%;border:1px solid var(--blue);background:var(--veil);transform:translateX(-4px);transition:background .4s}
.steps li.is-on::before{background:var(--blue)}
.steps button{display:block;text-align:left;width:100%;border:0;background:none;padding:0;cursor:pointer}
.steps__when{display:block;font-size:13px;color:var(--blue);font-weight:500}
.steps__name{display:block;font-family:var(--disp);font-size:24px;line-height:1.2;margin-top:2px}
.steps__what{display:block;font-size:15px;color:var(--mute);max-height:0;overflow:hidden;opacity:0;transition:max-height .7s ease, opacity .5s ease}
.steps li.is-now .steps__what{max-height:12em;opacity:1;margin-top:6px}
.steps li:not(.is-now) .steps__name{color:var(--mute)}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:13px;width:1px;bottom:34px;background-image:linear-gradient(var(--pale) 60%, transparent 0);background-size:1px 6px}
.steps::after{bottom:auto;height:var(--fill, 0%);max-height:calc(100% - 47px);background-image:linear-gradient(var(--blue) 60%, transparent 0);transition:height 1.2s cubic-bezier(.45,.05,.2,1)}

/* gowns */
.gowns{background:var(--veil)}
.journey{background:var(--paper)}
.rail{display:flex;gap:14px;margin:36px calc(-1 * var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.gown{flex:0 0 72%;scroll-snap-align:start;scroll-margin-left:var(--gut)}
.gown__ph{aspect-ratio:2/3;overflow:hidden;background:var(--veil)}
.gown__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.gown:hover .gown__ph img{transform:scale(1.03)}
.gown h3{font-size:26px;margin-top:14px}
.gown__line{font-size:14px;color:var(--mute);margin-top:2px}
.gown__price{font-size:14px;margin-top:6px;font-weight:500}
.rail__bar{height:1px;background:var(--mist);margin-top:24px;position:relative;overflow:hidden}
.rail__bar i{position:absolute;inset:0 auto 0 0;width:25%;background:var(--blue)}
.note{font-size:13px;color:var(--mute);margin-top:14px}

/* booking */
.book{background:var(--paper);display:grid;gap:32px}
.book__ph{aspect-ratio:4/3;overflow:hidden;margin:0 calc(-1 * var(--gut))}
.book__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.form{margin-top:28px;display:grid;gap:24px}
.form__set{border:0;margin:0;padding:0;min-width:0}
.form__set legend{font-size:13px;font-weight:500;color:var(--blue);margin-bottom:10px;padding:0}
.opts{display:grid;gap:8px}
.opt{display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:block;border:1px solid var(--mist);padding:14px 16px;border-radius:2px;transition:border-color .3s, background .3s}
.opt b{display:block;font-weight:500;font-size:15px}
.opt i{display:block;font-style:normal;font-size:13px;color:var(--mute)}
.opt input:checked + span{border-color:var(--blue);background:var(--veil)}
.opt input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.days,.times{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:2px var(--gut)}
.days::-webkit-scrollbar,.times::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-width:64px;min-height:48px;border:1px solid var(--mist);background:var(--paper);border-radius:2px;cursor:pointer;padding:8px 12px;text-align:center;line-height:1.25;font-size:14px}
.chip small{display:block;font-size:12px;color:var(--mute)}
.chip[aria-pressed="true"]{border-color:var(--blue);background:var(--veil);color:var(--ink)}
.chip:disabled{opacity:.35;cursor:default;text-decoration:line-through}
.form__row{display:grid;gap:14px}
.fld span{display:block;font-size:13px;color:var(--mute);margin-bottom:6px}
.fld input,.fld select{width:100%;min-height:48px;border:1px solid var(--mist);border-radius:2px;background:var(--paper);padding:0 14px;font:400 16px var(--body);color:var(--ink)}
.fld select{-webkit-appearance:none;appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2345629C' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center}
.fld input:focus,.fld select:focus{border-color:var(--blue);outline:none}
.form__err{color:#8a3b3b;font-size:14px}
.done{margin-top:28px;padding:24px;border:1px solid var(--blue);background:var(--veil)}
.done h3{font-size:26px}
.done p{margin-top:8px}
.link{border:0;background:none;padding:0;margin-top:14px;color:var(--blue);text-decoration:underline;cursor:pointer;font-size:14px}

/* visit + footer */
.visit__grid{display:grid;gap:18px;margin-top:22px;color:var(--mute)}
.visit__grid a{color:var(--ink)}
.ft{padding:36px var(--gut) calc(36px + env(safe-area-inset-bottom));border-top:1px solid var(--mist);font-size:13px;color:var(--mute);display:grid;gap:8px}
.ft__mark{font-family:var(--disp);font-size:20px;letter-spacing:.08em;color:var(--ink)}

/* tablet + desktop */
@media (min-width:900px){
  :root{--gut:clamp(32px, 4vw, 72px)}
  .hd{height:68px}
  .hd__nav{display:flex;gap:28px}
  .hero{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);grid-template-rows:1fr auto;column-gap:clamp(24px, 4vw, 80px);
    min-height:max(720px, 100vh);padding:96px var(--gut) clamp(32px, 5vh, 64px)}
  .hero__text{grid-column:1;grid-row:1;align-self:center}
  .hero__sub{display:block}
  .hero h1{font-size:clamp(48px, 4.6vw, 96px)}
  .dress{grid-column:2;grid-row:1 / span 2;margin:0}
  .dress__stage{min-height:0}
  .hero .hero__cta{grid-column:1;grid-row:2;align-self:end;justify-self:start;width:auto}
  .views{max-width:520px;margin:6px auto 0;width:100%}
  .closer__rail{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(16px, 2vw, 32px);overflow:visible;margin:36px 0 0;padding:0;max-width:var(--max)}
  .cl{flex:none}
  .spec{grid-template-columns:repeat(6, minmax(0, 1fr));max-width:var(--max)}
  .journey__body{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(40px, 6vw, 120px);align-items:start;max-width:var(--max)}
  .stage{grid-column:1;grid-row:1;max-width:560px;width:100%;justify-self:end}
  .steps{grid-column:2;grid-row:1;margin-top:0;align-self:center}
  .rail{overflow:visible;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:clamp(16px, 2vw, 32px)}
  .rail__bar{display:none}
  .book{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(40px, 6vw, 120px);align-items:start}
  .book__ph{margin:0;aspect-ratio:3/4;position:sticky;top:96px}
  .form__row{grid-template-columns:1fr 1fr}
  .form__row .fld:last-child{grid-column:span 2}
  .visit__grid{grid-template-columns:repeat(3, minmax(0, 1fr));max-width:var(--max)}
  .ft{grid-template-columns:auto 1fr;align-items:baseline;gap:24px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}