/*
 * The luxury layer — only on pages wearing a `lux-*` direction (Maison,
 * Atelier, Nova, Verdant, Riviera), and only downloaded by them.
 *
 * It does what tokens cannot: a film of grain, display type set the way
 * printed type is, hairlines that catch the light, buttons with a sheen,
 * cards that lift into glass, and a hero that breathes. All CSS, all
 * transform/opacity, and all of it switched off for anybody who asked for
 * less motion.
 */
.pb-lux{text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","ss01"}
.pb-lux ::selection{background:color-mix(in srgb,var(--pb-accent) 60%,transparent);color:var(--pb-ink)}

/* film grain over everything — 1 KB of SVG, fixed, never repainted */
body.pb-lux::after{content:'';position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* display type, set like print */
.pb-lux .pb-h1,.pb-lux .pb-h2,.pb-lux .pb-h3{text-wrap:balance;font-optical-sizing:auto}
.pb-lux .pb-h1{font-size:clamp(2.6rem,calc(6.2cqw * var(--pb-h-scale,1) + .4rem),calc(5.6rem * var(--pb-h-scale,1)));line-height:1.02;letter-spacing:-.035em}
.pb-lux .pb-h2{font-size:clamp(1.9rem,calc(3.8cqw * var(--pb-h-scale,1) + .5rem),calc(3.4rem * var(--pb-h-scale,1)));line-height:1.06;letter-spacing:-.03em}
.pb-lux .pb-lead{font-size:clamp(1.05rem,1.25cqw + .7rem,1.3rem);line-height:1.6;max-width:60ch}
.pb-lux .pb-eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:.28em;font-size:.72rem;font-weight:600}
.pb-lux .pb-eyebrow::before{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.pb-lux .pb-align-center .pb-eyebrow::after{content:'';width:28px;height:1px;background:currentColor;opacity:.7}

/* the hero breathes: a slow light drifting across its background */
.pb-lux .pb-t-hero-centered,.pb-lux .pb-t-hero-banner,.pb-lux .pb-t-hero-split{position:relative;overflow:hidden;isolation:isolate}
.pb-lux .pb-t-hero-centered::before,.pb-lux .pb-t-hero-banner::before{content:'';position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(35% 35% at 30% 30%,color-mix(in srgb,var(--pb-accent) 22%,transparent),transparent 70%);animation:luxDrift 18s ease-in-out infinite alternate}
.pb-lux .pb-t-hero-centered>*,.pb-lux .pb-t-hero-banner>*{position:relative;z-index:1}
.pb-lux .pb-t-hero-centered{min-height:min(92vh,980px);display:flex;align-items:center}
.pb-lux .pb-t-hero-centered>*{width:100%}
@keyframes luxDrift{to{transform:translate(18%,12%) scale(1.15)}}

/* buttons with a sheen */
.pb-lux .pb-btn{position:relative;overflow:hidden;letter-spacing:.02em;padding:1rem 1.9rem;box-shadow:0 18px 40px -22px color-mix(in srgb,var(--pb-accent) 85%,transparent)}
.pb-lux .pb-btn::after{content:'';position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pb-lux .pb-btn:hover::after{transform:translateX(120%) skewX(-20deg)}
.pb-lux .pb-btn:hover{transform:translateY(-2px)}
.pb-lux .pb-btn-ghost{box-shadow:none;backdrop-filter:blur(8px)}

/* cards into glass, hairlines that catch the light */
.pb-lux .pb-card,.pb-lux .pb-quote-card,.pb-lux .pb-plan{border-color:color-mix(in srgb,var(--pb-ink) 10%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pb-card) 92%,transparent),color-mix(in srgb,var(--pb-card) 70%,transparent));
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s}
.pb-lux .pb-card:hover,.pb-lux .pb-quote-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pb-accent) 40%,transparent);box-shadow:0 34px 70px -40px color-mix(in srgb,var(--pb-ink) 60%,transparent)}
.pb-lux .pb-section+.pb-section:not(.pb-bg-image):not(.pb-t-marquee):not(.pb-t-footer-simple)::before{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pb-accent) 35%,transparent),transparent)}
.pb-lux .pb-section{position:relative}

/* pictures settle slowly */
.pb-lux img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pb-lux .pb-card:hover img,.pb-lux .pb-bento-t:hover img{transform:scale(1.04)}

/* the marquee in the luxury voice */
.pb-lux .pb-t-marquee{border-top:1px solid color-mix(in srgb,var(--pb-ink) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--pb-ink) 10%,transparent)}
.pb-lux .pb-mq-w{font-style:italic}
.pb-dir-lux-nova .pb-mq-w,.pb-dir-lux-verdant .pb-mq-w{font-style:normal;text-transform:uppercase;letter-spacing:.02em}

/* per direction */
.pb-dir-lux-maison .pb-h1,.pb-dir-lux-maison .pb-h2{font-weight:500;letter-spacing:-.01em}
.pb-dir-lux-maison .pb-btn{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem}
.pb-dir-lux-atelier .pb-h1,.pb-dir-lux-atelier .pb-h2{font-weight:400;letter-spacing:-.02em}
.pb-dir-lux-atelier .pb-h1 em,.pb-dir-lux-atelier .pb-h2 em{font-style:italic}
.pb-dir-lux-nova .pb-h1{background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--pb-accent) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-dir-lux-verdant .pb-h1{background:linear-gradient(120deg,#fff 40%,var(--pb-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-dir-lux-riviera .pb-h1,.pb-dir-lux-riviera .pb-h2{font-weight:600;letter-spacing:-.025em}

@media (prefers-reduced-motion:reduce){
  .pb-lux .pb-t-hero-centered::before,.pb-lux .pb-t-hero-banner::before{animation:none}
  .pb-lux .pb-btn::after{display:none}
  .pb-lux .pb-card,.pb-lux img{transition:none}
}

/* a headline beside a picture: large, but sized for half the width */
.pb-lux .pb-t-hero-split .pb-h1{font-size:clamp(2.4rem,calc(4.4cqw + .3rem),4.8rem);line-height:1.04}
.pb-lux .pb-t-hero-split{min-height:min(86vh,900px);display:flex;align-items:center}
.pb-lux .pb-t-hero-split>*{width:100%}
.pb-lux .pb-t-hero-split .pb-split-media{border-radius:calc(var(--pb-radius,14px) * 1.4);overflow:hidden;box-shadow:0 50px 90px -50px color-mix(in srgb,var(--pb-ink) 60%,transparent)}

/* ——— the product page: the buy button is the boldest thing on the screen ——— */
.pb-lux .pb-prodhero .pb-actions{width:100%}
.pb-lux .pb-prodhero .pb-btn{
  width:100%;padding:18px 28px;font-size:1rem;letter-spacing:.04em;
  background:var(--pb-accent,#111);color:var(--pb-btn-ink,#fff);border-color:transparent
}
.pb-lux .pb-prodhero .pb-btn:hover{filter:brightness(1.06)}
.pb-lux .pb-prodhero-buy{gap:16px}
.pb-lux .pb-prodhero-shot img{border-radius:calc(var(--pb-radius,14px) + 6px);box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}

/* ——— rhythm: generous, never empty ———
   The luxury directions breathe, but 160px under one section and 160px over
   the next is a screen of nothing. Spacing scales with the screen, and where
   two sections share the page background the second starts close — the gap
   between them is the first one's, not both added together. */
.pb-lux .pb-section.pb-space-top-xl{padding-top:clamp(56px,6.5vw,96px)}
.pb-lux .pb-section.pb-space-bottom-xl{padding-bottom:clamp(56px,6.5vw,96px)}
.pb-lux .pb-section.pb-space-top-lg{padding-top:clamp(44px,5vw,72px)}
.pb-lux .pb-section.pb-space-bottom-lg{padding-bottom:clamp(44px,5vw,72px)}
.pb-lux .pb-section.pb-space-top-md{padding-top:clamp(32px,3.5vw,48px)}
.pb-lux .pb-section.pb-space-bottom-md{padding-bottom:clamp(32px,3.5vw,48px)}
.pb-lux .pb-section.pb-bg-surface:not(.pb-space-top-none) + .pb-section.pb-bg-surface:not(.pb-space-top-none){padding-top:clamp(8px,1.5vw,24px)}
.pb-lux .pb-section.pb-bg-dark:not(.pb-space-top-none) + .pb-section.pb-bg-dark:not(.pb-space-top-none){padding-top:clamp(8px,1.5vw,24px)}

/* ——— the article, dressed: a long-read worth staying for ——— */
.pb-lux .pb-article{font-size:clamp(1.05rem,1rem + .25vw,1.18rem);line-height:1.8}
.pb-lux .pb-article>p:first-of-type{font-size:1.14em;line-height:1.7}
.pb-lux .pb-article h2{font-family:var(--pb-font-heading,inherit);font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);
  margin-top:2.2em;letter-spacing:-.01em}
.pb-lux .pb-article blockquote{margin:2.2em -4%;padding:0;border:0;text-align:center;
  font-family:var(--pb-font-heading,inherit);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.3rem);line-height:1.3;font-style:italic}
.pb-lux .pb-article blockquote::before{content:"“";display:block;font-size:2.4em;line-height:.6;color:var(--pb-accent,#111);opacity:.9}
.pb-lux .pb-article blockquote p{margin:0}
.pb-lux .pb-article .pa-note{border:0;border-radius:calc(var(--pb-radius,14px) + 4px);padding:22px 26px;
  background:color-mix(in srgb,var(--pb-accent,#111) 9%,transparent);box-shadow:inset 3px 0 0 var(--pb-accent,#111)}
.pb-lux .pb-article .pa-signup{padding:clamp(22px,3vw,34px);border-radius:calc(var(--pb-radius,14px) + 6px);text-align:center;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--pb-accent,#111) 22%,transparent),transparent 60%),var(--pb-card,#fafafa);
  border:1px solid color-mix(in srgb,var(--pb-accent,#111) 25%,transparent)}
.pb-lux .pb-article .pa-signup b{font-size:1.35rem;margin-bottom:16px}
.pb-lux .pb-article .pa-signup-f{justify-content:center}
.pb-lux .pb-article .pa-cta{text-align:center;margin:2em 0}
.pb-lux .pb-article .pa-cta-go{padding:16px 30px;border-radius:999px;box-shadow:0 18px 40px -18px var(--pb-accent,#111)}
.pb-lux .pb-article hr{border:0;text-align:center;margin:2.6em 0}
.pb-lux .pb-article hr::after{content:"✦  ✦  ✦";letter-spacing:.6em;color:var(--pb-accent,#111);font-size:.8rem}
.pb-lux .pb-posthead-title{letter-spacing:-.02em}

/* ——— columns, as refined cards: details, "for you / not for you" ——— */
.pb-lux .pb-t-columns .pb-col{padding:clamp(18px,2.2vw,28px);border-radius:calc(var(--pb-radius,14px) + 4px);
  background:color-mix(in srgb,currentColor 4%,transparent);border:1px solid color-mix(in srgb,currentColor 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent)}
.pb-lux .pb-t-columns .pb-col .pb-h3{margin:0 0 10px;font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pb-accent,#111)}
.pb-lux .pb-t-columns .pb-col .pb-prose{margin:0;font-size:1rem;word-break:break-word}

/* ——— legal pages: a document, not a launch ———
   A full-screen hero is right for a landing page and wrong above a privacy
   policy: the title is a band, the reading starts close beneath it, and the
   rhythm between sections is a step tighter than on a sales page. */
.pb-lux.pb-kind-legal .pb-t-hero-centered,
.pb-lux.pb-kind-legal .pb-t-hero-split{min-height:0}
.pb-lux.pb-kind-legal .pb-section.pb-space-top-xl{padding-top:clamp(40px,5vw,72px)}
.pb-lux.pb-kind-legal .pb-section.pb-space-bottom-xl{padding-bottom:clamp(40px,5vw,72px)}
.pb-lux.pb-kind-legal .pb-section.pb-space-top-lg{padding-top:clamp(32px,4vw,56px)}
.pb-lux.pb-kind-legal .pb-section.pb-space-bottom-lg{padding-bottom:clamp(32px,4vw,56px)}
.pb-lux.pb-kind-legal .pb-section.pb-bg-surface + .pb-section.pb-bg-surface,
.pb-lux.pb-kind-legal .pb-section.pb-bg-dark + .pb-section.pb-bg-dark{padding-top:clamp(8px,1.5vw,20px)}

/* ——— one gutter on a phone ———
   The header kept 32px while every section dropped to 15px, so the logo sat
   in from the headings beneath it and the content hugged the glass. One
   20px edge for all of it: the logo, the headings and the words line up. */
@container pb (max-width:640px){
  .pb-lux .pb-wrap,
  .pb-lux .pb-t-nav-fullwidth .pb-wrap{padding-left:20px;padding-right:20px}
  .pb-lux .pb-v-wide .pb-wrap,
  .pb-lux .pb-w-full.pb-wrap{padding-left:0;padding-right:0}
  .pb-lux .pb-t-nav-fullwidth .pb-w-full.pb-wrap{padding-left:20px;padding-right:20px}
}
/* And on a tablet: one 28px edge for the header and every section. */
@container pb (min-width:641px) and (max-width:960px){
  .pb-lux .pb-wrap,
  .pb-lux .pb-t-nav-fullwidth .pb-wrap,
  .pb-lux .pb-t-nav-fullwidth .pb-w-full.pb-wrap{padding-left:28px;padding-right:28px}
  .pb-lux .pb-v-wide .pb-wrap,
  .pb-lux .pb-t-marquee .pb-w-full.pb-wrap{padding-left:0;padding-right:0}
}