@import url('../fonts/fonts.css');

/* ============================================================
   LUYS LUYS cakes - design system
   Strategy: DRENCHED. Фирменный оксблад заливает холст.
   Palette: oxblood #8F0000 · gold #B77E33 · warm ink #F6EFE7
   Type: Unbounded (display, geometric) + Golos Text (humanist)
   ============================================================ */

:root{
  /* surface */
  --ox:        #8f0000;
  --ox-hi:     #a80505;
  --ox-deep:   #5c0101;
  --void:      #120303;
  --void-2:    #1c0707;
  --void-3:    #250a0a;

  /* ink */
  --ink:       #f6efe7;
  --ink-2:     rgba(246,239,231,.80);
  --ink-3:     rgba(246,239,231,.52);
  --on-void:   #efe6db;
  --on-void-2: rgba(239,230,219,.68);

  /* metal */
  --gold:      #b77e33;
  --gold-lt:   #e3b872;
  --gold-hi:   #f0d6a3;

  /* lines */
  --hair:      rgba(227,184,114,.26);
  --hair-soft: rgba(246,239,231,.14);

  /* type */
  --display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --text:    'Golos Text', ui-sans-serif, system-ui, sans-serif;

  /* fluid scale - ratio 1.28 */
  --t-xs:   clamp(.69rem, .66rem + .12vw, .78rem);
  --t-sm:   clamp(.82rem, .78rem + .16vw, .93rem);
  --t-base: clamp(1rem, .95rem + .22vw, 1.14rem);
  --t-md:   clamp(1.2rem, 1.1rem + .45vw, 1.5rem);
  --t-lg:   clamp(1.6rem, 1.35rem + 1.1vw, 2.5rem);
  --t-xl:   clamp(2.2rem, 1.6rem + 2.6vw, 4rem);
  --t-2xl:  clamp(2.9rem, 1.8rem + 4.6vw, 5.75rem);

  /* rhythm */
  --gut:     clamp(1.25rem, 4vw, 3.5rem);
  --sec:     clamp(6rem, 12vh, 11rem);
  --sec-lg:  clamp(8rem, 18vh, 15rem);
  --maxw:    1560px;
  --maxw-nr: 1180px;

  /* motion - exponential ease-out only */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.22,.61,.36,1);
  --e-in:   cubic-bezier(.7,0,.84,0);

  /* z scale */
  --z-base: 1;
  --z-pin: 10;
  --z-nav: 60;
  --z-menu: 70;
  --z-overlay: 80;
  --z-grain: 90;
  --z-cursor: 100;
  --z-boot: 110;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--text);
  font-size:var(--t-base);
  line-height:1.62;
  color:var(--ink);
  background:var(--ox);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1,"kern" 1;
}
body.is-locked{overflow:hidden}

::selection{background:var(--gold-lt);color:var(--void)}

/* ---------- fixed film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);
  pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:var(--z-nav);
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  pointer-events:none;
}

/* ---------- typography primitives ---------- */
.d1,.d2,.d3{
  font-family:var(--display);
  font-weight:300;
  line-height:.94;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.d1{font-size:var(--t-2xl)}
.d2{font-size:var(--t-xl)}
.d3{font-size:var(--t-lg);line-height:1.06;letter-spacing:-.025em}
.d1 em,.d2 em,.d3 em{font-style:normal;font-weight:600;color:var(--gold-lt)}
.on-void .d1 em,.on-void .d2 em,.on-void .d3 em{color:var(--gold-lt)}

.lede{font-size:var(--t-md);line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.body-2{color:var(--ink-2);max-width:68ch;text-wrap:pretty}
.mark{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);
}
.num{font-family:var(--display);font-weight:200;font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-nr{width:100%;max-width:var(--maxw-nr);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.pad{padding-block:var(--sec)}
.pad-lg{padding-block:var(--sec-lg)}

.on-void{background:var(--void);color:var(--on-void)}
.on-void .lede,.on-void .body-2{color:var(--on-void-2)}

/* section rule */
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ============================================================
   BOOT / preloader
   ============================================================ */
.boot{
  position:fixed;inset:0;z-index:var(--z-boot);
  background:var(--void);
  display:grid;place-items:center;
  transition:opacity .7s var(--e-out),visibility .7s;
}
.boot__inner{display:grid;justify-items:center;gap:1.6rem;padding:2rem}
.boot__logo{width:clamp(104px,17vw,152px);opacity:0;transform:scale(.94);
  animation:bootLogo 1s var(--e-out) .1s forwards}
.boot__bar{width:min(240px,52vw);height:1px;background:var(--hair-soft);overflow:hidden}
.boot__bar i{display:block;height:100%;width:100%;background:var(--gold-lt);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--e-soft)}
.boot__word{font-family:var(--display);font-weight:200;font-size:var(--t-xs);
  letter-spacing:.34em;text-transform:uppercase;color:var(--on-void-2);
  opacity:0;animation:bootLogo .8s var(--e-out) .45s forwards}
@keyframes bootLogo{to{opacity:1;transform:none}}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}

/* ============================================================
   NAV - floating island
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding:clamp(.85rem,2vw,1.5rem) var(--gut);
  display:flex;align-items:center;gap:1.5rem;
  transition:transform .55s var(--e-out);
}
.nav.is-hidden{transform:translateY(-118%)}
.nav__logo{flex:0 0 auto;display:block;width:clamp(64px,6.4vw,92px);
  transition:transform .5s var(--e-out)}
.nav__logo:hover{transform:scale(1.05)}
.nav__logo img{width:100%}

.nav__island{
  margin-left:auto;display:flex;align-items:center;gap:.15rem;
  padding:.34rem;border-radius:999px;
  background:rgba(18,3,3,.42);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(246,239,231,.10),0 12px 40px -18px rgba(0,0,0,.7);
}
.nav__link{
  position:relative;padding:.62rem 1.05rem;border-radius:999px;
  font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap;
  transition:color .4s var(--e-out),background-color .4s var(--e-out);
}
.nav__link:hover{color:var(--ink);background:rgba(246,239,231,.08)}
.nav__cta{
  margin-left:.4rem;display:inline-flex;align-items:center;gap:.65rem;
  padding:.5rem .5rem .5rem 1.15rem;border-radius:999px;
  background:var(--ink);color:var(--void);font-weight:500;font-size:var(--t-sm);
  transition:transform .5s var(--e-out),background-color .4s var(--e-out);
}
.nav__cta:hover{background:var(--gold-hi)}
.nav__cta:active{transform:scale(.97)}
.nav__cta i{
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:rgba(18,3,3,.10);font-style:normal;
  transition:transform .5s var(--e-out),background-color .4s var(--e-out);
}
.nav__cta:hover i{transform:translate(3px,-2px);background:rgba(18,3,3,.16)}

.nav__phone{
  font-family:var(--display);font-weight:300;font-size:var(--t-sm);
  letter-spacing:.01em;padding:.6rem 1rem;color:var(--ink);
  white-space:nowrap;
}
.nav__phone:hover{color:var(--gold-hi)}

/* burger */
.burger{
  display:none;width:46px;height:46px;border-radius:999px;margin-left:auto;
  background:rgba(18,3,3,.42);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(246,239,231,.10);
  position:relative;
}
.burger span{
  position:absolute;left:50%;width:19px;height:1.5px;background:var(--ink);
  border-radius:2px;transform-origin:50% 50%;
  transition:transform .55s var(--e-out),opacity .3s var(--e-out);
}
.burger span:nth-child(1){top:19px;transform:translateX(-50%)}
.burger span:nth-child(2){top:25px;transform:translateX(-50%)}
.burger.is-open span:nth-child(1){transform:translateX(-50%) translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateX(-50%) translateY(-3px) rotate(-45deg)}

/* full-screen menu */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:rgba(18,3,3,.86);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  backdrop-filter:blur(28px) saturate(1.2);
  display:grid;align-content:center;gap:.2rem;
  padding:6rem var(--gut) 3rem;
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--e-out),visibility .6s;
}
.menu.is-open{opacity:1;visibility:visible}
.menu a{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,8vw,3.2rem);line-height:1.18;letter-spacing:-.03em;
  color:var(--on-void);
  opacity:0;transform:translateY(38px);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out),color .3s;
}
.menu a:active{color:var(--gold-lt)}
.menu.is-open a{opacity:1;transform:none}
.menu.is-open a:nth-child(1){transition-delay:.10s}
.menu.is-open a:nth-child(2){transition-delay:.16s}
.menu.is-open a:nth-child(3){transition-delay:.22s}
.menu.is-open a:nth-child(4){transition-delay:.28s}
.menu.is-open a:nth-child(5){transition-delay:.34s}
.menu.is-open a:nth-child(6){transition-delay:.40s}
.menu.is-open a:nth-child(7){transition-delay:.46s}
.menu__foot{
  margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  padding-top:1.6rem;border-top:1px solid var(--hair);
  font-size:var(--t-sm);color:var(--on-void-2);
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--e-out) .5s,transform .7s var(--e-out) .5s;
}
.menu.is-open .menu__foot{opacity:1;transform:none}

@media (max-width:1080px){
  .nav__island{display:none}
  .burger{display:block}
  /* without the island the bare logo floats over scrolling headings,
     so it gets the same glass plate as the burger */
  .nav__logo{
    width:clamp(58px,14vw,78px);padding:.62rem .8rem;border-radius:22px;
    background:rgba(18,3,3,.42);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:inset 0 1px 0 rgba(246,239,231,.10);
    box-sizing:content-box;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--ink);--fg:var(--void);
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.72rem .72rem .72rem 1.5rem;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-weight:500;font-size:var(--t-sm);letter-spacing:.01em;white-space:nowrap;
  transition:transform .55s var(--e-out),background-color .45s var(--e-out),color .45s var(--e-out);
  will-change:transform;
}
.btn i{
  width:34px;height:34px;flex:0 0 34px;border-radius:999px;display:grid;place-items:center;
  background:rgba(18,3,3,.10);font-style:normal;font-size:.9em;
  transition:transform .55s var(--e-out),background-color .45s var(--e-out);
}
.btn:hover{background:var(--gold-hi)}
.btn:hover i{transform:translate(3px,-2px) scale(1.06);background:rgba(18,3,3,.17)}
.btn:active{transform:scale(.975)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn--ghost i{background:rgba(246,239,231,.10)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--void);box-shadow:inset 0 0 0 1px transparent}
.btn--ghost:hover i{background:rgba(18,3,3,.10)}
.btn--gold{--bg:var(--gold-lt);--fg:var(--void)}
.btn--gold:hover{--bg:var(--gold-hi)}
.btn--lg{padding:.95rem .95rem .95rem 1.9rem;font-size:var(--t-base)}
.btn--lg i{width:40px;height:40px;flex-basis:40px}

/* text link with sweeping underline */
.tlink{
  position:relative;display:inline-block;color:var(--gold-lt);
  font-weight:500;padding-bottom:2px;
}
.tlink::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .6s var(--e-out);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  padding-block:clamp(8rem,16vh,11rem) clamp(2rem,5vh,3.5rem);
  overflow:clip;isolation:isolate;
}
.hero::before{ /* vignette + warm core */
  content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 85% at 78% 12%, rgba(227,184,114,.20), transparent 58%),
    radial-gradient(95% 70% at 12% 92%, rgba(92,1,1,.85), transparent 62%),
    linear-gradient(180deg, var(--ox-hi) 0%, var(--ox) 42%, var(--ox-deep) 100%);
}
.hero::after{ /* bottom scrim: keeps the side copy legible over the photo */
  content:'';position:absolute;left:0;right:0;bottom:0;height:58vh;z-index:1;
  background:linear-gradient(180deg,transparent 0%,rgba(92,1,1,.42) 42%,rgba(18,3,3,.82) 100%);
  pointer-events:none;
}

.hero__grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem);
  align-items:end;position:relative;z-index:3;
}
.hero__head{max-width:19ch}
.hero__kicker{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .85rem;
  margin-bottom:clamp(1.1rem,2.5vw,1.8rem);
  font-family:var(--display);font-weight:300;font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
}
.hero__kicker::before{content:'';width:clamp(28px,5vw,64px);height:1px;background:var(--gold)}
.hero h1{
  font-family:var(--display);font-weight:250;
  font-size:clamp(2.75rem,10.5vw,5.75rem);
  line-height:.92;letter-spacing:-.045em;text-wrap:balance;
}
.hero h1 b{font-weight:600;color:var(--gold-hi)}
.hero h1 .sw{display:block;overflow:hidden}
.hero h1 .sw span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--e-out)}
.is-booted .hero h1 .sw span{transform:none}
.is-booted .hero h1 .sw:nth-child(2) span{transition-delay:.09s}
.is-booted .hero h1 .sw:nth-child(3) span{transition-delay:.18s}

.hero__side{
  display:grid;gap:1.6rem;justify-items:start;align-content:end;
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--e-out) .5s,transform .9s var(--e-out) .5s;
}
.is-booted .hero__side{opacity:1;transform:none}
.hero__acts{display:flex;flex-wrap:wrap;gap:.7rem}

@media (min-width:1024px){
  .hero__grid{grid-template-columns:1.35fr .85fr;align-items:end}
  .hero__head{max-width:none}
}

/* Narrow screens: the per-line mask would clip long Russian words
   ("которого" is wider than the column), so the headline flows and wraps
   normally and the entrance becomes a lift instead of a curtain. */
@media (max-width:767px){
  .hero h1{font-size:clamp(2.15rem,9vw,3.1rem);letter-spacing:-.038em;line-height:.98}
  .hero h1 .sw{overflow:visible}
  .hero h1 .sw span{
    transform:translateY(20px);opacity:0;
    transition:transform .9s var(--e-out),opacity .9s var(--e-out);
  }
  .is-booted .hero h1 .sw span{transform:none;opacity:1}
}

/* floating parallax objects */
.floaty{
  position:absolute;z-index:2;pointer-events:none;
  border-radius:50%;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(18,3,3,.85), inset 0 0 0 1px rgba(246,239,231,.10);
  opacity:0;animation:floatyIn 1.2s var(--e-out) forwards;
  will-change:transform;
}
.floaty img{width:100%;height:100%;object-fit:cover}
@keyframes floatyIn{to{opacity:1}}
.floaty--1{width:clamp(120px,17vw,250px);aspect-ratio:1;right:3%;top:16%;animation-delay:.55s}
.floaty--2{width:clamp(84px,10vw,150px);aspect-ratio:1;right:26%;top:52%;animation-delay:.7s}
.floaty--3{width:clamp(70px,8vw,120px);aspect-ratio:1;left:4%;top:24%;animation-delay:.85s}
/* On narrow screens the circles collide with the burger and the headline,
   so the imagery moves behind the type as one soft plate instead. */
@media (max-width:1023px){
  .floaty{display:none}
}

/* hero main plate */
.hero__plate{
  position:absolute;right:clamp(-6%,-2vw,0%);bottom:0;z-index:0;
  width:clamp(300px,46vw,720px);aspect-ratio:3/4;
  /* fade on the left and bottom edges so the photo dissolves into the drench
     instead of sitting on the page as a hard rectangle */
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 98%),
                     linear-gradient(90deg,transparent 0,#000 38%);
  mask-image:linear-gradient(180deg,#000 60%,transparent 98%),
             linear-gradient(90deg,transparent 0,#000 38%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  opacity:0;animation:floatyIn 1.4s var(--e-out) .35s forwards;
  will-change:transform;
}
.hero__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  mix-blend-mode:luminosity;opacity:.5;filter:contrast(1.1) brightness(.92)}
@media (max-width:1023px){
  .hero__plate{
    right:-16%;bottom:auto;top:2%;
    width:min(96vw,560px);aspect-ratio:3/4.1;
    -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 90%),
                       linear-gradient(90deg,transparent 0,#000 30%);
    mask-image:linear-gradient(180deg,#000 40%,transparent 90%),
               linear-gradient(90deg,transparent 0,#000 30%);
  }
  .hero__plate img{opacity:.3}
}

.hero__scroll{
  position:absolute;left:var(--gut);bottom:clamp(1rem,3vh,2rem);z-index:3;
  display:flex;align-items:center;gap:.7rem;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-family:var(--display);font-weight:300;
}
.hero__scroll i{width:1px;height:34px;background:linear-gradient(180deg,var(--gold),transparent);
  display:block;animation:scrollPulse 2.4s var(--e-soft) infinite}
@keyframes scrollPulse{0%{transform:scaleY(.2);transform-origin:0 0}
  45%{transform:scaleY(1);transform-origin:0 0}
  46%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}
@media (max-width:1023px){.hero__scroll{display:none}}

/* ============================================================
   MARQUEE ribbon
   ============================================================ */
.ribbon{
  background:var(--void);border-block:1px solid var(--hair);
  padding-block:clamp(.9rem,2vw,1.35rem);overflow:hidden;position:relative;z-index:2;
}
.ribbon__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ribbon:hover .ribbon__track{animation-play-state:paused}
.ribbon__set{display:flex;align-items:center;flex:0 0 auto}
.ribbon__set span{
  font-family:var(--display);font-weight:300;
  font-size:clamp(.95rem,2.1vw,1.6rem);letter-spacing:-.01em;
  color:var(--on-void);padding-inline:clamp(1rem,2.4vw,2rem);white-space:nowrap;
}
.ribbon__set b{color:var(--gold-lt);font-weight:300}
.ribbon__set em{
  font-style:normal;color:var(--gold);font-size:.7em;
  padding-inline:.2rem;transform:translateY(-.1em);display:inline-block;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   MANIFESTO - sticky word reveal
   ============================================================ */
.manifest{background:var(--void);padding-block:var(--sec-lg)}
.manifest__sticky{
  position:sticky;top:0;min-height:100svh;
  display:grid;align-content:center;gap:clamp(1.8rem,4vw,3rem);
  padding-block:clamp(4rem,10vh,7rem);
}
.manifest__q{
  font-family:var(--display);font-weight:250;
  font-size:clamp(1.5rem,4.4vw,3.35rem);line-height:1.18;letter-spacing:-.03em;
  max-width:22ch;
}
.manifest__q w{display:inline-block;color:rgba(239,230,219,.16);
  transition:color .45s var(--e-out)}
.manifest__q w.on{color:var(--on-void)}
.manifest__q w.au.on{color:var(--gold-lt)}
.manifest__meta{
  display:grid;gap:1rem;max-width:44ch;color:var(--on-void-2);
  padding-left:clamp(0px,2vw,1.5rem);border-left:1px solid var(--hair);
}
.manifest__meta strong{display:block;color:var(--on-void);font-weight:500}

/* ============================================================
   REVEAL utility
   ============================================================ */
.rv{opacity:0;transform:translateY(34px);filter:blur(6px);
  transition:opacity .95s var(--e-out),transform .95s var(--e-out),filter .95s var(--e-out)}
.rv.in{opacity:1;transform:none;filter:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
.rv-d5{transition-delay:.35s}.rv-d6{transition-delay:.42s}

/* clip reveal for images.
   The clip lives on the inner img, never on the observed element:
   a clip-path on the target zeroes its IntersectionObserver rect
   and the reveal would never fire. */
.cr > img,.cr > picture > img{
  clip-path:inset(0 0 100% 0);transform:scale(1.06);
  transition:clip-path 1.15s var(--e-out),transform 1.4s var(--e-out);
}
.cr.in > img,.cr.in > picture > img{clip-path:inset(0 0 0 0);transform:none}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.shead{display:grid;gap:clamp(1rem,2.4vw,1.7rem);margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.shead__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--hair)}
.shead__top .mark{flex:0 0 auto}
.shead__top p{margin-left:auto;font-size:var(--t-sm);color:var(--ink-3);max-width:34ch}
.on-void .shead__top p{color:rgba(239,230,219,.55)}

/* ============================================================
   OCCASIONS - pinned horizontal rail
   ============================================================ */
.rail{background:var(--void);position:relative}
.rail__pin{height:340vh;position:relative}
.rail__vp{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
}
.rail__head{padding-inline:var(--gut);max-width:var(--maxw);margin:0 auto 2.2rem;width:100%}
.rail__track{display:flex;gap:clamp(1rem,2vw,1.8rem);padding-inline:var(--gut);
  will-change:transform}
.occ{
  flex:0 0 clamp(230px,26vw,360px);position:relative;
  border-radius:clamp(14px,1.4vw,22px);overflow:hidden;
  aspect-ratio:3/4.05;isolation:isolate;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.occ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out);z-index:-1}
.occ:hover img{transform:scale(1.07)}
.occ::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(18,3,3,.05) 30%,rgba(18,3,3,.88) 100%)}
.occ__body{position:relative;z-index:1;margin-top:auto;padding:clamp(1.1rem,2vw,1.6rem);
  display:grid;gap:.5rem;height:100%;align-content:end}
.occ__body h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.45rem);letter-spacing:-.02em;line-height:1.1}
.occ__body p{font-size:var(--t-sm);color:rgba(239,230,219,.82);text-wrap:pretty}
.occ__tag{
  position:absolute;top:clamp(.8rem,1.4vw,1.15rem);left:clamp(.8rem,1.4vw,1.15rem);
  z-index:1;padding:.32rem .7rem;border-radius:999px;
  background:rgba(18,3,3,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.3);
  font-family:var(--display);font-weight:300;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);
}
.rail__hint{padding-inline:var(--gut);max-width:var(--maxw);margin:2rem auto 0;width:100%;
  display:flex;align-items:center;gap:.8rem;font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(239,230,219,.45);
  font-family:var(--display);font-weight:300}
.rail__hint i{flex:1;height:1px;background:var(--hair);display:block;max-width:200px}

.occ{cursor:pointer}
.occ__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-top:.45rem;padding-top:.7rem;border-top:1px solid var(--hair);
}
.occ__from{font-family:var(--display);font-weight:400;color:var(--gold-hi);
  font-size:clamp(.9rem,1.2vw,1.05rem);letter-spacing:-.01em;white-space:nowrap}

@media (max-width:900px){
  .rail__pin{height:auto}
  .rail__vp{position:static;height:auto;padding-block:var(--sec)}
  .rail__track{overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:1.2rem;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .rail__track::-webkit-scrollbar{display:none}
  .occ{flex-basis:min(74vw,300px);scroll-snap-align:center}
}

/* ============================================================
   FORMAT SHEET - карточка формата с примерами и ценой
   ============================================================ */
.fsx{
  position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;
  padding:clamp(.75rem,3vw,2.5rem);
  opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s;
}
.fsx.is-open{opacity:1;visibility:visible}
.fsx__bd{position:absolute;inset:0;background:rgba(12,2,2,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fsp{
  position:relative;z-index:1;width:min(1080px,100%);max-height:min(90svh,860px);
  border-radius:clamp(14px,1.8vw,24px);overflow:hidden;background:var(--void-2);
  box-shadow:0 60px 140px -50px rgba(0,0,0,.95),inset 0 0 0 1px rgba(227,184,114,.22);
  display:grid;grid-template-columns:1fr;
  transform:scale(.96) translateY(12px);transition:transform .6s var(--e-out);
}
.fsx.is-open .fsp{transform:none}
.fsp[hidden]{display:none}
.fsp__x{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  color:var(--ink);background:rgba(18,3,3,.6);font-size:1rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  transition:background-color .4s var(--e-out),transform .4s var(--e-out);
}
.fsp__x:hover{background:rgba(246,239,231,.16);transform:rotate(90deg)}
.fsp__gal{display:grid;gap:6px;padding:6px;align-content:start;
  grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.fsp__gal::-webkit-scrollbar{display:none}
.fsp__gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:clamp(9px,1.2vw,14px);scroll-snap-align:center}
.fsp__body{overflow-y:auto;padding:clamp(1.3rem,3vw,2.4rem);
  display:grid;gap:.85rem;align-content:start;overscroll-behavior:contain}
.fsp__kick{font-family:var(--display);font-weight:300;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.fsp__t{font-family:var(--display);font-weight:300;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.5rem,3.2vw,2.2rem)}
.fsp__price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.fsp__price b{font-family:var(--display);font-weight:250;letter-spacing:-.03em;
  line-height:1;color:var(--gold-hi);font-size:clamp(2rem,4.6vw,3rem);
  font-variant-numeric:tabular-nums}
.fsp__price s{text-decoration:none;color:var(--ink-3);font-size:var(--t-md)}
.fsp__lede{font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.fsp__rows{display:grid;margin-top:.3rem}
.fsp__rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.6rem 0;border-bottom:1px solid var(--hair-soft);font-size:var(--t-sm)}
.fsp__rows li:first-child{border-top:1px solid var(--hair)}
.fsp__rows li span{color:var(--ink-2);text-wrap:pretty}
.fsp__rows li b{font-family:var(--display);font-weight:400;color:var(--gold-lt);
  white-space:nowrap;font-size:var(--t-sm);text-align:right}
.fsp__note{font-size:var(--t-xs);color:var(--ink-3);text-wrap:pretty}
.fsp__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}

@media (min-width:860px){
  /* Галерея вынута из потока грида: высоту панели задаёт колонка с текстом,
     иначе три фото растягивали карточку и справа зияла пустота. */
  .fsp{position:relative;grid-template-columns:50% 50%}
  .fsp__gal{position:absolute;top:0;left:0;bottom:0;width:50%;
    grid-auto-flow:row;grid-auto-columns:auto;overflow-x:hidden;overflow-y:auto;
    gap:8px;padding:8px;overscroll-behavior:contain}
  .fsp__gal img{aspect-ratio:4/3.2}
  .fsp__body{grid-column:2;min-height:min(560px,80svh)}
}
@media (max-width:859px){
  .fsp{max-height:92svh;grid-template-rows:minmax(0,auto) minmax(0,1fr)}
  .fsp__gal img{aspect-ratio:4/3}
}

/* ============================================================
   PROCESS - sticky index + steps
   ============================================================ */
.proc{background:var(--ox);position:relative;overflow:clip}
.proc::before{content:'';position:absolute;inset:0;
  background:radial-gradient(90% 60% at 85% 10%,rgba(227,184,114,.13),transparent 60%);
  pointer-events:none}
.proc__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);position:relative}
@media (min-width:1024px){.proc__grid{grid-template-columns:.85fr 1.15fr;
  gap:clamp(3rem,6vw,7rem);align-items:start}}
.proc__aside{position:relative}
@media (min-width:1024px){.proc__aside{position:sticky;top:clamp(7rem,14vh,9rem)}}
.proc__aside .d2{margin-bottom:1.3rem}
.proc__count{
  margin-top:2rem;display:flex;align-items:baseline;gap:.6rem;
  padding-top:1.2rem;border-top:1px solid var(--hair);
}
.proc__count b{font-family:var(--display);font-weight:200;
  font-size:clamp(3rem,7vw,5rem);line-height:.9;color:var(--gold-hi);
  font-variant-numeric:tabular-nums}
.proc__count s{text-decoration:none;color:var(--ink-3);font-size:var(--t-md)}
.proc__count em{font-style:normal;font-size:var(--t-sm);color:var(--ink-2);
  margin-left:auto;text-align:right;max-width:16ch}

.steps{display:grid;gap:clamp(.7rem,1.4vw,1rem);counter-reset:s}
.step{
  position:relative;padding:clamp(1.3rem,2.6vw,2rem);
  border-radius:clamp(14px,1.4vw,20px);
  background:linear-gradient(180deg,rgba(18,3,3,.34),rgba(18,3,3,.18));
  box-shadow:inset 0 1px 0 rgba(246,239,231,.09);
  display:grid;grid-template-columns:auto 1fr;gap:.5rem clamp(1rem,2vw,1.8rem);
  align-items:start;
  transition:transform .6s var(--e-out),background-color .6s var(--e-out),
             box-shadow .6s var(--e-out);
}
.step:hover{transform:translateX(6px);
  box-shadow:inset 0 1px 0 rgba(246,239,231,.16),0 22px 50px -28px rgba(0,0,0,.7)}
.step__n{
  font-family:var(--display);font-weight:200;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums;
  min-width:2.2ch;
}
.step__t{font-family:var(--display);font-weight:400;
  font-size:clamp(1.02rem,1.6vw,1.28rem);letter-spacing:-.02em;line-height:1.2}
.step__d{grid-column:2;font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.step__meta{grid-column:2;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.step__meta span{
  font-size:.72rem;letter-spacing:.06em;padding:.25rem .6rem;border-radius:999px;
  background:rgba(246,239,231,.09);color:var(--ink-2);
}

/* ============================================================
   FLAVOURS
   ============================================================ */
.flav{background:var(--void)}
.flav__grid{display:grid;gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fl{
  position:relative;border-radius:clamp(12px,1.2vw,18px);overflow:hidden;
  background:var(--void-2);box-shadow:inset 0 0 0 1px rgba(246,239,231,.07);
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out);
  display:grid;
}
.fl:hover{transform:translateY(-7px);
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.4),0 30px 60px -32px rgba(0,0,0,.9)}
.fl__ph{aspect-ratio:4/3;overflow:hidden;background:#fff}
.fl__ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--e-out)}
.fl:hover .fl__ph img{transform:scale(1.08)}
.fl__b{padding:clamp(.95rem,1.7vw,1.3rem);display:grid;gap:.42rem}
.fl__b h3{font-family:var(--display);font-weight:400;font-size:var(--t-base);
  letter-spacing:-.015em;line-height:1.22}
.fl__b p{font-size:.86rem;line-height:1.5;color:rgba(239,230,219,.66);text-wrap:pretty}
.fl__b .price{font-family:var(--display);font-weight:300;font-size:.86rem;
  color:var(--gold-lt);margin-top:.2rem}
.fl__b .price--pay{
  justify-self:start;padding:.2rem .6rem;border-radius:999px;color:var(--gold-hi);
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.45);background:rgba(227,184,114,.08);
  font-weight:400;font-variant-numeric:tabular-nums;
}
/* плитка без фото: не дыра, а типографский блок фирменного цвета */
.fl__ph--soon{
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--ox),var(--ox-deep));
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.22);
}
.fl__ph--soon span{
  font-family:var(--display);font-weight:200;font-size:var(--t-xs);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(227,184,114,.75);
  text-align:center;line-height:1.9;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{background:var(--ox);overflow:clip}
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.chip{
  padding:.55rem 1.1rem;border-radius:999px;font-size:var(--t-sm);
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair);
  transition:background-color .45s var(--e-out),color .45s var(--e-out),
             box-shadow .45s var(--e-out),transform .45s var(--e-out);
}
.chip:hover{color:var(--ink);background:rgba(246,239,231,.08)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--void);
  box-shadow:inset 0 0 0 1px transparent}
.chip:active{transform:scale(.97)}

.mason{columns:4;column-gap:clamp(.6rem,1.2vw,1rem)}
@media (max-width:1280px){.mason{columns:3}}
@media (max-width:860px){.mason{columns:2}}
@media (max-width:480px){.mason{columns:1}}
.gitem{
  break-inside:avoid;margin-bottom:clamp(.6rem,1.2vw,1rem);
  position:relative;border-radius:clamp(12px,1.2vw,18px);overflow:hidden;
  cursor:pointer;display:block;width:100%;
  box-shadow:0 24px 54px -34px rgba(18,3,3,.9);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.gitem.hide{display:none}
.gitem img{width:100%;height:auto;transition:transform 1.1s var(--e-out),
  filter .7s var(--e-out)}
.gitem:hover img{transform:scale(1.06)}
.gitem figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem 1.1rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(18,3,3,.9));
  display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;
  font-size:var(--t-sm);color:var(--ink);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);
}
.gitem:hover figcaption,.gitem:focus-visible figcaption{opacity:1;transform:none}
.gitem figcaption em{font-style:normal;color:var(--gold-hi);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--display);font-weight:300}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(12,2,2,.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s;
}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:min(92vw,1100px);max-height:82svh;width:auto;border-radius:10px;
  transform:scale(.94);transition:transform .6s var(--e-out);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95)}
.lb.is-open img{transform:none}
.lb__x{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-soft);font-size:1.1rem;
  transition:background-color .4s var(--e-out),transform .4s var(--e-out)}
.lb__x:hover{background:rgba(246,239,231,.12);transform:rotate(90deg)}
.lb__cap{position:absolute;bottom:clamp(1rem,3vw,2.2rem);left:0;right:0;text-align:center;
  font-size:var(--t-sm);color:var(--ink-2);padding-inline:2rem}

/* ============================================================
   CTA - полосы призыва к действию между блоками
   ============================================================ */
.cta{
  background:var(--void-2);
  padding-block:clamp(3.2rem,8vh,5.5rem);
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  position:relative;overflow:clip;
}
.cta--alt{background:var(--void)}
.cta::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;
}
.cta__in{display:grid;gap:clamp(1.6rem,3vw,2.4rem);align-items:center}
@media (min-width:900px){
  .cta__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(2rem,6vw,5rem)}
}
.cta__copy{display:grid;gap:.7rem}
.cta__kick{
  font-family:var(--display);font-weight:300;font-size:var(--t-xs);
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.cta__copy .d3{max-width:24ch}
.cta__copy p{font-size:var(--t-sm);color:var(--ink-3);max-width:52ch;text-wrap:pretty}
.cta__acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cta__note{
  flex-basis:100%;font-size:var(--t-xs);color:var(--ink-3);
  display:flex;align-items:center;gap:.55rem;margin-top:.2rem;
}
.cta__note::before{content:'';width:22px;height:1px;background:var(--gold);flex:0 0 auto}

/* ============================================================
   WEDDING - full bleed art direction
   ============================================================ */
.wed{position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:clip;isolation:isolate;background:var(--void)}
.wed__bg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.wed__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  opacity:.42;filter:grayscale(.25) contrast(1.05)}
.wed::after{content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(97deg,rgba(18,3,3,.96) 0%,rgba(18,3,3,.9) 34%,rgba(18,3,3,.6) 62%,rgba(18,3,3,.22) 100%),
    linear-gradient(180deg,rgba(18,3,3,.7) 0%,transparent 22%,transparent 76%,rgba(18,3,3,.7) 100%)}
.wed__box{max-width:52ch;display:grid;gap:clamp(1.2rem,2.6vw,2rem);
  padding-block:var(--sec)}
.wed__list{display:grid;gap:.85rem;margin-top:.4rem}
.wed__list li{position:relative;padding-left:2rem;
  font-size:var(--t-base);line-height:1.5;color:var(--on-void-2);text-wrap:pretty}
.wed__list li::before{content:'';position:absolute;left:0;top:.72em;
  width:16px;height:1px;background:var(--gold)}
.wed__list b{color:var(--on-void);font-weight:600}

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc{background:var(--void-2)}
.calc__shell{
  border-radius:clamp(18px,2vw,30px);padding:clamp(.5rem,.7vw,.75rem);
  background:rgba(246,239,231,.05);
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.22);
}
.calc__core{
  border-radius:clamp(13px,1.5vw,24px);
  padding:clamp(1.4rem,3.4vw,3rem);
  background:linear-gradient(165deg,var(--ox) 0%,var(--ox-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(246,239,231,.14);
  display:grid;gap:clamp(1.6rem,3vw,2.6rem);
}
@media (min-width:960px){.calc__core{grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,4vw,4rem);align-items:start}}
.cfield{display:grid;gap:.7rem;margin-bottom:1.5rem}
.cfield > label{font-size:var(--t-sm);color:var(--ink-2);
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.cfield > label b{color:var(--ink);font-weight:500;font-family:var(--display);
  font-size:var(--t-sm)}
.copts{display:flex;flex-wrap:wrap;gap:.4rem}
.copt{
  padding:.55rem 1rem;border-radius:999px;font-size:var(--t-sm);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(246,239,231,.2);
  transition:background-color .4s var(--e-out),color .4s var(--e-out),
             box-shadow .4s var(--e-out),transform .4s var(--e-out);
}
.copt:hover{background:rgba(246,239,231,.1);color:var(--ink)}
.copt[aria-pressed="true"]{background:var(--gold-hi);color:var(--void);font-weight:500;
  box-shadow:inset 0 0 0 1px transparent}
.copt:active{transform:scale(.96)}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;
  cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(246,239,231,.25);
  border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:rgba(246,239,231,.25);
  border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:999px;
  background:var(--gold-hi);margin-top:-10px;border:0;
  box-shadow:0 4px 16px -4px rgba(0,0,0,.7);
  transition:transform .35s var(--e-out)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:999px;
  background:var(--gold-hi);border:0;box-shadow:0 4px 16px -4px rgba(0,0,0,.7)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}

.calc__out{
  border-radius:clamp(12px,1.4vw,20px);padding:clamp(1.3rem,2.6vw,2rem);
  background:rgba(18,3,3,.42);box-shadow:inset 0 1px 0 rgba(246,239,231,.1);
  display:grid;gap:1rem;align-content:start;
}
.calc__price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.calc__price b{font-family:var(--display);font-weight:250;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.05;color:var(--gold-hi);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__price s{text-decoration:none;font-size:clamp(1.4rem,3vw,2rem);
  color:var(--gold-hi);line-height:1.05;opacity:.75}
.calc__price s:last-child{font-family:var(--text);font-size:var(--t-md);
  color:var(--ink-2);opacity:1;margin-left:.15rem}
.calc__rows{display:grid;gap:.5rem;padding-top:1rem;border-top:1px solid var(--hair)}
.calc__rows div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);
  color:var(--ink-2)}
.calc__rows div span:last-child{color:var(--ink);font-weight:500;text-align:right}
.calc__note{font-size:.8rem;line-height:1.5;color:var(--ink-3)}

/* ============================================================
   TRUST strip
   ============================================================ */
.trust{background:var(--ox);border-top:1px solid var(--hair)}
.trust__grid{display:grid;gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tcell{display:grid;gap:.55rem;align-content:start;padding-top:1.3rem;
  border-top:1px solid var(--hair-soft)}
.tcell b{font-family:var(--display);font-weight:200;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1;color:var(--gold-hi);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tcell strong{font-weight:500;font-size:var(--t-base)}
.tcell p{font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}

/* ============================================================
   TORTELLE credibility
   ============================================================ */
.tort{background:var(--void);overflow:clip}
.tort__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:980px){.tort__grid{grid-template-columns:1fr 1.05fr;
  gap:clamp(3rem,6vw,6rem)}}
.tort__copy{display:grid;gap:clamp(1rem,2.2vw,1.6rem);max-width:52ch}
.tort__stats{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin-top:.6rem;
  padding-top:1.4rem;border-top:1px solid var(--hair)}
.tort__stats div{display:grid;gap:.15rem}
.tort__stats b{font-family:var(--display);font-weight:250;font-size:var(--t-lg);
  line-height:1;color:var(--gold-lt);font-variant-numeric:tabular-nums}
.tort__stats span{font-size:.82rem;color:rgba(239,230,219,.6)}
.tort__ph{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1vw,.9rem)}
.tort__ph figure{border-radius:clamp(10px,1.2vw,16px);overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);will-change:transform}
.tort__ph img{width:100%;height:100%;object-fit:cover}
.tort__ph figure:nth-child(1){aspect-ratio:3/4.3}
.tort__ph figure:nth-child(2){aspect-ratio:3/3.2;align-self:end}
.tort__ph figure:nth-child(3){aspect-ratio:3/3.1}
.tort__ph figure:nth-child(4){aspect-ratio:3/4;align-self:start}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev{background:var(--ox)}
.rev__rail{display:flex;gap:clamp(.8rem,1.6vw,1.3rem);overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:1.4rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.rev__rail::-webkit-scrollbar{display:none}
.card-rev{
  flex:0 0 min(88vw,420px);scroll-snap-align:start;
  border-radius:clamp(14px,1.4vw,20px);padding:clamp(1.4rem,2.6vw,2rem);
  background:linear-gradient(180deg,rgba(18,3,3,.34),rgba(18,3,3,.16));
  box-shadow:inset 0 1px 0 rgba(246,239,231,.1);
  display:grid;gap:1rem;align-content:start;
}
.card-rev q{font-size:var(--t-base);line-height:1.55;quotes:'«' '»';text-wrap:pretty}
.card-rev footer{display:flex;align-items:center;gap:.8rem;margin-top:.3rem;
  padding-top:1rem;border-top:1px solid var(--hair-soft)}
.card-rev .av{width:40px;height:40px;flex:0 0 40px;border-radius:999px;
  display:grid;place-items:center;background:var(--gold-lt);color:var(--void);
  font-family:var(--display);font-weight:500;font-size:.9rem}
.card-rev .who{display:grid;gap:.1rem}
.card-rev .who b{font-weight:500;font-size:var(--t-sm)}
.card-rev .who span{font-size:.78rem;color:var(--ink-3)}
.stars{color:var(--gold-hi);letter-spacing:.15em;font-size:.85rem}

.rev__nav{display:flex;gap:.5rem;margin-top:.4rem}
.rnav{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);
  transition:background-color .45s var(--e-out),transform .45s var(--e-out)}
.rnav:hover{background:rgba(246,239,231,.1)}
.rnav:active{transform:scale(.94)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--void)}
.faq__list{display:grid;border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa__q{
  width:100%;text-align:left;display:flex;align-items:flex-start;gap:1.4rem;
  padding:clamp(1.1rem,2.4vw,1.7rem) 0;
  font-family:var(--display);font-weight:350;
  font-size:clamp(1rem,1.9vw,1.32rem);letter-spacing:-.02em;line-height:1.3;
  color:var(--on-void);transition:color .4s var(--e-out)
}
.qa__q:hover{color:var(--gold-lt)}
.qa__q i{margin-left:auto;flex:0 0 auto;width:30px;height:30px;position:relative;
  border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);
  transition:background-color .5s var(--e-out),transform .5s var(--e-out)}
.qa__q i::before,.qa__q i::after{content:'';position:absolute;top:50%;left:50%;
  background:currentColor;transition:transform .55s var(--e-out),opacity .4s}
.qa__q i::before{width:11px;height:1.4px;transform:translate(-50%,-50%)}
.qa__q i::after{width:1.4px;height:11px;transform:translate(-50%,-50%)}
.qa.open .qa__q i{background:var(--gold-hi);color:var(--void);transform:rotate(180deg)}
.qa.open .qa__q i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa__a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .65s var(--e-out)}
.qa.open .qa__a{grid-template-rows:1fr}
.qa__a > div{overflow:hidden}
.qa__a p{padding-bottom:clamp(1.1rem,2.4vw,1.7rem);max-width:70ch;
  color:var(--on-void-2);font-size:var(--t-base);text-wrap:pretty}
.qa__a p + p{padding-top:0}

/* ============================================================
   ORDER FORM
   ============================================================ */
.order{background:linear-gradient(180deg,var(--void) 0%,var(--ox-deep) 45%,var(--ox) 100%);
  overflow:clip;position:relative}
.order::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%,rgba(227,184,114,.14),transparent 60%)}
.form__shell{
  border-radius:clamp(18px,2vw,30px);padding:clamp(.5rem,.7vw,.75rem);
  background:rgba(246,239,231,.06);
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.25);
}
.form__core{
  border-radius:clamp(13px,1.5vw,24px);padding:clamp(1.4rem,3.6vw,3.2rem);
  background:rgba(18,3,3,.5);box-shadow:inset 0 1px 0 rgba(246,239,231,.12);
}
.fgrid{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.f-wide{grid-column:1/-1}
.fld{display:grid;gap:.5rem}
.fld > label{font-size:var(--t-sm);color:var(--ink-2)}
.fld > label sup{color:var(--gold-hi)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:.92rem 1.1rem;border-radius:12px;
  background:rgba(246,239,231,.07);border:0;
  box-shadow:inset 0 0 0 1px rgba(246,239,231,.18);
  color:var(--ink);font-size:var(--t-base);
  transition:box-shadow .45s var(--e-out),background-color .45s var(--e-out);
}
.fld textarea{min-height:130px;resize:vertical;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(246,239,231,.5)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;background:rgba(246,239,231,.11);
  box-shadow:inset 0 0 0 1.5px var(--gold-hi)}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f0d6a3' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;padding-right:2.8rem}
.fld select option{background:var(--void);color:var(--ink)}
.fld.err input,.fld.err textarea,.fld.err select{box-shadow:inset 0 0 0 1.5px #ff9a8a}
.fld .msg{font-size:.78rem;color:#ffb4a6;min-height:1em}

.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.85rem;
  color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent input{appearance:none;flex:0 0 20px;width:20px;height:20px;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(246,239,231,.35);margin-top:.15rem;cursor:pointer;
  transition:background-color .35s var(--e-out),box-shadow .35s var(--e-out)}
.consent input:checked{background:var(--gold-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23120303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:inset 0 0 0 1px transparent}
.form__foot{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--hair)}
.form__foot .alt{font-size:var(--t-sm);color:var(--ink-2);margin-left:auto;
  text-align:right}

.sent{display:none;text-align:center;padding:clamp(2rem,6vw,4rem) 1rem;gap:1.1rem}
.sent.on{display:grid;justify-items:center}
.sent__ok{width:66px;height:66px;border-radius:999px;display:grid;place-items:center;
  background:var(--gold-hi);color:var(--void);font-size:1.6rem;
  animation:pop .7s var(--e-out)}
@keyframes pop{from{transform:scale(.4);opacity:0}}

/* ============================================================
   CONTACTS + FOOTER
   ============================================================ */
.foot{background:var(--void);position:relative;overflow:clip;
  padding-top:clamp(4rem,9vw,7rem)}
.foot__top{display:grid;gap:clamp(2.2rem,4vw,3rem)}
@media (min-width:900px){.foot__top{grid-template-columns:1.15fr .85fr;
  gap:clamp(3rem,6vw,6rem);align-items:start}}
.foot__cta .d2{max-width:14ch;margin-bottom:1.4rem}
.foot__acts{display:flex;flex-wrap:wrap;gap:.7rem}

.fcols{display:grid;gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.fcol{display:grid;gap:.7rem;align-content:start}
.fcol h4{font-family:var(--display);font-weight:300;font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);
  padding-bottom:.9rem;border-bottom:1px solid var(--hair);margin-bottom:.3rem}
.fcol a,.fcol p{font-size:var(--t-sm);color:var(--on-void-2);line-height:1.5;
  transition:color .35s var(--e-out)}
.fcol a:hover{color:var(--gold-hi)}
.fcol .big{font-family:var(--display);font-weight:300;font-size:var(--t-md);
  color:var(--on-void);letter-spacing:-.01em}
.fcol .big:hover{color:var(--gold-hi)}

/* giant wordmark.
   The source SVG is a 1:1 artboard with deep empty margins, so the block
   crops to the artwork instead of shipping ~300px of dead space. */
.foot__mark{
  margin-top:clamp(2.6rem,5vw,4.2rem);position:relative;isolation:isolate;
  display:grid;justify-items:center;
}
.foot__mark img{width:min(70vw,600px);opacity:.92;position:relative;z-index:1}
.foot__mark::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(96vw,1000px);height:150%;pointer-events:none;z-index:0;
  background:radial-gradient(58% 58% at 50% 50%,rgba(143,0,0,.62),transparent 72%);
  filter:blur(34px);
}
.foot__bar{
  margin-top:clamp(2.4rem,5vw,3.6rem);padding-block:1.6rem;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;
  font-size:.8rem;color:rgba(239,230,219,.48);
}
.foot__bar .sp{margin-left:auto}
.foot__bar a:hover{color:var(--gold-hi)}

.socs{display:flex;gap:.5rem;flex-wrap:wrap}
.soc{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.05rem;border-radius:999px;font-size:var(--t-sm);
  color:var(--on-void);box-shadow:inset 0 0 0 1px var(--hair);
  transition:background-color .45s var(--e-out),transform .45s var(--e-out),
             box-shadow .45s var(--e-out);
}
.soc:hover{background:rgba(246,239,231,.1);transform:translateY(-2px)}
.soc svg{width:16px;height:16px;flex:0 0 16px}

/* place plate - the real room, not a decorative grid */
.mapplate{
  border-radius:clamp(14px,1.6vw,22px);overflow:hidden;position:relative;
  aspect-ratio:21/9;background:var(--void-3);isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;
}
@media (max-width:700px){.mapplate{aspect-ratio:4/5}}
.mapplate__ph{position:absolute;inset:0;z-index:-2}
.mapplate__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:blur(2px) saturate(.92);transform:scale(1.03);
  transition:transform 1.2s var(--e-out)}
.mapplate:hover .mapplate__ph img{transform:scale(1.07)}
.mapplate::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 78% at 50% 52%,rgba(18,3,3,.9),transparent 78%),
    linear-gradient(180deg,rgba(18,3,3,.66),rgba(18,3,3,.9))}
.mapplate__i{display:grid;justify-items:center;gap:.75rem;text-align:center;
  padding:clamp(1.4rem,4vw,2.4rem);position:relative;z-index:1;width:100%}
.mapplate b{font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.7rem);letter-spacing:-.015em;line-height:1.25;
  text-wrap:balance}
.mapplate span{font-size:var(--t-sm);color:var(--on-void-2);max-width:46ch;
  text-wrap:pretty}

/* ============================================================
   FLOATING CTA (mobile)
   ============================================================ */
.dock{
  position:fixed;left:var(--gut);right:var(--gut);bottom:1rem;z-index:var(--z-nav);
  display:none;gap:.5rem;
  transform:translateY(140%);transition:transform .6s var(--e-out);
}
.dock.on{transform:none}
.dock .btn{flex:1;justify-content:center;padding-left:1.1rem}
@media (max-width:720px){.dock{display:flex}
  .foot__bar{padding-bottom:5.2rem}}

/* ============================================================
   CURSOR (fine pointers only)
   ============================================================ */
.cur{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:999px;
  background:var(--gold-hi);pointer-events:none;z-index:var(--z-cursor);
  transform:translate(-50%,-50%);mix-blend-mode:difference;display:none}
.cur-r{position:fixed;top:0;left:0;width:38px;height:38px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(227,184,114,.65);pointer-events:none;
  z-index:var(--z-cursor);transform:translate(-50%,-50%);display:none;
  transition:width .4s var(--e-out),height .4s var(--e-out),
             background-color .4s var(--e-out),opacity .3s}
.cur-r.hot{width:64px;height:64px;background:rgba(227,184,114,.14)}
@media (hover:hover) and (pointer:fine){
  .cur,.cur-r{display:block}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv,.cr{opacity:1;transform:none;filter:none;clip-path:none}
  .hero h1 .sw span{transform:none}
  .hero__side,.floaty,.hero__plate{opacity:1;transform:none}
  .manifest__q w{color:var(--on-void)}
  .manifest__sticky{position:static;min-height:0}
  .rail__pin{height:auto}
  .rail__vp{position:static;height:auto;padding-block:var(--sec)}
  .rail__track{overflow-x:auto}
  .ribbon__track{animation:none}
  .cur,.cur-r{display:none}
}

/* ---- feedback (06.09.2026) ---- */
.fb{background:linear-gradient(180deg,var(--ox) 0%,var(--ox-deep) 100%);position:relative;overflow:clip}
.fb .shead__top p{max-width:40ch}
.fld__lbl{font-size:var(--t-sm);color:var(--ink-2)}
.rate{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem;font-size:2rem;line-height:1}
.rate input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rate label{cursor:pointer;color:rgba(246,239,231,.28);transition:color .15s,transform .15s;padding:.1rem .15rem;user-select:none}
.rate label:hover,.rate label:hover ~ label,
.rate input:checked ~ label{color:var(--gold-hi)}
.rate label:hover{transform:scale(1.12)}
.rate input:focus-visible + label{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
.ferr{font-size:.85rem;color:#ffb4a6;min-height:1em;flex-basis:100%}
.ferr:empty{display:none}
.btn[disabled]{opacity:.6;pointer-events:none}