/* Or Scent. Bright, flyer-faithful, quiet-luxury.
   Shape rule: photos and cards = 24px (the hero doorway is the one arch), inputs = 12px, buttons and chips = pill. */
:root{
  --paper:#FFFFFF; --soft:#FBF5F7; --blush:#F8E6ED; --line:#F0E2E8;
  --ink:#1F1B1E; --muted:#6A5F65; --rose:#CF3F78; --rose-ink:#B3305F; --on-rose:#FFFFFF;
  --shadow:0 24px 50px -28px rgba(207,63,120,.45);
  --ease:cubic-bezier(0.23,1,0.32,1);
  --nav-h:72px;
  --display:'Bellefair','Times New Roman',serif;
  --body:'Assistant',system-ui,sans-serif;
  --gutter:max(clamp(16px,5vw,64px),calc((100vw - 1240px) / 2));
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important} /* author display rules (e.g. .form{display:grid}) must not override the hidden attribute */
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
body{-webkit-tap-highlight-color:transparent;font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:6px}
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;z-index:100}
.skip:focus{top:12px}

section{padding:clamp(48px,6vw,84px) clamp(16px,5vw,64px)}
section > *{max-width:1240px;margin-inline:auto}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.1;margin-bottom:clamp(20px,2.4vw,32px)}
h3{font-weight:700;font-size:1.15rem;line-height:1.3;margin-bottom:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:var(--rose);color:var(--on-rose);font-weight:600;font-size:1.05rem;padding:14px 30px;border-radius:999px;border:1.5px solid var(--rose);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:var(--rose-ink);border-color:var(--rose-ink);box-shadow:var(--shadow)}
.btn:active{transform:scale(.98)}
.btn i{font-size:1.3rem}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:#fff;border-color:var(--rose);box-shadow:none}
.btn-sm{padding:8px 22px;font-size:.98rem}
.btn-block{width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding-inline:clamp(16px,4vw,48px);background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-brand img{height:52px;width:auto}
.nav nav{display:flex;gap:28px;margin-inline-start:auto;font-size:.98rem;color:var(--muted)}
.nav nav a{position:relative;padding:4px 0;transition:color .2s}
.nav nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;background:var(--rose);transform:scaleX(0);transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .nav nav a:hover{color:var(--ink)}
  .nav nav a:hover::after{transform:scaleX(1)}
  }

/* entrance: an arched doorway that opens to the full lobby as you scroll in.
   Static state (no scroll-timeline support, reduced motion) is the doorway itself. */
.entrance{padding:0;position:relative}
.entrance > *{max-width:none;margin:0}
.stage{position:relative;height:clamp(520px,calc(100svh - var(--nav-h)),860px);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.hero-copy{grid-column:1;align-self:center;position:relative;z-index:1;padding-block:40px;padding-inline-start:var(--gutter);padding-inline-end:clamp(24px,4vw,64px)}
.door{position:absolute;inset:0;z-index:2;overflow:hidden;background:var(--blush);
  --door-in:inset(7% 54% 6% 5% round 999px 999px 24px 24px);
  --door-shift:translateX(-37%);
  clip-path:var(--door-in)}
.door img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:var(--door-shift) scale(1.06)}
.door-note{position:absolute;inset-inline-start:var(--gutter);bottom:clamp(24px,5vh,56px);color:#fff;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.6rem);text-shadow:0 2px 24px rgba(31,27,30,.45);opacity:0}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .entrance{height:185svh;view-timeline-name:--entrance}
    .stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h))}
    .door{animation:doorOpen linear both;animation-timeline:--entrance;animation-range:contain 0% contain 72%}
    .door img{animation:doorImg linear both;animation-timeline:--entrance;animation-range:contain 0% contain 72%}
    .hero-copy{animation:copyOut linear both;animation-timeline:--entrance;animation-range:contain 0% contain 30%}
    .door-note{animation:noteIn linear both;animation-timeline:--entrance;animation-range:contain 68% contain 90%}
  }
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (max-width:860px){
    .entrance{height:150svh}
  }
}
@keyframes doorOpen{from{clip-path:var(--door-in)}to{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
@keyframes doorImg{from{transform:var(--door-shift) scale(1.06)}to{transform:none}}
@keyframes copyOut{to{opacity:0;transform:translateY(-32px)}}
@keyframes noteIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-title{font-family:var(--display);font-weight:400;font-size:clamp(2.7rem,5.2vw,4.6rem);line-height:1.08}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line > span{display:inline-block}
.hero-title .line:last-child{color:var(--rose)}
.hero-sub{font-size:clamp(1.08rem,1.4vw,1.25rem);color:var(--muted);max-width:32ch;margin:20px 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* audience marquee */
.audience{padding:18px 0;background:var(--soft);border-block:1px solid var(--line);overflow:hidden}
.audience > *{max-width:none}
.marquee{display:flex;width:max-content}
.marquee-track{display:flex;flex-shrink:0;align-items:center;animation:marquee 38s linear infinite}
.marquee-track li{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);white-space:nowrap;padding-inline:clamp(18px,2.4vw,32px);display:flex;align-items:center;gap:clamp(18px,2.4vw,32px)}
.marquee-track li::after{content:"";width:6px;height:6px;background:var(--rose);transform:rotate(45deg);flex-shrink:0;margin-inline-start:clamp(18px,2.4vw,32px)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(100%)}}

/* manifesto */
.manifesto{text-align:center}
.manifesto-text{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.35;max-width:32ch;margin-inline:auto}
.manifesto-note{max-width:52ch;margin:18px auto 0;color:var(--muted)}

/* spaces: strips that open on hover/focus/tap. Each leads to the form with its place preselected. */
.spaces{background:var(--soft)}
.strips{display:flex;gap:12px;height:clamp(400px,58vh,560px)}
.strip{position:relative;flex:1 1 0;min-width:0;border-radius:24px;overflow:hidden;display:block;background:var(--blush);isolation:isolate;transition:flex-grow .6s var(--ease)}
.strip.is-open{flex-grow:4.2}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.strip::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(31,27,30,.7),rgba(31,27,30,.05) 55%);transition:opacity .4s var(--ease)}
.strip-label{position:absolute;inset-inline:14px;bottom:18px;color:#fff;font-weight:600;font-size:.98rem;line-height:1.3;transition:opacity .25s var(--ease)}
.strip-text{position:absolute;inset-inline:28px;bottom:26px;color:#fff;max-width:36ch;line-height:1.5;opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.strip-text b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:4px}
.strip-text em{display:table;margin-top:14px;font-style:normal;font-weight:600;font-size:.95rem;background:rgba(255,255,255,.92);color:var(--rose-ink);padding:7px 18px;border-radius:999px}
.strip.is-open .strip-label{opacity:0}
.strip.is-open .strip-text{opacity:1;transform:none;transition-delay:.18s}

/* subscription: photo + feature list */
.subscription{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center;padding-inline:var(--gutter)}
.subscription > *{max-width:none;margin:0}
.sub-media{border-radius:24px;overflow:hidden;aspect-ratio:1;background:var(--blush)}
.sub-media img{width:100%;height:100%;object-fit:cover}
.features{display:grid;gap:22px}
.features li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.features i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blush);color:var(--rose);font-size:1.5rem}
.features p{color:var(--muted)}

/* quality / IFRA */
.quality{background:var(--blush);padding-block:clamp(40px,5vw,64px)}
.quality-inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.quality-mark{font-family:var(--display);font-size:clamp(4rem,10vw,8rem);line-height:1;color:var(--rose);letter-spacing:.04em}
.quality .h2{margin-bottom:12px}
.quality-text{font-size:clamp(1.08rem,1.4vw,1.25rem);max-width:52ch}

/* process */
.process{background:var(--soft)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,36px);position:relative}
.steps::before{content:"";position:absolute;top:27px;inset-inline:27px;height:1px;background:var(--line)}
.steps li{position:relative}
.num{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--line);font-family:var(--display);font-size:1.6rem;color:var(--rose);margin-bottom:16px;position:relative}
.steps p{color:var(--muted);max-width:28ch}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(28px,5vw,80px);align-items:start;padding-inline:var(--gutter)}
.faq > *{max-width:none;margin:0}
.faq-head p{color:var(--muted)}
.faq-head a{color:var(--rose-ink);text-decoration:underline;text-underline-offset:4px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:1.1rem;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:10px;height:10px;flex-shrink:0;border-right:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);transform:rotate(45deg) translateY(-4px);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
details p{color:var(--muted);padding-bottom:16px;max-width:60ch}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;background:var(--blush);padding-inline:var(--gutter)}
.contact > *{max-width:none;margin:0}
.contact-copy{max-width:500px}
.contact-copy > p{color:var(--muted);font-size:1.12rem;max-width:38ch}
.contact-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px}
.contact-links a{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.contact-links a:hover{color:var(--rose-ink);border-bottom-color:currentColor}
.contact-links i{font-size:1.4rem;color:var(--rose)}
.form{background:#fff;border-radius:24px;padding:clamp(20px,2.6vw,32px);box-shadow:var(--shadow);display:grid;gap:14px;max-width:540px;width:100%}
.field{display:grid;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{font-weight:600;font-size:.93rem}
.field input,.field select{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;transition:border-color .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(207,63,120,.15)}
.field input[aria-invalid="true"]{border-color:#B3261E}
.field-error{color:#B3261E;font-size:.9rem;font-weight:600}
.form-hint{text-align:center;color:var(--muted);font-size:.9rem;margin-top:-4px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-done{text-align:center;justify-items:center;padding-block:48px}
.form-done i{font-size:3rem;color:var(--rose)}
.form-done p{color:var(--muted);max-width:36ch}
.form-done a{color:var(--rose-ink);text-decoration:underline;text-underline-offset:4px}

/* footer */
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding:24px var(--gutter);border-top:1px solid var(--line)}
.footer img{width:96px}
.footer .contact-links{margin:0}
.copy{color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.copy a{text-decoration:underline;text-underline-offset:3px}
.copy a:hover{color:var(--rose-ink)}

/* mobile action bar: shown on small screens once the visitor is past the entrance, hidden at the form */
.mbar{display:none}

/* floating whatsapp */
.wa-float{position:fixed;inset-inline-start:20px;bottom:20px;z-index:40;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:#fff;font-size:1.65rem;box-shadow:0 12px 28px -10px rgba(207,63,120,.6);transition:transform .3s var(--ease),background .3s}

/* motion: one orchestrated hero entrance */
@media (prefers-reduced-motion:no-preference){
  .hero-title .line > span{animation:rise 1.1s var(--ease) both}
  .hero-title .line:nth-child(2) > span{animation-delay:.12s}
  .hero-sub{animation:fade 1s var(--ease) .35s both}
  .hero-cta{animation:fade 1s var(--ease) .5s both}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center}
  .marquee{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-track[aria-hidden]{display:none}
  .strip,.strip-text,.strip-label{transition-duration:.01ms}
}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fade{from{opacity:0}}

/* responsive */
@media (max-width:1024px){
  .nav nav{display:none}
  .nav .btn-sm{margin-inline-start:auto}
}
@media (max-width:860px){
  :root{--nav-h:60px}
  .nav-brand img{height:44px}
  .wa-float{display:none}
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;position:fixed;inset-inline:0;bottom:0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
  .mbar.show{transform:none}
  .nav .btn-sm{transition:opacity .25s var(--ease)}
  .nav.scrolled .btn-sm{opacity:0;pointer-events:none}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.98rem;background:#fff}
  .mbar a i{font-size:1.25rem;color:var(--rose)}
  .mbar .mbar-cta{background:var(--rose);border-color:var(--rose);color:#fff}
  .stage{grid-template-columns:1fr;height:clamp(560px,calc(100svh - var(--nav-h)),820px)}
  .hero-copy{align-self:start;padding:28px clamp(16px,5vw,64px) 0}
  .door{--door-in:inset(max(46%,340px) 4% 3% 4% round 999px 999px 20px 20px);--door-shift:translateY(34%)}
  .door img{object-position:66% 50%}
  .subscription,.contact,.faq{grid-template-columns:1fr}
  .sub-media{aspect-ratio:16/10}
  .form{max-width:none}
  .strips{height:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,5vw,64px);margin-inline:calc(-1 * clamp(16px,5vw,64px));padding-inline:clamp(16px,5vw,64px);scrollbar-width:none}
  .strips::-webkit-scrollbar{display:none}
  .strip,.strip.is-open{flex:0 0 80%;height:clamp(360px,110vw,460px);scroll-snap-align:center}
  .strip-label{display:none}
  .strip-text{opacity:1;transform:none;inset-inline:20px;bottom:20px}
  .quality-inner{grid-template-columns:1fr;gap:8px}
  .steps{grid-template-columns:1fr;gap:22px}
  .steps::before{top:0;bottom:0;inset-inline:26px auto;width:1px;height:auto}
  .steps li{display:grid;grid-template-columns:54px 1fr;column-gap:16px}
  .steps .num{grid-row:span 2;margin:0}
  .steps h3{align-self:end}
  .footer{flex-direction:column;text-align:center;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .footer .contact-links{justify-content:center}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .hero-cta .btn{padding-inline:20px}
}

/* legal pages */
.doc{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(16px,5vw,64px)}
.doc h2{font-size:1.2rem;margin:28px 0 8px}
.doc p,.doc li{color:var(--muted)}
.doc ul{list-style:disc;padding-inline-start:20px;display:grid;gap:6px}
.doc a{color:var(--rose-ink);text-decoration:underline;text-underline-offset:3px}
.doc-date{margin-top:32px;font-size:.9rem}
.nav-brand + .btn-sm{margin-inline-start:auto}