@font-face{font-family:Onest;src:url('media/fonts/onest-normal-400-600-cyrillic.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Onest;src:url('media/fonts/onest-normal-400-600-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Visual upgrade layer (Claude Code, 2026-09-18): richer imagery, scroll focus, motion moments.
   Loaded after atelier.css; keeps the commerce markup and behaviour intact. */

/* --- Hero: entrance and slow push-in --------------------------------- */
.atelier-hero-media { transform: scale(calc(1 + var(--hero-p, 0) * .07)); transform-origin: 62% 40%; }
.atelier-hero h1.reveal-words span { display: block; }
.atelier-hero h1.reveal-words > span {
  clip-path: inset(0 0 -18% 0);
  animation: words 1.15s cubic-bezier(.16, .84, .26, 1) both;
}
.atelier-hero h1.reveal-words > span:nth-child(2) { animation-delay: .13s; }
@keyframes words { from { transform: translateY(105%); } to { transform: translateY(0); } }
.atelier-hero .section-label,
.atelier-hero .hero-description,
.atelier-hero .hero-actions { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both .3s; }
.atelier-hero .hero-description { animation-delay: .4s; }
.atelier-hero .hero-actions { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-scroll { display: flex; align-items: center; }
.hero-scroll i { display: block; width: 1px; height: 30px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.3); opacity: .35; } 50% { transform: scaleY(1); opacity: .9; } }
/* The scene note sits on the photograph without a plate, so it needs its own contrast. */
.atelier-hero .hero-caption { max-width: 330px; text-align: right; font-size: 10px; line-height: 1.6; letter-spacing: .03em; color: #39402f; }

/* --- Fold buttons: disc + pill joined by a paper pleat ----------------- */
.fold-btn {
  --fold-h: 52px; --fold-rest: 5; --fold-open: 24; --fold-bg: #30382d; --fold-fg: #f5f2eb; --fold-crease: rgba(245, 242, 235, .28);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0;
  height: var(--fold-h); min-height: 44px; padding: 0 28px 0 calc(var(--fold-h) + var(--fold-open) * 1px + 20px);
  border: 0; border-radius: 0; background: none; color: var(--fold-fg); cursor: pointer; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.fold-btn .fold-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; fill: var(--fold-bg); }
.fold-btn .fold-creases { fill: none; stroke: var(--fold-crease); stroke-width: 1; }
.fold-btn .fold-facets { fill: var(--fold-crease); opacity: .45; }
.fold-btn-icon {
  position: absolute; left: 0; top: 0; width: var(--fold-h); height: var(--fold-h);
  display: grid; place-items: center; color: var(--fold-fg); pointer-events: none;
}
.fold-btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(calc(var(--fold-t, 0) * var(--fold-turn, 45deg))); }
.fold-btn-label { display: inline-flex; align-items: center; gap: 8px; transform: translateX(calc((var(--fold-gap, 5px) - var(--fold-open) * 1px) / 2)); }
/* Without JavaScript the same silhouette is drawn with plain CSS, only without the moving pleat. */
.fold-btn:not(.is-folded) .fold-btn-icon { background: var(--fold-bg); border-radius: 50%; }
.fold-btn:not(.is-folded)::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0;
  left: calc(var(--fold-h) + var(--fold-rest) * 1px); border-radius: 999px; background: var(--fold-bg);
}
.fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
.fold-btn.is-light { --fold-bg: #f5f2eb; --fold-fg: #2b3329; --fold-crease: rgba(48, 56, 45, .2); }
.fold-btn.is-soft { --fold-bg: #e4dfd2; --fold-fg: #2b3329; --fold-crease: rgba(48, 56, 45, .18); }
.fold-btn.is-compact { --fold-h: 44px; --fold-open: 18; font-size: 13px; padding-right: 22px; padding-left: calc(var(--fold-h) + var(--fold-open) * 1px + 14px); }
.fold-btn.is-compact .fold-btn-icon svg { width: 16px; height: 16px; }
.fold-btn[data-turn="90"] { --fold-turn: 90deg; }
.fold-btn[data-turn="0"] { --fold-turn: 0deg; }
.fold-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; background: var(--fold-fg); color: var(--fold-bg);
}
.fold-count[hidden] { display: none; }

.fold-btn[hidden] { display: none; }
.color-choices button { border-radius: 999px; padding-inline: 14px 16px; }
/* Header cart: the same fold, compact; the count sits inside the pill. */
.site-header .header-fold { margin-left: auto; --fold-h: 42px; --fold-open: 14; font-size: 12px; padding-right: 18px; padding-left: calc(var(--fold-h) + var(--fold-open) * 1px + 12px); }
.site-header .header-contacts + .header-fold { margin-left: 22px; }
/* Classic buttons that stay (dialogs, checkout) share the pill shape of the fold buttons. */
.button.primary, .button.light { border-radius: 999px; transition: background .3s ease, color .3s ease, transform .3s ease; }
.button.primary:hover { transform: translateY(-1px); }
.product-actions .fold-btn { flex: 0 0 auto; }
.focus-actions .fold-btn, .business-solutions .fold-btn, .business-decor .fold-btn { margin-top: 6px; }
.new-forms .fold-btn { margin-top: 4px; }
.season-stage figcaption .fold-btn { flex-shrink: 0; }
.mobile-cta .fold-btn { --fold-h: 42px; --fold-open: 12; }
/* The header count is a terracotta badge on every screen; the older rule in atelier.css left a dark figure on the dark pill. */
.site-header .header-fold .fold-count { background: #b8643e; color: #fff; }

/* --- Order buttons (23.09.2026): a paper bag instead of a plus ----------------------------------------------
   The bag hops and the pleat breathes when the button comes into view and when the visitor pauses on the goods; on
   add the thing flies into the cart, the bag fills and ticks, the label rolls to «В корзине». The figure on the bag
   says how many of this very colour are already in the cart. Motion lives in upgrade.js («Order buttons»). */
.fold-btn[data-add] { --sheen: rgba(255, 255, 255, .34); }
.fold-btn[data-add].is-light { --sheen: rgba(184, 100, 62, .3); }
.fold-btn[data-add] .fold-btn-icon svg.bag { width: 20px; height: 20px; overflow: visible; }
.bag path { transform-box: fill-box; }
.bag-handle { transform-origin: 50% 100%; }
.bag-body { transform-origin: 50% 100%; fill: transparent; transition: fill .3s ease; }
.bag-check { stroke: var(--fold-bg); stroke-width: 1.9; stroke-dasharray: 9; stroke-dashoffset: 9; transition: stroke-dashoffset .38s cubic-bezier(.3, .7, .2, 1) .16s; }
.fold-btn.is-added .bag-body { fill: currentColor; animation: bag-gulp .62s cubic-bezier(.3, 1.4, .5, 1); }
.fold-btn.is-added .bag-check { stroke-dashoffset: 0; }
.fold-btn.is-added .bag-handle, .fold-btn.is-nudge .bag-handle { animation: bag-handle .9s ease .06s; }
.fold-btn.is-nudge .bag { animation: bag-hop .95s cubic-bezier(.3, .7, .3, 1); }
@keyframes bag-hop { 0%, 100% { transform: none; } 22% { transform: translateY(-3.5px) rotate(-9deg); } 46% { transform: rotate(5deg); } 68% { transform: rotate(-2.5deg); } }
@keyframes bag-handle { 0%, 100% { transform: none; } 30% { transform: rotate(-16deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } }
@keyframes bag-gulp { 0% { transform: none; } 35% { transform: scale(1.12, .84); } 70% { transform: scale(.95, 1.07); } 100% { transform: none; } }
@media (hover: hover) {
  .fold-btn[data-add] .bag, .fold-btn[data-add] .bag-handle { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .fold-btn[data-add]:hover .bag { transform: translateY(-1.5px); }
  .fold-btn[data-add]:hover .bag-handle { transform: rotate(-12deg); }
}
/* The label rolls up to «В корзине» and back; both words share one cell, so the button keeps its width. */
.fold-say { display: inline-grid; justify-items: center; overflow: hidden; line-height: 1.3; }
.fold-say > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.fold-say > span + span { transform: translateY(105%); opacity: 0; }
.fold-btn.is-added .fold-say > span:first-child { transform: translateY(-105%); opacity: 0; }
.fold-btn.is-added .fold-say > span + span { transform: none; opacity: 1; }
/* A glint runs along the pill during a nudge, like light over a folded sheet. */
.fold-btn[data-add]::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: calc(var(--fold-h) + var(--fold-gap, 5px));
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 32%, var(--sheen) 47%, transparent 62%) no-repeat 160% 0 / 250% 100%;
}
.fold-btn.is-nudge::after { animation: fold-sheen 1.15s cubic-bezier(.4, 0, .2, 1) .1s; }
@keyframes fold-sheen { from { opacity: 1; background-position: 160% 0; } to { opacity: 1; background-position: -60% 0; } }
.fold-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(3px, -16px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center; font-size: 10px; font-weight: 600; line-height: 1; background: #b8643e; color: #fff; box-shadow: 0 0 0 2px var(--fold-bg);
}
.fold-badge[hidden] { display: none; }
.fold-badge.is-pop { animation: badge-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes badge-pop { from { transform: translate(3px, -16px) scale(.3); } to { transform: translate(3px, -16px) scale(1); } }
/* The thing flying into the cart: the outer layer travels, the inner one arcs and shrinks. */
.fly-thing { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; will-change: transform; }
.fly-thing > span {
  display: block; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; will-change: transform, opacity;
  background: #f5f2eb center / cover no-repeat; box-shadow: 0 10px 24px rgba(30, 34, 28, .28), 0 0 0 2px #f5f2eb;
}
@media (prefers-reduced-motion: reduce) {
  .fold-btn.is-nudge .bag, .fold-btn.is-nudge .bag-handle, .fold-btn.is-added .bag-body, .fold-btn.is-added .bag-handle,
  .fold-btn.is-nudge::after, .fold-badge.is-pop { animation: none; }
  .fold-say > span, .bag-check, .bag-body { transition: none; }
}

/* --- Product card: a second, in-situ frame --------------------------- */
.product-card .product-image { position: relative; }
.card-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .65, .2, 1);
}
.card-scene + .media-fallback { display: none; }
.card-scene-hint {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); background: #f5f2ebe8; opacity: 0;
  transition: opacity .45s ease; pointer-events: none;
}
.product-card:hover .card-scene,
.product-card:focus-within .card-scene { opacity: 1; transform: scale(1); }
.product-card:hover .card-scene-hint,
.product-card:focus-within .card-scene-hint { opacity: 1; }
.product-card.scene-off .card-scene,
.product-card.scene-off .card-scene-hint { display: none; }

/* --- Focus reel: scroll moves attention from object to object -------- */
.focus { padding-bottom: 40px; }
.focus-reel,
.focus-sticky { display: grid; gap: 90px; }
.focus-beat { margin: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.focus-media { position: relative; overflow: hidden; background: #e9e6df; }
.focus-media img,
.focus-media video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.focus-beat-wide .focus-media img,
.focus-beat-wide .focus-media video { aspect-ratio: 3 / 4; }
.focus-kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.focus-beat h3 { font-family: Atelier, Georgia, serif; font-size: clamp(38px, 4.2vw, 62px); font-weight: 400; line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; }
.focus-line { font-size: 14px; line-height: 1.8; color: #414638; margin: 0 0 22px; max-width: 34ch; }
.focus-price { font-family: Atelier, Georgia, serif; font-size: 27px; margin: 0 0 26px; }
.focus-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.focus-actions .under-link { font-size: 12px; }

/* Cinema: one sticky stage, the frames stacked inside it, so scroll only cross-fades them. */
.focus-reel.is-cinema { display: block; position: relative; --stage-h: max(520px, calc(100svh - var(--stage-top) - 30px)); height: calc(var(--beats, 6) * 58vh); }
.focus-reel.is-cinema .focus-sticky { display: block; position: sticky; top: var(--stage-top); height: var(--stage-h); }
/* Frames have different proportions (4:5 and 9:16); the stage clips them to one window. */
/* The next frame drops in like a sheet of paper: a wipe, not a dissolve of two photographs. */
.focus-reel.is-cinema .focus-beat {
  position: absolute; inset: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch;
  overflow: hidden; background: var(--paper); padding-block: 20px;
  clip-path: inset(0 0 calc((1 - var(--beat-in, 1)) * 100%) 0);
}
.focus-reel.is-cinema .focus-media { height: 100%; }
.focus-reel.is-cinema figcaption { align-self: center; }
.focus-reel.is-cinema .focus-media img,
.focus-reel.is-cinema .focus-media video { height: 100%; aspect-ratio: auto; transform: scale(var(--beat-scale, 1)); }
/* The photographs dissolve into each other; the caption snaps, so only one price is ever legible. */
.focus-reel.is-cinema figcaption { opacity: var(--caption-in, 1); }
.focus-reel.is-cinema figcaption > * { transform: translateY(calc((1 - var(--caption-in, 1)) * 26px)); }

/* --- Steps without decorative numerals ------------------------------- */
.order-steps li > span, .unfold-steps h3 > span { display: none; }

/* --- One icon language: hairline outlines and a single typographic mark --- */
.header-contact svg { stroke-width: 1.4; }
.mark-play { width: 9px; height: 9px; fill: currentColor; stroke: none; margin-left: 2px; vertical-align: baseline; }
.store-promises > a { gap: 10px; }

/* --- Motion strip ---------------------------------------------------- */
.motion-wall { padding: clamp(64px, 8vw, 120px) 0; background: #2f3a2d; color: #f2efe4; overflow: hidden; }
.motion-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: end; padding: 0 var(--gutter) 46px; }
.motion-head .section-label { color: #b9c2ac; margin-bottom: 22px; }
.motion-head h2 { font-family: Atelier, Georgia, serif; font-size: clamp(42px, 5vw, 78px); font-weight: 400; line-height: .98; letter-spacing: -.035em; margin: 0; color: #f6f3e9; }
.motion-head h2 em { font-style: italic; color: #d9dcc1; }
.motion-head .section-intro { font-size: 13px; line-height: 1.85; color: #cfd4c4; margin: 0; }
.motion-strip {
  display: flex; gap: 22px; list-style: none; margin: 0; padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.motion-strip::-webkit-scrollbar { display: none; }
.motion-strip > li { flex: 0 0 clamp(240px, 24vw, 340px); scroll-snap-align: center; }
/* The still is a lazy image, so a strip far down the page costs nothing until it is reached. */
.motion-strip figure { margin: 0; position: relative; }
.motion-strip .motion-poster,
.motion-strip video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #232c22; }
.motion-strip video { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .8s ease; }
/* The height attribute (960) outranks aspect-ratio; without height:auto the clip ran past its frame. */
.motion-strip video, .unfold-real video { height: auto; }
.motion-strip figure, .unfold-real { overflow: hidden; }
.motion-strip video.is-playing { opacity: 1; }
.motion-strip figcaption { display: grid; gap: 5px; padding-top: 16px; }
.motion-strip strong { font-family: Atelier, Georgia, serif; font-size: 22px; font-weight: 500; }
.motion-strip span { font-size: 12px; color: #c3c9b6; line-height: 1.7; }
.motion-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px var(--gutter) 0; }
.motion-foot .micro-note { color: #aeb5a2; margin: 0; }
.motion-nav { display: flex; gap: 10px; }
.motion-nav button {
  width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #ffffff38;
  background: transparent; color: #f2efe4; cursor: pointer; transition: background .3s ease, border-color .3s ease;
}
.motion-nav svg { width: 18px; height: 18px; }
.motion-nav button:hover { background: #ffffff14; border-color: #ffffff70; }
.motion-nav button[disabled] { opacity: .3; cursor: default; }

/* --- Real footage next to the four steps ----------------------------- */
.unfold-live { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 58px); align-items: start; }
.unfold-live .unfold-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unfold-real { margin: 0; position: relative; }
.unfold-real .motion-poster,
.unfold-real video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #e2e0d6; }
.unfold-real video { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .8s ease; }
.unfold-real video.is-playing { opacity: 1; }
.unfold-real figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); background: #f5f2ebe8;
}

/* --- Before / after ---------------------------------------------------- */
.shift { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 76px); align-items: center; padding: clamp(56px, 7vw, 104px) var(--gutter) 0; }
.shift-copy h3 { font-family: Atelier, Georgia, serif; font-size: clamp(38px, 4.4vw, 66px); font-weight: 400; line-height: 1; letter-spacing: -.03em; margin: 0 0 22px; }
.shift-copy p { font-size: 14px; line-height: 1.85; color: #414638; margin: 0; max-width: 38ch; }
.shift-scenes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.shift-scenes button {
  padding: 11px 18px; font-size: 11px; letter-spacing: .06em; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer; min-height: 44px;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.shift-scenes button:hover { color: var(--ink); border-color: #9ea391; }
.shift-scenes button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.shift-frames { position: relative; overflow: hidden; background: #e9e6df; aspect-ratio: 16 / 11; }
.shift-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shift-after { clip-path: inset(0 0 0 calc(var(--shift-p, .55) * 100%)); }
.shift-line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--shift-p, .55) * 100%); width: 1px;
  background: #f5f2eb; box-shadow: 0 0 0 1px #30382d26;
}
.shift-line:after {
  content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%; background: #f5f2ebf0 50% / 17px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330382d' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
}
.shift-slider { margin-top: 20px; width: 100%; background: #edeae0; border-color: var(--line); color: var(--muted); white-space: nowrap; }
.shift-slider input { accent-color: var(--accent); }

/* --- Business cards: one photographic language, one crop ------------- */
/* Wide 3:2 room shots (from Codex's variant) instead of tall crops. */
.business-solutions img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 701px) {
  .business .business-display { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px clamp(30px, 4vw, 64px); }
  .business .business-display > img { grid-row: 1 / span 8; width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
}

/* --- Product card: rows aligned across the grid ---------------------- */
/* The staggered middle card read as a misalignment once prices, colours and buttons sit under the photos. */
@media (min-width: 1250px) { .product-grid > .product-card:nth-child(2) { padding-top: 0; } }
.product-grid .product-card > .product-actions,
.assortment-grid .product-card > .product-actions { margin-top: auto; }

/* --- Daylight scene: day to evening by scroll or cursor ---------------- */
/* overflow on the figure would turn it into a scroll container and stop the stage from sticking. */
.business .daylight { position: relative; margin: 0; overflow: visible; }
.daylight-stage { position: relative; height: clamp(560px, 84vh, 860px); overflow: hidden; }
.daylight.is-cinema { height: 230vh; }
.daylight.is-cinema .daylight-stage { position: sticky; top: var(--stage-top); height: calc(100svh - var(--stage-top)); min-height: 560px; }
.business .daylight .space-images { position: absolute; inset: 0; height: auto; }
/* refinement.css pins every image of this block to opacity 1; the evening frame must follow the light. */
.business .daylight .space-images img.space-night { opacity: var(--space-p, 0); }
.daylight-lines { display: grid; max-width: 440px; margin-top: 26px; }
.daylight-line { grid-area: 1 / 1; margin: 0; font-size: 16px; line-height: 1.65; color: #f4f1e8; }
.daylight-line.is-day { opacity: calc(1 - var(--space-p, 0) * 1.6); }
.daylight-line.is-evening { opacity: calc(var(--space-p, 0) * 1.6 - .6); }
.daylight-hint { margin: 18px 0 0; font-size: 11px; letter-spacing: .04em; color: #e2e5d9; opacity: .85; }
.daylight-dial {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 64px; display: flex; align-items: center; gap: 18px;
  color: #f2efe4; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none;
}
.daylight-dial i { position: relative; flex: 1; height: 1px; background: rgba(242, 239, 228, .35); }
.daylight-dial b {
  position: absolute; top: 50%; left: calc(var(--space-p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #f2efe4;
  box-shadow: 0 0 0 6px rgba(242, 239, 228, .16), 0 0 calc(var(--space-p, 0) * 26px) rgba(255, 196, 120, .8);
}
.daylight-toggle {
  display: none; position: absolute; right: var(--gutter); bottom: 64px; padding: 12px 18px; min-height: 44px; border-radius: 999px;
  border: 1px solid rgba(242, 239, 228, .6); background: rgba(26, 34, 28, .45); color: #f2efe4; font-size: 12px; cursor: pointer;
}
.daylight:not(.is-cinema) .daylight-toggle { display: inline-flex; align-items: center; }
.daylight:not(.is-cinema) .daylight-hint, .daylight:not(.is-cinema) .daylight-dial { display: none; }
.daylight:not(.is-cinema) .space-images img { transition: opacity .6s ease; }

/* --- Spaces: four rooms, day and evening ----------------------------- */
.space-picker { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.space-picker button {
  padding: 10px 15px; font-size: 11px; letter-spacing: .05em; color: #eef0e7;
  border: 1px solid #ffffff4d; background: #1a221c5c; cursor: pointer; min-height: 44px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.space-picker button:hover { background: #1a221c9e; border-color: #fff9; }
.space-picker button[aria-pressed="true"] { background: #f2efe4; color: #2b3329; border-color: #f2efe4; }
.space-picker .space-festive { margin-left: auto; }

/* --- Eight forms instead of four ------------------------------------- */
.new-forms { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 42px; }

@media (max-width: 1000px) {
  .focus-beat { gap: 30px; }
  .unfold-live { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .motion-head { grid-template-columns: 1fr; align-items: start; }
  .shift { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .focus-reel { gap: 56px; }
  .focus-beat { grid-template-columns: 1fr; gap: 24px; }
  .focus-beat h3 { font-size: 40px; }
  .focus-actions .button { flex: 1; }
  .motion-wall { padding: 58px 0; }
  .motion-head { padding: 0 var(--gutter) 30px; }
  .motion-strip > li { flex: 0 0 76vw; }
  .motion-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .new-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-steps li { padding-left: 0; }
  /* On a phone the header cart is a round bag with a count badge, not a pill. */
  .site-header .header-fold { --fold-h: 42px; width: 42px; height: 42px; padding: 0; margin-left: auto; }
  .site-header .header-fold .fold-shape, .site-header .header-fold .fold-text { display: none; }
  .site-header .header-fold .fold-btn-icon { background: var(--fold-bg); border-radius: 50%; }
  .site-header .header-fold .fold-btn-label { position: absolute; top: -5px; right: -7px; transform: none; }
  .site-header .header-fold .fold-count { min-width: 19px; height: 19px; padding: 0 5px; font-size: 10px; background: #b8643e; color: #fff; box-shadow: 0 0 0 2px #f5f2eb; }
  .product-actions .fold-btn { flex: 1 1 auto; }
  .unfold-live { grid-template-columns: 1fr; gap: 30px; }
  .unfold-real { max-width: 300px; }
  .shift { padding-top: 46px; }
  .shift-frames { aspect-ratio: 4 / 5; }
  .space-picker .space-festive { margin-left: 0; }
  /* Touch devices have no hover: the in-situ frame is reachable in the product dialog. */
  .card-scene, .card-scene-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-hero-media { transform: none; }
  .atelier-hero h1.reveal-words > span { clip-path: none; }
  .focus-reel.is-cinema { display: grid; height: auto; }
  .focus-reel.is-cinema .focus-sticky { position: static; height: auto; display: grid; }
  .focus-reel.is-cinema .focus-beat { position: static; height: auto; min-height: 0; clip-path: none; }
  .focus-reel.is-cinema figcaption { opacity: 1; }
  .focus-reel.is-cinema figcaption > * { transform: none; }
  .focus-reel.is-cinema .focus-media img,
  .focus-reel.is-cinema .focus-media video { transform: none; aspect-ratio: 4 / 5; height: auto; }
  .card-scene { display: none; }
}

/* --- Social channels -------------------------------------------------- */
.social { border-top: 1px solid var(--line); }
.social-head h2 { font-family: Atelier, Georgia, serif; font-size: clamp(38px, 4.4vw, 66px); font-weight: 400; line-height: 1; letter-spacing: -.03em; margin: 0 0 40px; }
.social-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.social-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start;
  padding: 30px; border-radius: 28px; background: #ebe7dc; color: var(--ink); text-decoration: none;
  transition: background .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.social-card:hover { background: #30382d; color: #f5f2eb; transform: translateY(-3px); }
.social-mark {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #30382d; color: #f5f2eb;
  transition: background .4s ease, color .4s ease;
}
.social-card:hover .social-mark { background: #f5f2eb; color: #30382d; }
.social-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.social-mark.is-text { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.social-body { display: grid; gap: 10px; }
.social-body strong { font-family: Atelier, Georgia, serif; font-size: 30px; font-weight: 500; line-height: 1.05; }
.social-body > span { font-size: 14px; line-height: 1.7; color: inherit; opacity: .78; max-width: 46ch; }
.social-body .social-handle { font-size: 12px; letter-spacing: .04em; opacity: .6; }
.social-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.social-card:hover .social-go svg { transform: rotate(45deg); }
.social-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
  .social-cards { grid-template-columns: 1fr; gap: 14px; }
  .social-card { padding: 22px; gap: 16px; border-radius: 22px; }
  .social-mark { width: 46px; height: 46px; }
  .social-body strong { font-size: 25px; }
  .social-body > span { font-size: 13px; }
}

/* --- Readable text: darker grey, nothing below 11px on a phone ---------- */
:root { --muted: #55594f; }
.product-description, .section-intro, .focus-line { color: #4a4f44; }
.product-card .product-description { font-size: 15px; line-height: 1.65; }
@media (max-width: 700px) {
  .section-label { font-size: 11px; letter-spacing: .1em; }
  .under-link, .text-link { font-size: 13px; }
  .film-toggle, .hero-bottom > span { font-size: 11px; }
  .atelier-hero .hero-caption { font-size: 11px; }
  .store-promises { font-size: 12px; }
  .store-promises > a { min-height: 44px; }
  .focus-kicker { font-size: 11px; }
  .product-card .product-facts span + span, .collection-note, .micro-note { font-size: 12px; }
  .daylight-line { font-size: 15px; }
  .atelier-hero .section-label { font-size: 11px; }
  .atelier-hero .hero-actions .under-link { font-size: 13px; }
  .assortment-jump a { font-size: 12px; }
  .unfold-real figcaption, .season-foot > span, .season-stage figcaption small { font-size: 11px; }
  .business .space-scene figcaption { font-size: 11px; }
}
@media (max-width: 400px) {
  /* Two form cards per row leave ~130px: the price button gets a smaller disc and a shorter pleat. */
  .new-forms .fold-btn { --fold-h: 36px; --fold-open: 8; font-size: 12px; padding: 0 10px 0 calc(var(--fold-h) + var(--fold-open) * 1px + 6px); }
  .new-forms .fold-btn .fold-btn-icon svg { width: 14px; height: 14px; }
}

/* --- Hero scenes ------------------------------------------------------- */
.hero-scenes .hero-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 9s cubic-bezier(.2, .6, .2, 1);
}
.hero-scenes .hero-scene.is-active { opacity: 1; transform: scale(1); }
.hero-bottom { gap: 26px; }
.hero-tabs { display: flex; gap: 22px; }
.hero-tabs button {
  display: grid; gap: 9px; min-width: 96px; min-height: 44px; padding: 10px 0 0; border: 0; background: none;
  color: var(--muted); font-size: 12px; letter-spacing: .04em; text-align: left; cursor: pointer; transition: color .3s ease;
}
.hero-tabs button[aria-pressed="true"], .hero-tabs button:hover { color: var(--ink); }
.hero-tabs i { display: block; height: 1px; background: rgba(48, 56, 45, .22); overflow: hidden; }
.hero-tabs i::after { content: ''; display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero-tabs button[aria-pressed="true"] i::after { transform: scaleX(1); }
.hero-tabs button.is-running i::after { transform: scaleX(0); animation: heroLine var(--hero-dur, 7s) linear forwards; }
@keyframes heroLine { to { transform: scaleX(1); } }
.hero-pause {
  min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(48, 56, 45, .35); background: none;
  color: var(--ink); font-size: 12px; cursor: pointer;
}
.hero-pause[hidden] { display: none; }
@media (max-width: 700px) {
  .hero-scenes .hero-scene { object-position: 70% center; }
  .hero-tabs { gap: 14px; }
  .hero-tabs button { min-width: 0; font-size: 11px; }
  .hero-bottom .hero-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scenes .hero-scene { transform: none; transition: opacity .01s; }
}

/* --- Text links: letters turn over one after another, like pages --------- */
.under-link, .text-link { position: relative; border-bottom-color: transparent !important; }
.under-link::after, .text-link::after, .site-header > nav a::after, .header-contact > span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; pointer-events: none;
  transform-origin: 100% 50%;
}
.under-link:hover::after, .text-link:hover::after, .under-link:focus-visible::after { animation: lineSweep .9s cubic-bezier(.6, 0, .15, 1); }
@keyframes lineSweep {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  45% { transform: scaleX(0); transform-origin: 100% 50%; }
  46% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}
.site-header > nav a, .header-contact > span { position: relative; text-decoration: none !important; }
.site-header > nav a::after, .header-contact > span::after { bottom: -6px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.6, 0, .15, 1); }
.site-header > nav a:hover::after, .header-contact:hover > span::after { transform: scaleX(1); }
.flip-letters { display: inline-block; white-space: pre; }
.flip-letters > span { display: inline-block; transform-origin: 50% 58%; transition: transform .8s cubic-bezier(.6, 0, .15, 1) calc(var(--i) * 20ms); }
.under-link:hover .flip-letters > span, .under-link:focus-visible .flip-letters > span,
.site-header > nav a:hover .flip-letters > span, .header-contact:hover .flip-letters > span,
.text-link:hover .flip-letters > span { transform: perspective(260px) rotateX(360deg); }
.header-contact svg { transition: transform .5s cubic-bezier(.3, 1.6, .4, 1); }
.header-contact:hover svg { transform: rotate(-12deg) translateY(-1px); }

/* --- Header: compacts after the first scroll; markers slide to the active item --- */
:root { --header-h: 88px; --stage-top: calc(var(--header-h) + 54px); }
html.is-scrolled { --header-h: 66px; }
@media (max-width: 1000px) { :root { --header-h: 70px; } html.is-scrolled { --header-h: 58px; } }
.site-header { height: var(--header-h); transition: height .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, background-color .5s ease; }
html.is-scrolled .site-header { background-color: rgba(245, 242, 235, .97); box-shadow: 0 14px 30px -26px rgba(48, 56, 45, .6); }
.brand-lockup .wordmark { transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform-origin: 0 50%; }
.brand-lockup > span { transition: opacity .35s ease, transform .5s ease; }
html.is-scrolled .brand-lockup .wordmark { transform: scale(.84) translateY(4px); }
html.is-scrolled .brand-lockup > span { opacity: 0; transform: translateY(-6px); }
.assortment-jump { top: var(--header-h); transition: top .5s cubic-bezier(.2, .7, .2, 1); }
.paper-story-sticky { top: var(--stage-top); height: calc(100svh - var(--stage-top)); }
.nav-marker {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); border-radius: 2px; pointer-events: none;
  opacity: 0; transition: transform .6s cubic-bezier(.2, .8, .2, 1), width .6s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.site-header > nav { position: relative; }
.site-header > nav .nav-marker { bottom: -8px; height: 1.5px; }
.assortment-jump a[aria-current] { border-bottom-color: transparent !important; }
.site-header > nav a[aria-current] { text-decoration: none !important; }
@media (prefers-reduced-motion: reduce) {
  .under-link:hover::after, .text-link:hover::after { animation: none; }
  .flip-letters > span { transition: none; }
  .under-link:hover .flip-letters > span, .site-header > nav a:hover .flip-letters > span { transform: none; }
}

/* --- Text face: Onest; controls inherit it instead of the system font ---- */
:root { --sans: Onest, 'Trebuchet MS', sans-serif; }
body, small { font-family: var(--sans); }
button, input, select, textarea { font-family: inherit; }

/* --- Fold buttons: follow the cursor a little, squeeze on press ------------ */
.fold-btn { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.fold-btn:active { --ms: .97; }

/* --- Headings unfold word by word, hinged at the top like a sheet ------------ */
.unfold-ready .unfold-word { display: inline-block; transform-origin: 50% 0; opacity: 0;
  transform: perspective(700px) rotateX(-82deg);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--w) * 70ms), opacity .7s ease calc(var(--w) * 70ms); }
.unfold-ready.is-unfolded .unfold-word { opacity: 1; transform: none; }

/* --- Catalog index (after Floema): the tile widens and flips through the category --- */
.cat-index { padding: clamp(56px, 7vw, 112px) var(--gutter) clamp(36px, 5vw, 80px); text-align: center; }
.cat-index ul { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; gap: clamp(4px, .8vw, 12px); }
.cat-line {
  display: inline-flex; align-items: center; gap: .2em; padding: .03em 0; color: var(--ink); text-decoration: none;
  font-family: Atelier, Georgia, serif; font-size: clamp(36px, 6.4vw, 100px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em;
  transition: color .45s ease;
}
.cat-icon { display: grid; place-items: center; margin-right: .04em; }
.cat-icon svg { display: block; width: .46em; height: .46em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cat-tile {
  display: block; flex: none; width: 1.12em; height: 1.12em; overflow: hidden; border-radius: .12em; background: #e8e3d7;
  transition: width .7s cubic-bezier(.3, 1.35, .4, 1);
}
.cat-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-line:hover .cat-tile, .cat-line:focus-visible .cat-tile, .cat-line.is-live .cat-tile { width: 2.05em; }
.cat-line:hover .cat-name, .cat-line:focus-visible .cat-name { font-style: italic; }
.cat-index ul:hover .cat-line:not(:hover) { color: rgba(48, 56, 45, .3); }
.cat-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }

/* --- New Year showcase ------------------------------------------------------ */
.festive { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 320px); grid-auto-flow: dense; gap: 16px; }
.festive-tile { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: #2f3a2d; isolation: isolate; }
.festive-tile.is-hero { grid-column: span 2; grid-row: span 2; }
.festive-tile.is-tall { grid-row: span 2; }
.festive-tile > img, .festive-tile > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 1.3s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}
.festive-tile > video { opacity: 0; }
.festive-tile > video.is-playing { opacity: 1; }
.festive-tile:hover > img, .festive-tile:hover > video { transform: scale(1.05); }
.festive-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 34%, rgba(18, 24, 18, .82)); pointer-events: none; }
.festive-tile figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; display: grid; justify-items: start; gap: 6px; color: #f5f2eb; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.festive-tile figcaption strong { font-family: Atelier, Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1.04; }
.festive-tile.is-hero figcaption strong { font-size: clamp(34px, 3.4vw, 50px); }
.festive-tile figcaption span { font-size: 13px; line-height: 1.5; opacity: .88; max-width: 34ch; }
.festive-tile figcaption .fold-btn { margin-top: 8px; }
.festive-note { grid-column: span 2; display: grid; align-content: space-between; justify-items: start; gap: 20px; padding: 30px;
  border-radius: 18px; background: #30382d; color: #f2efe4; }
.festive-note p { margin: 0; font-family: Atelier, Georgia, serif; font-size: clamp(24px, 2.2vw, 33px); line-height: 1.15; max-width: 26ch; }
.seasons .season-foot { margin-top: 26px; }
@media (max-width: 1000px) {
  .festive { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
  .festive-tile.is-tall { grid-column: span 2; }
}
@media (max-width: 700px) {
  .cat-line { font-size: clamp(24px, 7.2vw, 34px); gap: .24em; }
  .cat-icon { display: none; }
  .cat-name { white-space: nowrap; }
  .festive { gap: 10px; grid-auto-rows: 210px; }
  .festive-tile { border-radius: 14px; }
  .festive-tile.is-hero { grid-row: span 2; }
  .festive-tile figcaption { left: 14px; right: 14px; bottom: 14px; }
  .festive-tile figcaption strong { font-size: 21px; }
  .festive-tile figcaption span { font-size: 12px; }
  .festive-note { padding: 22px; }
}
@media (max-width: 700px) {
  /* Small tiles are ~160px wide: the fold shrinks, the price stays readable. */
  .festive-tile:not(.is-hero) .fold-btn { --fold-h: 36px; --fold-open: 8; font-size: 12px; padding: 0 12px 0 calc(var(--fold-h) + var(--fold-open) * 1px + 8px); }
  .festive-tile:not(.is-hero):not(.is-tall) figcaption strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .unfold-ready .unfold-word { opacity: 1; transform: none; transition: none; }
  .cat-tile { transition: none; }
}
@media (max-width: 360px) {
  /* Two ~130px tiles cannot hold a price and a button: one column on the narrowest phones. */
  .festive { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
  .festive-note .fold-btn { --fold-h: 40px; --fold-open: 10; font-size: 12px; padding: 0 14px 0 calc(var(--fold-h) + var(--fold-open) * 1px + 8px); }
  .festive-tile.is-hero, .festive-tile.is-tall, .festive-note { grid-column: auto; }
}

/* --- Catalog index, round 6: no counts; colour band, hint and a real heading ---- */
.cat-title {
  display: flex; align-items: center; justify-content: center; gap: .55em; margin: 0 0 clamp(26px, 3vw, 44px);
  font-family: Atelier, Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(30px, 3.6vw, 54px);
  letter-spacing: -.01em; line-height: 1; color: var(--accent);
}
.cat-title::before, .cat-title::after {
  content: ''; width: clamp(48px, 7vw, 110px); height: .34em; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 9 3 3 6 9 9 3 12 9' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x 0 50% / .34em .34em; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 9 3 3 6 9 9 3 12 9' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x 0 50% / .34em .34em;
}
.cat-line { position: relative; isolation: isolate; }
/* A band in the category colour grows behind the line, like Floema's category tags. */
.cat-line::before {
  content: ''; position: absolute; z-index: -1; top: .06em; bottom: .02em; left: -.32em; right: -.32em; border-radius: 999px;
  background: var(--cat, #e8e3d7); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.cat-line:hover::before, .cat-line:focus-visible::before, .cat-line.is-live::before { transform: scaleX(1); }
.cat-hint {
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; margin-left: 0;
  font-family: Onest, sans-serif; font-style: normal; font-size: clamp(11px, .95vw, 14px); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  transition: max-width .7s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, margin-left .7s cubic-bezier(.2, .8, .2, 1);
}
.cat-line:hover .cat-hint, .cat-line:focus-visible .cat-hint, .cat-line.is-live .cat-hint { max-width: 22em; opacity: .75; margin-left: .35em; }
@media (max-width: 700px) {
  .cat-title { font-size: 30px; }
  .cat-title::before, .cat-title::after { width: 36px; }
  .cat-line.is-live .cat-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-line::before, .cat-hint { transition: none; }
}

/* --- «Из чего сделано»: one camera move instead of two photos crossfading ---- */
@media (min-width: 701px) {
  .paper-story-images .paper-object { object-fit: cover; object-position: 45% 100%; background: none; transform-origin: 43% 55%; }
  .paper-story-images .paper-texture { transform-origin: 50% 55%; }
  /* The dark edge blends the macro into the panel; over the light pouf photo it only left a grey smear. */
  .paper-story-images::after { opacity: calc(1 - var(--paper-p, 0) * 1.6); }
}

/* --- «Что мы делаем»: interior behind the lines, swapped by the hovered category --- */
.cat-index { position: relative; isolation: isolate; overflow: hidden; }
.cat-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cat-bg img {
  position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; opacity: 0;
  filter: saturate(.8) blur(1.5px); transition: opacity 1.1s ease; animation: catDrift 26s ease-in-out infinite alternate;
}
.cat-bg img.is-on { opacity: .42; }
/* Paper wash: calm in the middle where the words are, the room shows at the edges. */
.cat-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 70% at 50% 52%, rgba(245, 242, 235, .9) 0%, rgba(245, 242, 235, .72) 55%, rgba(245, 242, 235, .35) 100%),
              linear-gradient(180deg, #f5f2eb 0%, rgba(245, 242, 235, 0) 14%, rgba(245, 242, 235, 0) 86%, #f5f2eb 100%);
}
@keyframes catDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.2%, -1%, 0); } }
.cat-index ul:hover .cat-line:not(:hover) { color: rgba(48, 56, 45, .36); }
@media (max-width: 700px) {
  .cat-bg img.is-on { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-bg img { animation: none; transition: none; }
}

/* --- First screen: a rendered pouf unfolds as the page scrolls ---------------- */
.intro3d { position: relative; height: 185vh; background: var(--paper); }
.intro3d-stick {
  position: sticky; top: var(--header-h, 88px); height: calc(100svh - var(--header-h, 88px)); min-height: 560px;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(20px, 4vw, 64px);
  padding: 0 var(--gutter); overflow: hidden;
}
.intro3d-copy .section-label { margin-bottom: 26px; }
.intro3d h1 { font-family: Atelier, Georgia, serif; font-size: clamp(58px, 7vw, 116px); font-weight: 400; line-height: .9; letter-spacing: -.04em; margin: 0 0 26px; }
.intro3d h1 em { color: var(--accent); }
.intro3d h1.reveal-words > span { display: block; clip-path: inset(0 0 -18% 0); animation: words 1.15s cubic-bezier(.16, .84, .26, 1) both; }
.intro3d h1.reveal-words > span:nth-child(2) { animation-delay: .13s; }
.intro3d-lead { font-size: 17px; line-height: 1.7; color: #414638; max-width: 420px; margin: 0 0 30px; }
.intro3d .hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.intro3d-stage { position: relative; height: min(100%, 78svh); aspect-ratio: var(--ar); max-width: 100%; justify-self: center; align-self: center; }
.intro3d-still, .intro3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro3d-canvas { opacity: 0; }
.intro3d.is-live .intro3d-canvas { opacity: 1; }
.intro3d.is-live .intro3d-still { opacity: 0; }
.intro3d-facts { position: absolute; right: -2%; top: 16%; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; text-align: right; }
.intro3d-facts li { display: grid; gap: 2px; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.intro3d-facts li.is-on, .intro3d:not(.is-live) .intro3d-facts li { opacity: 1; transform: none; }
.intro3d-facts strong { font-family: Atelier, Georgia, serif; font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; line-height: 1; color: var(--ink); }
.intro3d-facts span { font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.intro3d-hint { position: absolute; left: var(--gutter); bottom: 26px; display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: 12px; letter-spacing: .04em; color: var(--muted); transition: opacity .5s ease; }
.intro3d-hint i { display: block; width: 1px; height: 26px; background: linear-gradient(var(--ink), transparent); animation: cue 2.2s ease-in-out infinite; }
.intro3d.is-done .intro3d-hint { opacity: 0; }
.atelier-hero h2.scenes-title { font-family: Atelier, Georgia, serif; font-size: clamp(48px, 5.6vw, 92px); font-weight: 400; line-height: .92; letter-spacing: -.04em; margin: 0 0 26px; }
.atelier-hero h2.scenes-title span { display: block; }
@media (max-width: 1000px) {
  .intro3d-stick { grid-template-columns: 1fr; align-content: start; padding-top: 28px; gap: 8px; }
  .intro3d-stage { height: 46svh; }
  .intro3d-facts { right: 0; top: 4%; gap: 14px; }
}
@media (max-width: 700px) {
  .intro3d { height: auto; }
  .intro3d-stick { position: relative; top: auto; height: auto; min-height: 0; padding: 26px var(--gutter) 36px; }
  .intro3d h1 { font-size: 46px; margin-bottom: 18px; }
  .intro3d-lead { font-size: 15px; margin-bottom: 22px; }
  .intro3d-stage { height: auto; width: 100%; margin-top: 18px; }
  .intro3d-still, .intro3d-canvas { position: relative; display: block; height: auto; }
  .intro3d.is-live .intro3d-still { display: none; }
  .intro3d.is-live .intro3d-canvas { position: relative; }
  .intro3d-facts { top: 6%; }
  .intro3d-facts strong { font-size: 22px; }
  .intro3d-facts span { font-size: 11px; }
  .intro3d-hint { display: none; }
  .atelier-hero h2.scenes-title { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro3d { height: auto; }
  .intro3d-stick { position: relative; top: auto; height: auto; padding-block: 40px; }
  .intro3d-hint { display: none; }
}
/* The ground shadow runs into the crop of the frames: fade the edges so no rectangle shows around the pouf. */
.intro3d-still, .intro3d-canvas {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 84%, transparent 100%), linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 84%, transparent 100%), linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}

/* --- First screen v2: photoreal room, only the pouf region changes ------------- */
/* The 16:9 room covers the sticky stage; on narrow screens it slides so the pouf (--px/--py) stays in view. */
.intro3d.is-photo .intro3d-stick { display: block; padding: 0; background: #d9cdbd; --stage-h: max(560px, calc(100svh - var(--header-h, 88px))); }
.intro3d-frame { position: absolute; inset: 0; overflow: hidden; }
.intro3d-scene {
  --sw: max(100%, calc(var(--stage-h) * 16 / 9));
  position: absolute; top: 50%; width: var(--sw); aspect-ratio: 16 / 9;
  left: clamp(calc(100% - var(--sw)), calc(68% - var(--px) * var(--sw)), 0px); transform: translateY(-50%);
}
.intro3d-plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Focus pull (24.09.2026): the plate is the sharp room, the soft one over it is the old blurred plate; upgrade.js raises it
   with the unfolding exactly as the frames were mixed (data-focus-pull), so the region never shows an edge. Without the
   script the sharp room stays with the folded pouf of the first frame (the still). */
.intro3d-plate-soft { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.intro3d.is-photo .intro3d-still, .intro3d.is-photo .intro3d-canvas {
  position: absolute; left: var(--rx); top: var(--ry); right: auto; bottom: auto; width: var(--rw); height: var(--rh); max-width: none; opacity: 1;
  /* Soft edge: the region blends into the plate even if the denoiser grain differs a little. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.intro3d.is-photo .intro3d-canvas { opacity: 0; }
.intro3d.is-photo.is-live .intro3d-canvas { opacity: 1; }
.intro3d.is-photo.is-live .intro3d-still { opacity: 0; display: block; }
/* Light paper wash on the left keeps the headline readable over the sunlit wall (24.09: lighter and narrower, so the room
   with its leaf shadows stays visible behind the words). */
.intro3d.is-photo .intro3d-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 242, 235, .8) 0%, rgba(245, 242, 235, .46) 27%, rgba(245, 242, 235, 0) 45%);
}
/* Living room before the first scroll (24.09.2026): a Flow film of the same room locked to its first frame — the olive
   and the leaf shadows move in the breeze — with the folded pouf and its shadow laid over it. The first scroll (or the
   phone's self-play) dissolves it into the unfolding frames, like a focus pull onto the pouf. upgrade.js drives it. */
.intro3d-live { position: absolute; inset: 0; pointer-events: none; }
.intro3d-live img, .intro3d-live video { position: absolute; display: block; max-width: none; }
.intro3d-live-film { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Under the layer the first frame already shows the same sharp room and folded pouf, so the film, the pouf and its
   shadow come in together only once the film plays; a connection without the film loads none of them. */
.intro3d-live > * { opacity: 0; transition: opacity .9s ease; }
.intro3d-live.is-playing > * { opacity: 1; }
.intro3d-live-shadow { mix-blend-mode: multiply; left: 37.031%; top: 9.259%; width: 62.969%; height: 80.926%; }
.intro3d-live-pouf { left: 29.792%; top: 26.389%; width: 70.208%; height: 63.889%; }
.intro3d.is-live-off .intro3d-live { display: none; }
@media (max-width: 700px) {
  .intro3d-live-shadow { left: 6.852%; top: 70.469%; width: 93.148%; height: 13.802%; }
  .intro3d-live-pouf { left: 4.259%; top: 38.958%; width: 95.741%; height: 53.906%; }
}
.intro3d.is-photo .intro3d-copy { position: absolute; z-index: 2; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: min(640px, 52%); }
.intro3d.is-photo .intro3d-facts { z-index: 2; right: var(--gutter); top: 15%; }
.intro3d.is-photo .intro3d-hint { z-index: 2; }
@media (max-width: 1100px) and (orientation: landscape) {
  /* Small laptops: the pouf comes close to the right edge — the figures go into one row under the headline. */
  .intro3d.is-photo .intro3d-facts { left: var(--gutter); right: auto; top: auto; bottom: 64px; grid-auto-flow: column; gap: 36px; text-align: left; }
}
@media (max-width: 1000px) and (orientation: portrait) {
  /* Portrait tablet: headline on paper above, the room below it. */
  .intro3d.is-photo .intro3d-stick { background: var(--paper); }
  .intro3d.is-photo .intro3d-copy { top: 28px; transform: none; right: var(--gutter); max-width: none; }
  .intro3d.is-photo .intro3d-frame { top: 44%; }
  .intro3d.is-photo .intro3d-scene { --sw: max(100%, calc(var(--stage-h) * .56 * 16 / 9)); }
  .intro3d.is-photo .intro3d-frame::after { background: linear-gradient(rgba(245, 242, 235, 1) 0, rgba(245, 242, 235, 0) 16%); }
  .intro3d.is-photo .intro3d-facts { top: calc(44% + 28px); left: var(--gutter); right: auto; text-align: left; }
}
@media (max-width: 700px) {
  /* Phones use their own vertical render (9:16): the pouf stands in the middle, the wall above it takes the headline. */
  .intro3d.is-photo .intro3d-scene { --sw: max(100%, calc(var(--stage-h) * 9 / 16)); aspect-ratio: 9 / 16; width: var(--sw); left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% calc(var(--qpy) * 100%); }
  .intro3d.is-photo .intro3d-still, .intro3d.is-photo .intro3d-canvas { left: var(--qx); top: var(--qy); width: var(--qw); height: var(--qh); }
  .intro3d.is-photo .intro3d-copy .section-label, .intro3d.is-photo .intro3d-copy .under-link { display: none; }
  .intro3d.is-photo h1 { font-size: clamp(36px, 11vw, 44px); margin-bottom: 12px; }
  .intro3d.is-photo .intro3d-lead { font-size: 14px; line-height: 1.6; margin-bottom: 0; max-width: 340px; }
  .intro3d.is-photo .intro3d-facts { grid-auto-flow: column; justify-content: start; gap: 22px; text-align: left; }
  .intro3d.is-photo .intro3d-facts strong { font-size: 20px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  /* Full-screen stage, the scroll unfolds the pouf as on a computer; the button waits at the bottom. */
  .intro3d.is-photo .intro3d-stick {
    --stage-h: max(520px, calc(100svh - var(--header-h, 58px)));
    position: sticky; top: var(--header-h, 58px); height: var(--stage-h); min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0;
  }
  .intro3d.is-photo .intro3d-frame { position: absolute; inset: 0; z-index: -1; }
  .intro3d.is-photo .intro3d-frame::after { display: block;
    background: linear-gradient(180deg, rgba(245, 242, 235, .9) 0%, rgba(245, 242, 235, .5) 23%, rgba(245, 242, 235, 0) 35%),
                linear-gradient(0deg, rgba(245, 242, 235, .65) 0%, rgba(245, 242, 235, 0) 12%); }
  .intro3d.is-photo .intro3d-copy { position: static; transform: none; max-width: none; padding: 18px var(--gutter) 0; }
  .intro3d.is-photo .intro3d-copy .hero-actions { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 18px; margin: 0; }
  .intro3d.is-photo .intro3d-facts { position: relative; top: auto; right: auto; left: auto; padding: 14px var(--gutter) 0; }
}
@media (max-width: 700px) and (max-height: 700px) and (prefers-reduced-motion: no-preference), (max-width: 340px) and (prefers-reduced-motion: no-preference) {
  /* Short or very narrow phones: the headline and the figures only, so the wall above the pouf stays free. */
  .intro3d.is-photo .intro3d-lead { display: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  /* No motion: headline, then a 4:5 window on the assembled pouf, then the figures. */
  .intro3d.is-photo .intro3d-stick { display: flex; flex-direction: column; align-items: stretch; }
  .intro3d.is-photo .intro3d-copy { position: relative; left: auto; right: auto; top: auto; transform: none; max-width: none; padding: 24px var(--gutter) 20px; }
  .intro3d.is-photo .intro3d-frame { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 4 / 5; }
  .intro3d.is-photo .intro3d-frame::after { display: none; }
  .intro3d.is-photo .intro3d-scene { width: 100%; left: 0; top: 50%; transform: translateY(calc(var(--qpy) * -100%)); }
  .intro3d.is-photo .intro3d-facts { position: relative; order: 3; top: auto; right: auto; left: auto; padding: 16px var(--gutter) 30px; }
}
/* Callouts: a dot on the part of the pouf the current figure talks about, a hairline to that figure. */
.intro3d-dot { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fbf8f1;
  box-shadow: 0 0 0 1px rgba(47, 51, 38, .3), 0 2px 10px rgba(47, 51, 38, .3); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.intro3d-dot::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(251, 248, 241, .95); animation: dot-pulse 2.4s cubic-bezier(.2, .7, .2, 1) infinite; }
.intro3d-dot.is-on { opacity: 1; }
@keyframes dot-pulse { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.intro3d-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .35s ease; }
.intro3d-line.is-on { opacity: 1; }
.intro3d-line line { stroke: rgba(47, 51, 38, .5); stroke-width: 1; }
.intro3d.has-callouts .intro3d-facts li.is-on { opacity: .38; }
.intro3d.has-callouts .intro3d-facts li.is-active { opacity: 1; }
/* Captions wrap instead of reaching into the pouf. */
.intro3d.is-photo .intro3d-facts li { justify-items: end; }
.intro3d.is-photo .intro3d-facts span { max-width: 170px; }
@media (max-width: 1100px) { .intro3d.is-photo .intro3d-facts li { justify-items: start; } }
/* Price of the pouf on the first screen, like a tag on a showroom floor; opens the pouf card. */
.intro3d-price { position: absolute; z-index: 3; right: var(--gutter); bottom: 26px; display: inline-flex; align-items: baseline; gap: 10px;
  padding: 11px 18px; border: 1px solid rgba(47, 51, 38, .2); border-radius: 999px; background: rgba(251, 248, 241, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font: inherit; font-size: 13px; letter-spacing: .02em;
  cursor: pointer; opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity .5s ease, translate .5s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; }
.intro3d-price b { font-family: Atelier, Georgia, serif; font-size: 21px; font-weight: 500; }
.intro3d-price i { font-style: normal; transition: translate .3s ease; }
.intro3d-price:hover { background: #fbf8f1; }
.intro3d-price:hover i { translate: 3px -3px; }
.intro3d.is-done .intro3d-price, .intro3d:not(.is-live) .intro3d-price { opacity: 1; translate: 0 0; pointer-events: auto; }
@media (max-width: 1100px) { .intro3d-line { display: none; } }
@media (max-width: 1100px) and (orientation: landscape) {
  .intro3d.is-photo .intro3d-facts { gap: 24px; }
  .intro3d.is-photo .intro3d-facts strong { font-size: 22px; }
}
@media (max-width: 700px) {
  .intro3d-price { bottom: 22px; padding: 9px 14px; font-size: 12px; }
  .intro3d-price b { font-size: 18px; }
}
@media (max-width: 440px) { .intro3d-price > span { display: inline; font-size: 11px; } }
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  /* One figure at a time on a phone: they take turns above the pouf. */
  .intro3d.is-photo.has-callouts .intro3d-facts { display: grid; grid-auto-flow: row; }
  .intro3d.is-photo.has-callouts .intro3d-facts li { grid-area: 1 / 1; opacity: 0; }
  .intro3d.is-photo.has-callouts .intro3d-facts li.is-active { opacity: 1; transform: none; }
  /* The price takes the right end of the figures row, on the wall, so it never meets the button or the pouf. */
  .intro3d.is-photo .intro3d-price { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: -40px var(--gutter) 0 0; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .intro3d.is-photo .intro3d-price { position: relative; order: 4; right: auto; bottom: auto; align-self: flex-start; margin: 0 var(--gutter) 28px; }
}

/* Pull-back: after the pouf is assembled the camera leaves it and shows the table, a second pouf and the screen. */
.intro3d-pull { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; pointer-events: none; }
/* The first pull frame already shows the edge of the screen: it fades in instead of popping. */
.intro3d.is-pulling .intro3d-pull { opacity: var(--pullin, 1); }
.intro3d-pullcap { position: absolute; z-index: 2; left: var(--gutter); top: 13%; margin: 0; max-width: 460px; pointer-events: none;
  font-family: Atelier, Georgia, serif; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink);
  opacity: calc(var(--cap, 0) * (1 - var(--out, 0) * 2)); translate: 0 calc((1 - var(--cap, 0)) * 18px); }
.intro3d-pullcap em { color: var(--accent); }
@media (max-width: 700px) { .intro3d-pullcap { top: 18px; right: var(--gutter); font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .intro3d-pullcap { display: none; } }

/* Hand-off: after the pouf is assembled the room dissolves into the interiors pinned under it (see upgrade.js). */
@media (prefers-reduced-motion: no-preference) {
  .intro3d.is-photo { height: 400vh; z-index: 2; background: transparent; }
  .intro3d.is-photo + .atelier-hero { z-index: 1; }
  .intro3d.is-photo .intro3d-stick { opacity: calc(1 - var(--fade, 0)); }
  /* The paper wash is for the headline; while the camera pulls back it would bleach the kraft pouf. */
  @media (min-width: 701px) { .intro3d.is-photo .intro3d-frame::after { opacity: calc(1 - var(--pull, 0) * .85); } }
  .intro3d.is-photo .intro3d-scene { scale: calc(1 + var(--out, 0) * .06); transform-origin: calc(var(--px) * 100%) calc(var(--py) * 100%); }
  .intro3d.is-photo .intro3d-copy { opacity: calc(1 - max(var(--pull, 0) * 2.2, var(--out, 0) * 1.8)); translate: 0 calc(max(var(--pull, 0), var(--out, 0)) * -36px); }
  .intro3d.is-photo .intro3d-facts, .intro3d.is-photo .intro3d-hint { opacity: calc(1 - max(var(--pull, 0) * 3, var(--out, 0) * 2.2)); }
  .intro3d.is-photo.is-pulling .intro3d-dot, .intro3d.is-photo.is-pulling .intro3d-line { visibility: hidden; }
  .atelier-hero.is-under .atelier-hero-media { scale: calc(1.1 - .1 * var(--reveal, 0)); }
  .atelier-hero.is-under .hero-copy, .atelier-hero.is-under .hero-bottom, .atelier-hero.is-under .hero-caption {
    opacity: var(--reveal, 0); translate: 0 calc((1 - var(--reveal, 0)) * 28px);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .intro3d.is-photo { height: 370svh; }
  .intro3d.is-photo .intro3d-scene { scale: calc(1 + var(--out, 0) * .05); }
  /* Any translate would make the text block the reference box of the bottom button: fade only. */
  .intro3d.is-photo .intro3d-copy { translate: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 701px) {
  /* No scroll travel: the stage keeps its height and shows the unfolded pouf. */
  .intro3d.is-photo .intro3d-stick { height: var(--stage-h); padding: 0; }
}

/* --- Look closer: the states of the pouf turn when you point at them (after iyO One's details) ---------- */
.look { position: relative; isolation: isolate; overflow: hidden; color: #f1ece0; padding-block: clamp(80px, 10vw, 140px);
  background: radial-gradient(120% 90% at 50% 64%, #36422f 0%, #252c22 55%, #1b2019 100%); }
/* A fan of hairlines behind the parts: the pouf seen from above. */
.look::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 66%, rgba(241, 236, 224, .055) 0deg .3deg, transparent .3deg 2.4deg);
  -webkit-mask-image: radial-gradient(58% 60% at 50% 66%, #000 0%, transparent 100%); mask-image: radial-gradient(58% 60% at 50% 66%, #000 0%, transparent 100%); }
.look .section-label { color: rgba(241, 236, 224, .66); }
.look h2 { color: #f5f0e4; margin: 0; }
.look-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; padding-inline: var(--gutter); }
.look-hint { margin: 0; font-size: 12px; letter-spacing: .04em; color: rgba(241, 236, 224, .6); }
.look-hint-touch { display: none; }
@media (hover: none) { .look-hint-mouse { display: none; } .look-hint-touch { display: inline; } }
.look-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 32px); padding: clamp(28px, 4vw, 56px) var(--gutter) 0; }
.look-part { all: unset; box-sizing: border-box; display: grid; justify-items: center; align-content: start; gap: 14px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.look-part:focus-visible { outline: 1px solid rgba(241, 236, 224, .55); outline-offset: 10px; border-radius: 20px; }
.look-media { position: relative; display: block; width: min(100%, 440px); aspect-ratio: 1; }
.look-media img, .look-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  animation: look-float 7s ease-in-out infinite; animation-delay: var(--delay, 0s); transition: translate .9s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
.look-media canvas { opacity: 0; }
.look.is-live .look-media canvas { opacity: 1; }
.look.is-live .look-media img { opacity: 0; }
/* A soft pool of shadow under each part; it tightens as the part lifts. */
.look-media::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 7%; height: 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 10, 7, .55), transparent); transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease; }
.look-part.is-on .look-media img, .look-part.is-on .look-media canvas { translate: 0 -12px; }
.look-part.is-on .look-media::after { transform: scale(.82); opacity: .7; }
@keyframes look-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.look-caption { display: grid; gap: 6px; max-width: 290px; }
.look-caption strong { font-family: Atelier, Georgia, serif; font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; line-height: 1; color: #f5f0e4; }
.look-caption span { font-size: 13px; line-height: 1.6; color: rgba(241, 236, 224, .6); transition: color .4s ease; }
.look-part.is-on .look-caption span { color: rgba(241, 236, 224, .92); }
.look-buy { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px 36px; padding: clamp(36px, 4vw, 56px) var(--gutter) 0; }
.look-buy p { margin: 0; font-size: 14px; color: rgba(241, 236, 224, .75); }
.look-buy b { font-family: Atelier, Georgia, serif; font-size: 30px; font-weight: 500; color: #f5f0e4; margin-inline: 8px; }
.look-actions { display: flex; align-items: center; gap: 22px; }
.look .under-link { color: #f1ece0; border-bottom-color: rgba(241, 236, 224, .6); }
@media (max-width: 700px) {
  .look-head { flex-direction: column; align-items: start; }
  /* Phones: the parts in a row you swipe through, one in the middle at a time. */
  .look-stage { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 12%; padding-bottom: 6px; scrollbar-width: none; }
  .look-stage::-webkit-scrollbar { display: none; }
  .look-part { scroll-snap-align: center; }
  .look-buy { flex-direction: column; align-items: start; }
  .look-buy p > span { display: block; margin-top: 2px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .look-media img, .look-media canvas { animation: none; transition: none; }
  .look-part.is-on .look-media img, .look-part.is-on .look-media canvas { translate: none; }
}

/* --- «Из чего сделано»: from the honeycomb cells up to the rosette and down to the open pouf (Blender frames) --- */
.paper-3d { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.paper-story.is-3d .paper-3d { opacity: 1; }
/* The photos stay for no-JS and reduced motion; atelier.js keeps writing their inline styles, so they are hidden this way. */
.paper-story.is-3d .paper-texture, .paper-story.is-3d .paper-object { visibility: hidden; }
@media (max-width: 700px) {
  .paper-story.is-3d .paper-story-images { background: radial-gradient(70% 60% at 50% 55%, #3d4a39 0%, #333d31 70%); }
}
@media (prefers-reduced-motion: reduce) { .paper-3d { display: none; } }
/* Where the section does not stick (phones, no motion) the sticky offset only pushed the block past the section's end. */
@media (max-width: 700px) { .paper-story-sticky { top: auto; } }
@media (prefers-reduced-motion: reduce) { .paper-story-sticky { top: 0; } }

/* --- New Year forms made to order, two palettes (Codex task N) ---------------------------------------- */
.ny-forms { margin-top: clamp(40px, 5vw, 72px); }
.ny-forms-head { display: flex; justify-content: space-between; align-items: end; gap: 18px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.ny-forms-head h3 { margin: 0 0 6px; font-family: Atelier, Georgia, serif; font-size: clamp(30px, 3vw, 46px); font-weight: 400; line-height: 1; }
.ny-forms-head p { margin: 0; font-size: 14px; color: var(--muted); }
.ny-palette { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(48, 56, 45, .08); }
.ny-palette button { all: unset; cursor: pointer; padding: 9px 16px; border-radius: 999px; font-size: 13px; color: var(--ink); transition: background-color .3s ease, color .3s ease; }
.ny-palette button[aria-pressed="true"] { background: var(--ink); color: #f5f2eb; }
.ny-palette button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ny-forms-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ny-form { all: unset; box-sizing: border-box; display: grid; gap: 6px; width: 100%; cursor: pointer; }
.ny-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #ebe3d6; }
.ny-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.ny-img .is-classic { opacity: 0; }
.ny-forms.is-classic .ny-img .is-classic { opacity: 1; }
.ny-forms.is-classic .ny-img .is-calm { opacity: 0; }
.ny-form:hover .ny-img img, .ny-form:focus-visible .ny-img img { transform: scale(1.05); }
.ny-form:focus-visible .ny-img { outline: 2px solid var(--accent); outline-offset: 3px; }
.ny-form strong { margin-top: 4px; font-family: Atelier, Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.05; }
.ny-form > span:last-child { font-size: 12px; color: var(--muted); }
/* The invitation block gets the evening reception behind its text. */
.festive-note.has-scene { position: relative; isolation: isolate; overflow: hidden; color: #f5f2eb; }
.festive-note-scene { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.festive-note.has-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 30, 24, .78) 0%, rgba(28, 30, 24, .45) 55%, rgba(28, 30, 24, .1) 100%); }
@media (max-width: 1000px) { .ny-forms-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .ny-forms-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .ny-forms-row::-webkit-scrollbar { display: none; }
  .ny-forms-row li { scroll-snap-align: start; }
  .ny-form strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ny-img img { transition: none; } }

/* --- Phones: long stacks become rows you swipe through (the page was 38 screens tall) ------------------ */
.only-phone { display: none; }
@media (max-width: 700px) {
  .only-wide { display: none; }
  .only-phone { display: inline; }
  /* «Каждая вещь — крупно»: one row of cards instead of six full-screen stacks. */
  .focus-reel { display: block; }
  .focus-reel .focus-sticky {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .focus-reel .focus-sticky::-webkit-scrollbar { display: none; }
  .focus-reel .focus-beat { scroll-snap-align: start; grid-template-columns: 1fr; gap: 14px; align-items: start; align-content: start; }
  .focus-reel .focus-media img, .focus-reel .focus-media video { aspect-ratio: 4 / 5; }
  .focus-reel .focus-kicker { margin-bottom: 8px; }
  .focus-reel .focus-beat h3 { font-size: 30px; margin-bottom: 8px; }
  .focus-reel .focus-line { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
  .focus-reel .focus-price { font-size: 22px; margin-bottom: 12px; }
  /* Business: the three offers side by side, swiped. */
  .business-solutions { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-left: 0; margin-right: 0; padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .business-solutions::-webkit-scrollbar { display: none; }
  .business-solutions > * { scroll-snap-align: start; }
  .business-solutions .business-display { grid-column: auto; max-width: none; }
}

/* --- Line panels: a colour field, the line's name in giant letters, the things standing in front (after Moooi) --- */
.line-panel {
  --ph: clamp(440px, 70vh, 740px); --floor: 9%;
  position: relative; isolation: isolate; overflow: hidden; height: var(--ph);
  margin: 0 0 clamp(30px, 3.6vw, 52px); border-radius: clamp(20px, 2.4vw, 34px);
  background: radial-gradient(ellipse 70% 60% at 50% 28%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%), var(--lp-bg);
}
.line-panel::after { content: ''; position: absolute; inset: auto 0 0; height: calc(var(--floor) + 6%); z-index: -1; background: linear-gradient(rgba(60, 40, 25, 0), rgba(60, 40, 25, .06)); }
.lp-word {
  position: absolute; left: 50%; top: var(--wt, 37%); z-index: -1; margin: 0; white-space: nowrap;
  font-family: Atelier, Georgia, serif; font-weight: 500; font-size: 200px; line-height: .8; letter-spacing: -.045em; color: var(--lp-ink);
  translate: -50% -50%;
  transform: translate3d(calc(var(--lp, 0) * -7%), calc(var(--lp, 0) * 14%), 0) translate(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px));
  transition: opacity 1s ease, scale 1.4s cubic-bezier(.2, .7, .2, 1);
}
.lp-obj {
  all: unset; box-sizing: border-box; position: absolute; left: calc(50% + var(--x)); bottom: calc(var(--floor) + var(--f) * var(--ph));
  height: calc(var(--ph) * var(--h)); aspect-ratio: var(--r); cursor: pointer; z-index: calc(var(--z) * 10);
  translate: -50% 0;
  transform: translate3d(calc(var(--mx, 0) * 12px * var(--z)), calc(var(--lp, 0) * -70px * var(--z) + var(--my, 0) * 6px * var(--z)), 0) rotate(calc(var(--mx, 0) * 1.4deg * var(--z)));
  transition: opacity .9s ease calc(var(--i) * 140ms + 120ms), translate 1.2s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 140ms + 120ms);
}
.lp-obj img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transition: scale .6s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; }
.lp-obj::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -3.5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 38, 24, .34), rgba(58, 38, 24, 0)); }
.lp-pill {
  position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 6px; padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  background: rgba(250, 248, 243, .92); color: var(--ink); font-size: 13px; line-height: 1.2; box-shadow: 0 8px 24px rgba(40, 30, 20, .12);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, translate .4s cubic-bezier(.2, .7, .2, 1);
}
.lp-obj:hover img { scale: 1.035; }
.lp-obj:hover .lp-pill { opacity: 1; translate: -50% 0; }
.line-panel.is-waiting .lp-obj { opacity: 0; translate: -50% 70px; }
.line-panel.is-waiting .lp-word { opacity: 0; scale: .94; }
@media (max-width: 700px) {
  .line-panel { --ph: clamp(280px, 38svh, 360px); --floor: 10%; margin-bottom: 22px; border-radius: 20px; }
  .lp-word { top: var(--wtm, 33%); }
  /* The giant word already names the line: the small label above the heading would repeat it. */
  .section:has(> .line-panel) { padding-top: 36px; }
  .assortment-group > .line-panel + .section-heading .section-label { display: none; }
  .lp-obj { left: calc(50% + var(--xm)); bottom: calc(var(--floor) + var(--fm) * var(--ph)); height: calc(var(--ph) * var(--hm)); }
  .lp-pill { display: none; }
}
@media (hover: none) { .lp-pill { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lp-word, .lp-obj { transform: none; transition: none; }
  .lp-obj img, .lp-pill { transition: none; }
}

/* --- «Днём и вечером»: the real light change of one locked shot (task V1), drawn over the two photos ------- */
.business .daylight .space-images .space-film {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease;
  transform: scale(calc(1.045 - var(--space-p, 0) * .045));
}
.daylight.has-film .space-images .space-film { opacity: 1; }

/* The first scene of the interiors is the room the first-screen bridge ends in (Codex M1), its own vertical frame on phones. */
.hero-scenes picture { display: contents; }
@media (max-width: 700px) { .hero-scenes .hero-scene.is-room { object-position: 50% 50%; } }


/* --- Scenes «День / Вечер / Праздник»: price spots on the things in the photo (2026-09-21) --- */
.hero-scenes .hero-scene, .hero-scenes .hero-scene.is-active { transform: none; }
.scene-spots { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .5s ease; }
.atelier-hero.is-under:not(.is-revealed) .scene-spots { opacity: 0; visibility: hidden; }
.intro3d.is-out, .intro3d.is-out * { pointer-events: none; }
.scene-spot {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.scene-spot[hidden] { display: none; }
.scene-spot i {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fffaf0; box-shadow: 0 0 0 1px rgba(48, 56, 45, .28), 0 2px 10px rgba(30, 25, 15, .35); transition: transform .3s ease;
}
.scene-spot i::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 250, 240, .9);
  animation: spotPulse 2.6s ease-out infinite;
}
@keyframes spotPulse { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.scene-spot span {
  position: absolute; left: 36px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  background: rgba(252, 249, 242, .96); color: var(--ink); font-size: 12px; letter-spacing: .02em; box-shadow: 0 6px 24px rgba(30, 25, 15, .18);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.scene-spot.is-left span { left: auto; right: 36px; transform: translate(6px, -50%); }
.scene-spot:hover i, .scene-spot:focus-visible i { transform: scale(1.35); }
.scene-spot:hover span, .scene-spot:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.scene-spot:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; border-radius: 50%; }
/* The copy sits on the sunlit wall above the furniture, so nothing in the photo is covered. */
.atelier-hero { align-items: flex-start; }
.atelier-hero:after { background: none; }
/* A sheet of paper under the copy keeps it readable on the day, evening and festive photos alike. */
.atelier-hero .hero-copy { width: auto; max-width: 500px; margin-top: clamp(0px, 2vh, 28px); padding: 30px 34px 32px; border-radius: 4px; background: rgba(248, 244, 236, .9); box-shadow: 0 18px 50px rgba(30, 25, 15, .16); backdrop-filter: blur(14px); }
.atelier-hero .hero-copy .section-label { margin-bottom: 18px; }
.atelier-hero h2.scenes-title { font-size: clamp(34px, 3.3vw, 54px); line-height: 1; margin-bottom: 16px; }
.atelier-hero .hero-description { font-size: 15px; line-height: 1.6; margin-bottom: 0; }
.atelier-hero .hero-copy .hero-actions { margin-top: 22px; }
.atelier-hero .hero-description { max-width: 440px; }
@media (max-width: 700px) {
  .atelier-hero .hero-copy { width: 100%; max-width: none; margin-top: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .atelier-hero h2.scenes-title { font-size: 40px; }
  .atelier-hero:after { background: linear-gradient(180deg, #eee9dfee 0%, #eee9dfdb 30%, #eee9df00 52%); }
  .scene-spot span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scene-spot i::after { animation: none; opacity: .6; transform: scale(1); } }
/* Scene tabs and the caption get their own paper backing: the photo under them is no longer washed out. */
.atelier-hero .hero-tabs { padding: 2px 20px 10px; border-radius: 22px; background: rgba(252, 249, 242, .93); box-shadow: 0 8px 28px rgba(30, 25, 15, .16); backdrop-filter: blur(10px); }
.atelier-hero .hero-pause { padding: 0 16px; border: 0; border-radius: 999px; background: rgba(252, 249, 242, .93); box-shadow: 0 8px 28px rgba(30, 25, 15, .16); }
.atelier-hero .hero-caption { padding: 8px 14px; border-radius: 14px; background: rgba(252, 249, 242, .9); }
@media (max-width: 700px) {
  .atelier-hero .hero-caption { display: none; }
  .atelier-hero .hero-tabs { padding: 0 14px 8px; }
}

/* A way past the unfolding for those who came to buy (2026-09-21). */
.intro3d-skip { position: absolute; left: 50%; bottom: 20px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(252, 249, 242, .86); color: var(--ink); font-size: 12px; letter-spacing: .03em; text-decoration: none; box-shadow: 0 6px 22px rgba(30, 25, 15, .12); opacity: calc(1 - max(var(--pull, 0) * 3, var(--out, 0) * 2.2)); transition: background .25s ease; }
.intro3d-skip:hover, .intro3d-skip:focus-visible { background: #fffdf8; }
@media (max-width: 700px) { .intro3d-skip { display: none; } }

/* Phone: the photo takes the lower 60% of the block in full width, the copy sits on paper above it. */
@media (max-width: 700px) {
  .hero-scenes .hero-scene, .hero-scenes .hero-scene.is-room { top: auto; bottom: 0; height: 60%; object-position: 50% 50%; }
  .atelier-hero:after { background: none; }
  .atelier-hero { padding-top: 30px; }
  .atelier-hero h2.scenes-title { font-size: 36px; margin-bottom: 12px; }
  .atelier-hero .hero-description { font-size: 13px; line-height: 1.55; }
  .atelier-hero .hero-copy .hero-actions { margin-top: 14px; }
}

/* --- Phone review 21.09: defects found on the full phone walk ----------------------------------------------- */
@media (max-width: 700px) {
  /* B2B: the vases block and the price note had lost their side gutters. */
  .business-decor, .business-reference-note { box-sizing: border-box; padding-inline: var(--gutter); }
  /* Festive tiles: rows grow with their content (the button under the note was clipped), the caption gets a darker base */
  /* so the white type is readable over the figures, and the price stays on one line. */
  .festive { grid-auto-rows: minmax(250px, auto); }
  .festive-tile::after { background: linear-gradient(180deg, rgba(18, 24, 18, 0) 12%, rgba(18, 24, 18, .66) 50%, rgba(18, 24, 18, .93)); }
  .festive-tile figcaption { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
  .festive-tile:not(.is-hero):not(.is-tall) figcaption strong { font-size: 18px; }
  .festive-tile:not(.is-hero):not(.is-tall) figcaption span { font-size: 12px; opacity: 1; }
  .festive-note { align-content: start; }
  .festive-note p { font-size: 22px; }
  .festive-note.has-scene::before { background: linear-gradient(180deg, rgba(28, 30, 24, .74), rgba(28, 30, 24, .58)); }
}
/* Footer line was nearly invisible on the dark green. */
.site-footer .footer-top > p { color: rgba(245, 242, 235, .78); }

/* ===========================================================================================================
   Hybrid 21.09.2026: the short page. Catalogue in one ribbon right after the scenes, one chapter about the pouf,
   secondary content folded under a line (the way the live page folds its instruction). Everything is scoped by
   body.is-hybrid, so the blocks keep their old look if the class is removed.
   =========================================================================================================== */
/* --- Folded parts ------------------------------------------------------------------------------------------ */
.fold-more { margin-top: clamp(22px, 3vw, 40px); border-block: 1px solid var(--line); }
.fold-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 8px 2px; cursor: pointer; list-style: none; font-size: 15px; letter-spacing: .01em; }
.fold-more > summary::-webkit-details-marker { display: none; }
.fold-more > summary i { position: relative; flex: 0 0 18px; height: 18px; }
.fold-more > summary i::before, .fold-more > summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: rotate .35s ease; }
.fold-more > summary i::after { rotate: 90deg; }
.fold-more[open] > summary i::after { rotate: 0deg; }
.fold-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fold-more[open] { padding-bottom: clamp(20px, 3vw, 36px); }
.look .fold-more { border-color: rgba(245, 242, 235, .22); color: #f2efe4; }
.forms-more .new-forms { margin-top: 18px; }
.forms-light-note { margin: 18px 0 0; color: var(--muted); }
.shift-more { margin-inline: var(--gutter); }
.shift-more .shift { margin-top: 12px; padding-inline: 0; }

/* --- Catalogue ribbon --------------------------------------------------------------------------------------- */
body.is-hybrid .collection.section, body.is-hybrid .assortment-group.section { padding-block: clamp(26px, 3.4vw, 52px); }
body.is-hybrid .line-panel { --ph: clamp(240px, 36vh, 360px); margin-bottom: clamp(18px, 2vw, 28px); }
body.is-hybrid .collection .section-heading, body.is-hybrid .assortment-group .section-heading { margin-bottom: clamp(16px, 2vw, 26px); }
body.is-hybrid .collection h2, body.is-hybrid .assortment-group h2 { font-size: clamp(26px, 2.4vw, 38px); }
body.is-hybrid .product-card .product-description, body.is-hybrid .product-card .color-caption { display: none; }
body.is-hybrid .product-card .product-facts { margin: 6px 0 10px; font-size: 12.5px; }
body.is-hybrid .product-card .product-facts span + span { display: none; }
body.is-hybrid .product-card .color-label { display: none; }
body.is-hybrid .product-card .color-choices { gap: 4px; }
body.is-hybrid .product-card .color-choices button { gap: 0; padding: 0; width: 40px; min-height: 40px; justify-content: center; border-color: transparent; background: none; box-shadow: none; font-size: 0; }
body.is-hybrid .product-card .color-choices button .color-swatch { width: 20px; height: 20px; box-shadow: 0 0 0 1px rgba(48, 56, 45, .22); }
body.is-hybrid .product-card .color-choices button[aria-pressed="true"] .color-swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
body.is-hybrid .product-grid .product-image, body.is-hybrid .assortment-grid .product-image { aspect-ratio: 1; }
body.is-hybrid .product-card .product-actions { padding-top: 10px; }
body.is-hybrid .collection > .micro-note, body.is-hybrid .collection .catalog-note { display: none; }
.catalog-terms { margin: 0; padding: 4px var(--gutter) clamp(30px, 4vw, 60px); font-size: 14px; line-height: 1.6; color: var(--muted); }
.catalog-terms .under-link { margin-left: 6px; color: var(--ink); }
.lineup-row { display: grid; }
@media (min-width: 1100px) {
  /* Three lines stand side by side like shelves: a colour panel on top, two things under it. */
  .lineup-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 44px); padding-inline: var(--gutter); }
  body.is-hybrid .lineup-row .assortment-group.section { padding-inline: 0; background: none; }
  body.is-hybrid .lineup-row .line-panel { --ph: clamp(220px, 30vh, 300px); }
  body.is-hybrid .lineup-row .section-heading { display: block; }
  body.is-hybrid .lineup-row .section-intro { display: none; }
  body.is-hybrid .lineup-row .assortment-grid, body.is-hybrid #custom-furniture .assortment-grid, body.is-hybrid #paper-decor .assortment-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  body.is-hybrid .lineup-row .product-meta { display: block; }
  body.is-hybrid .lineup-row .product-meta h3 { font-size: 19px; line-height: 1.15; }
  body.is-hybrid .lineup-row .product-meta p { margin-top: 4px; font-size: 17px; }
  body.is-hybrid .lineup-row .product-facts { display: none; }
  body.is-hybrid .lineup-row .product-actions { flex-wrap: wrap; gap: 6px 14px; }
  body.is-hybrid #paper-toys { padding: clamp(26px, 3.4vw, 52px) 0; }
  body.is-hybrid #paper-toys .assortment-card { padding: 0; background: none; }
  body.is-hybrid .collection .product-grid { max-width: 1180px; }
}
@media (max-width: 700px) {
  body.is-hybrid .line-panel { --ph: 168px; margin-bottom: 16px; border-radius: 16px; }
  body.is-hybrid .collection h2, body.is-hybrid .assortment-group h2 { font-size: 25px; }
  body.is-hybrid .collection .section-intro, body.is-hybrid .assortment-group .section-intro { display: none; }
  body.is-hybrid .collection .section-label, body.is-hybrid .assortment-group .section-label { margin-bottom: 8px; }
  body.is-hybrid .product-grid, body.is-hybrid .assortment-grid, body.is-hybrid #paper-toys .assortment-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  body.is-hybrid .product-card .product-meta { display: block; margin-top: 10px; }
  body.is-hybrid .product-card .product-meta h3 { font-size: 16px; line-height: 1.2; }
  body.is-hybrid .product-card .product-meta p { margin-top: 3px; font-size: 15px; }
  body.is-hybrid .product-card .product-facts { display: none; }
  body.is-hybrid .product-card .product-actions { flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; }
  body.is-hybrid .product-card .product-actions .fold-btn { --fold-h: 38px; --fold-open: 8; width: 100%; font-size: 13px; }
  body.is-hybrid .product-card .product-actions .under-link { display: none; }
  body.is-hybrid .product-card .card-scene-hint { display: none; }
  body.is-hybrid #paper-toys { padding: 26px var(--gutter); }
  body.is-hybrid #paper-toys .assortment-card { padding: 0; background: none; }
  .catalog-terms { font-size: 13px; }
  /* The category bar stays at the top of the catalogue instead of following the whole page. */
  body.is-hybrid .assortment-jump { position: relative; top: auto; } /* relative, not static: the sliding marker is positioned inside the bar */
}

/* --- The pouf chapter: facts, four steps and the film in one dark block ------------------------------------------ */
.look-steps { margin-top: clamp(34px, 4.4vw, 70px); padding-top: clamp(26px, 3vw, 44px); border-top: 1px solid rgba(245, 242, 235, .2); color: #f2efe4; }
.look-steps-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 30px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.2vw, 30px); }
.look-steps-head h3 { margin: 0; font-family: Atelier, Georgia, serif; font-size: clamp(26px, 2.6vw, 40px); font-weight: 400; line-height: 1.05; }
.look-steps-head h3 em { color: #c9d3b4; }
.look-steps-head .under-link { color: #f2efe4; }
.look-steps-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 4fr); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.look-steps .unfold-real { margin: 0; aspect-ratio: 9 / 16; max-height: 360px; border-radius: 12px; overflow: hidden; position: relative; background: #232a20; }
.look-steps .unfold-real img, .look-steps .unfold-real video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look-steps .unfold-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.look-steps .unfold-steps li { counter-increment: step; }
.look-steps .unfold-steps img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.look-steps .unfold-steps h3 { margin: 12px 0 4px; font-size: 16px; font-weight: 600; color: #f5f2eb; }
.look-steps .unfold-steps h3::before { content: counter(step) " · "; color: #c9d3b4; }
.look-steps .unfold-steps p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(245, 242, 235, .78); }
.look-steps .pouf-notes { margin-top: 8px; color: rgba(245, 242, 235, .86); }
.look-steps .pouf-notes h3 { color: #f5f2eb; }
.look-steps .pouf-notes p { color: rgba(245, 242, 235, .78); }
@media (max-width: 700px) {
  .look-steps-row { grid-template-columns: 1fr; }
  .look-steps .unfold-real { display: none; }
  .look-steps .unfold-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .look-steps .unfold-steps::-webkit-scrollbar { display: none; }
  .look-steps .unfold-steps li { scroll-snap-align: start; }
  .fold-more > summary { font-size: 14px; min-height: 56px; }
}

/* --- New Year, short ------------------------------------------------------------------------------------------ */
.festive.is-short { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 19vw, 290px); }
.festive.is-short .festive-note { grid-column: span 2; }
@media (max-width: 1000px) { .festive.is-short { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .festive.is-short .festive-tile.is-hero { grid-row: span 1; } .festive.is-short { grid-auto-rows: minmax(230px, auto); } }
body.is-hybrid .seasons.section { padding-block: clamp(40px, 5vw, 80px); }
body.is-hybrid .ny-forms { margin-top: clamp(28px, 3.4vw, 50px); }

/* --- Order and delivery in one block ------------------------------------------------------------------------------ */
.order-mini { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); margin: 0 0 clamp(20px, 2.4vw, 34px); padding: 0 0 clamp(20px, 2.4vw, 34px); list-style: none; counter-reset: order; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: #55594b; }
.order-mini li { counter-increment: order; }
.order-mini li::before { content: counter(order); display: block; margin-bottom: 8px; font-family: Atelier, Georgia, serif; font-size: 30px; line-height: 1; color: var(--accent); }
.order-mini b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .order-mini { grid-template-columns: 1fr; gap: 12px; font-size: 14px; } .order-mini li { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; } .order-mini li::before { margin: 0; font-size: 24px; grid-row: span 2; } }

/* --- Channels, compact --------------------------------------------------------------------------------------------- */
body.is-hybrid .social.section { padding-block: clamp(40px, 5vw, 76px); }
body.is-hybrid .social h2 { font-size: clamp(28px, 3vw, 46px); }
@media (max-width: 700px) { body.is-hybrid .social-card .social-body > span:not(.social-handle) { display: none; } body.is-hybrid .social-card { padding-block: 16px; } }

/* --- First screen: shorter travel, the price of the pouf is there from the first second -------------------------------- */
@media (prefers-reduced-motion: no-preference) { body.is-hybrid .intro3d.is-photo { height: 350vh; } }
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  body.is-hybrid .intro3d.is-photo { height: 320svh; }
  /* 23.09: the price belongs to the pouf in the close-up; while the camera pulls back it would hang over the screen */
  /* and read as the price of the screen, so it leaves with the first metres of the pull-back. */
  body.is-hybrid .intro3d.is-photo .intro3d-price { opacity: calc(1 - max(var(--pull, 0) * 4, var(--out, 0) * 2.2)); translate: 0 0; pointer-events: auto; }
  body.is-hybrid .intro3d.is-photo.is-pulling .intro3d-price { pointer-events: none; }
}

/* --- Phone: readable small type, icons of the phone and Telegram in the header (as on the live page) ------------------------ */
@media (max-width: 700px) {
  body.is-hybrid .section-label { font-size: 12px; letter-spacing: .08em; }
  body.is-hybrid .intro3d-facts span, body.is-hybrid .hero-tabs button, body.is-hybrid .color-caption { font-size: 12.5px; }
  body.is-hybrid .site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  body.is-hybrid .header-contacts { display: flex; margin-left: auto; gap: 0; }
  body.is-hybrid .header-contact { width: 40px; justify-content: center; }
  body.is-hybrid .header-contact > span { display: none; }
  body.is-hybrid .site-header .header-contacts + .header-fold { margin-left: 4px; }
}
@media (max-width: 374px) { body.is-hybrid .header-contact:not(.phone-contact) { display: none; } }

/* --- Order in Telegram next to the basket ---------------------------------------------------------------------------------- */
.tg-order { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 14px; text-decoration: none; transition: background-color .25s ease, border-color .25s ease; }
.tg-order:hover, .tg-order:focus-visible { background: #ede8df; border-color: var(--ink); }
.tg-order svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Hybrid: notes of the first line; both lines of two things stand in two columns on a phone. */
body.is-hybrid .collection-note, body.is-hybrid .wholesale-note { display: none; }
.grid-note { display: none; }
@media (max-width: 700px) {
  body.is-hybrid #custom-furniture .assortment-grid, body.is-hybrid #paper-decor .assortment-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .grid-note { display: block; align-self: center; margin: 0; padding: 14px; border-radius: 14px; background: #ece6d8; font-size: 13px; line-height: 1.55; color: #4c5143; }
  .grid-note b { display: block; margin: 2px 0; font-family: Atelier, Georgia, serif; font-size: 19px; font-weight: 400; line-height: 1.15; color: var(--ink); }
}
/* Hybrid: the three lines share one paper background and one top edge. */
body.is-hybrid #paper-decor, body.is-hybrid #paper-toys { background: none; }
@media (min-width: 1100px) { body.is-hybrid .lineup-row .assortment-group.section, body.is-hybrid .lineup-row .assortment-group + .assortment-group, body.is-hybrid .lineup-row #paper-toys { padding-top: clamp(26px, 3.4vw, 52px); padding-bottom: clamp(20px, 2.4vw, 36px); margin: 0; } }
/* The vases block and the price note keep the page gutters on every width. */
.business-decor, .business-reference-note { box-sizing: border-box; padding-inline: var(--gutter); }

/* Phone: the pouf unfolds by itself, so the scroll travel only carries the camera pull-back and the dissolve. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) { body.is-hybrid .intro3d.is-photo.is-selfplay { height: 250svh; } }

/* --- Scenes block, 21.09 late: a smaller sheet for the copy — it covered too much of the photo ----------------------- */
body.is-hybrid .atelier-hero .hero-copy { max-width: 390px; padding: 22px 26px 24px; margin-top: clamp(0px, 1.5vh, 20px); }
body.is-hybrid .atelier-hero .hero-copy .section-label { margin-bottom: 12px; font-size: 10.5px; }
body.is-hybrid .atelier-hero h2.scenes-title { font-size: clamp(27px, 2.35vw, 38px); margin-bottom: 12px; }
body.is-hybrid .atelier-hero .hero-description { font-size: 14px; line-height: 1.55; }
body.is-hybrid .atelier-hero .hero-copy .hero-actions { margin-top: 16px; }
@media (max-width: 1000px) and (min-width: 701px) { body.is-hybrid .atelier-hero .hero-copy { max-width: 330px; padding: 18px 20px 20px; } body.is-hybrid .atelier-hero h2.scenes-title { font-size: 26px; } }
@media (max-width: 700px) { body.is-hybrid .atelier-hero .hero-copy { max-width: none; padding: 0; } body.is-hybrid .atelier-hero h2.scenes-title { font-size: 34px; } body.is-hybrid .atelier-hero .hero-description { font-size: 13px; } }

/* --- Hand-off of the first screen through warm light (see upgrade.js, --dip / --gone / --veil / --settle) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  body.is-hybrid .intro3d.is-photo .intro3d-stick { opacity: calc(1 - var(--gone, 0)); }
  body.is-hybrid .intro3d.is-photo .intro3d-stick::after, body.is-hybrid .atelier-hero.is-under::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 4% 24%, #fffaf0 0%, rgba(255, 250, 240, 0) 62%), #f6ecda;
  }
  body.is-hybrid .intro3d.is-photo .intro3d-stick::after { z-index: 6; opacity: var(--dip, 0); }
  body.is-hybrid .atelier-hero.is-under::before { z-index: 2; opacity: var(--veil, 0); }
  body.is-hybrid .atelier-hero.is-under .atelier-hero-media { scale: calc(1.06 - .06 * var(--settle, 0)); }
  body.is-hybrid .atelier-hero.is-under .hero-copy, body.is-hybrid .atelier-hero.is-under .hero-bottom, body.is-hybrid .atelier-hero.is-under .hero-caption {
    opacity: var(--copy-in, 0); translate: 0 calc((1 - var(--copy-in, 0)) * 20px);
  }
}

/* --- Day bridge, 22.09: the pull-back ends on the picture of the first scene (see upgrade.js, .is-matched) ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  /* The stage and the scene under it must be the same picture in the same place: no push-in on the way out, */
  /* and the 16:9 scene slides from the pouf-anchored position to the centre while the camera is moving anyway. */
  body.is-hybrid .intro3d.is-photo.is-matched { height: 430vh; }
  /* The scene block takes the height of the stage (the header gets compact on scroll and the stage grows with it): */
  /* a different height would mean a different cover scale, and the two pictures would not coincide. */
  body.is-hybrid .intro3d.is-photo.is-matched + .atelier-hero { height: max(560px, calc(100svh - var(--header-h, 88px))); min-height: 0; max-height: none; }
  /* The paper wash under the headline leaves with it: on the longer pull-back it kept bleaching the kraft pouf. */
  body.is-hybrid .intro3d.is-photo.is-matched .intro3d-frame::after { opacity: calc(1 - var(--pull, 0) * 4); }
  /* The headline leaves quickly, so the line about the set never sits on top of it. */
  body.is-hybrid .intro3d.is-photo.is-matched .intro3d-copy { opacity: calc(1 - max(var(--pull, 0) * 5, var(--out, 0) * 1.8)); }
  body.is-hybrid .intro3d.is-photo.is-matched .intro3d-facts, body.is-hybrid .intro3d.is-photo.is-matched .intro3d-hint { opacity: calc(1 - max(var(--pull, 0) * 6, var(--out, 0) * 2.2)); }
  body.is-hybrid .intro3d.is-photo.is-matched .intro3d-scene {
    scale: none;
    left: calc(clamp(calc(100% - var(--sw)), calc(68% - var(--px) * var(--sw)), 0px) * (1 - var(--centre, 0)) + (100% - var(--sw)) / 2 * var(--centre, 0));
  }
}

/* --- Polish, 22.09: small things found on a fresh pass over the page ------------------------------------------------ */
/* New Year: rows grow with their content (the button under the note was cut by 10 px); the caption base is darker, */
/* so white type stays readable over the yellow tree and the white snowman. */
.festive.is-short { grid-auto-rows: minmax(clamp(200px, 19vw, 290px), auto); }
.festive.is-short .festive-note p { font-size: clamp(21px, 1.85vw, 29px); max-width: 30ch; }
@media (min-width: 701px) {
  .festive-tile:not(.is-hero)::after { background: linear-gradient(180deg, rgba(18, 24, 18, 0) 26%, rgba(18, 24, 18, .58) 58%, rgba(18, 24, 18, .92)); }
  .festive-tile figcaption { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
}
.ny-palette { align-items: center; }
.ny-palette-label { padding: 0 8px 0 12px; font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 380px) { .ny-palette-label { display: none; } }   /* the two buttons alone fill a 320 px screen */
/* Buttons that sat right on the paragraph above them. */
.business-copy > .fold-btn, .faq-heading > .fold-btn, p.body-large + .fold-btn { margin-top: 22px; }
/* The vases card speaks in the same voice as the three cards above it. */
.business-decor h3 { font-size: clamp(23px, 1.9vw, 27px); }
.space-scene.daylight figcaption { font-size: 13px; line-height: 1.5; }
body.is-hybrid .collection .product-grid { max-width: none; }
@media (min-width: 1100px) {
  /* A two-line name no longer pushes its row of buttons lower than the neighbours. */
  body.is-hybrid .lineup-row .product-meta h3 { min-height: 2.3em; }
}
@media (max-width: 700px) {
  body.is-hybrid #paper-toys .product-meta h3 { font-size: 16px; }
  /* Promises: all four start on the same vertical. */
  .store-promises p span { margin-left: 0; }
  /* The ribbon of steps keeps the page gutter; the first card no longer touches the edge of the screen. */
  .look-steps .unfold-steps { padding-inline: 22px; scroll-padding-inline: 22px; }
  /* Business ribbon: the first card is built like the others — photo on top, no empty band above it. */
  .business-solutions .business-display { padding-block: 0; border-top: 0; }
  .business-solutions .business-display img { aspect-ratio: 3 / 2; max-width: none; object-fit: cover; margin-bottom: 26px; }
  .space-scene.daylight figcaption { font-size: 12px; }
}

/* --- Phone clip, 23.09: the last frame of the vertical pull-back settles into the day photo (see upgrade.js, placeBridge) */
/* The layer sits in the scene block over its photo; upgrade.js sets its box every scroll frame and hides it afterwards. */
.scene-bridge { position: absolute; left: 0; top: 0; z-index: 1; display: none; overflow: hidden; pointer-events: none; }
.scene-bridge.is-on { display: block; }
.scene-bridge img { position: absolute; max-width: none; }
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  /* The stage and the layer must show the frame in the same place: no push-in while the stage leaves. */
  body.is-hybrid .intro3d.is-photo.is-matched .intro3d-scene { scale: none; }
  body.is-hybrid .intro3d.is-photo.is-matched .intro3d-frame::after { opacity: var(--wash, 1); }
}

/* --- Business kits, 25.09: on a phone the four kits fold under one line «Подиумы, перегородки и вазы с ценами» (upgrade.js closes the line at start), */
/* right under «До и после», as one list of two lines; on a computer the line is not needed — the kits stand open as before. */
@media (min-width: 701px) {
  .fold-more.kits-more, .fold-more.kits-more[open] { margin: 0; padding: 0; border: 0; }
  .kits-more > summary { display: none; }
}
@media (max-width: 700px) {
  .kits-more { margin-inline: var(--gutter); }
  .shift-more + .kits-more { margin-top: 0; border-top: 0; }
  .kits-more .business-solutions { margin: 14px calc(-1 * var(--gutter)) 0; }
  .kits-more .business-decor, .kits-more .business-reference-note { padding-inline: 0; }
}

/* --- Business photos keep their place before they load (25.09). refinement.css sets aspect-ratio:auto on them, which drops the */
/* ratio the width/height attributes give: on a computer two photos arrived with zero height, the block grew by ~420 px under */
/* a jump to #delivery or #questions, and the jump landed that much short. The photos are 1280 × 853, so nothing else changes. */
.business-solutions article img { aspect-ratio: auto 1280 / 853; }

/* --- Consent line in the order form, 25.09 late evening (Alexander: «убери галочку и оставь мелкую строку про согласие, */
/* чтобы она не сильно бросалась в глаза»): no checkbox. The form sends privacy_consent=1 with its version, as the server */
/* expects, and a small muted line under the payment note says what sending the form means. */
#checkout-form .checkout-consent-note { margin: -10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted, #6f6a60); opacity: .85; }
#checkout-form .checkout-consent-note a { color: inherit; text-decoration: underline; text-decoration-color: rgba(111, 106, 96, .35); text-underline-offset: 2px; }

/* --- Scene tabs, 25.09 evening (Alexander: the plates «выбиваются из нашей стилистики»). One capsule of paper glass: the
   photo shows through, blurred. Labels in the display serif; the active scene is an ink pill like the site's buttons, its
   thin line inside fills while the scene is on. The pause is a round glass button with an icon (the label stays for screen
   readers). The «В кадре…» caption plate is gone (Alexander: «мешает только»); the scene photos keep their alt text. --- */
.atelier-hero .hero-bottom { gap: 10px; }
.atelier-hero .hero-tabs, .atelier-hero .hero-pause {
  background: rgba(247, 243, 234, .72); border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 16px 36px rgba(33, 28, 18, .16), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
}
.atelier-hero .hero-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.atelier-hero .hero-tabs button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px;
  padding: 0 20px 2px; border-radius: 999px; color: rgba(36, 35, 31, .7);
  font-family: Atelier, Georgia, serif; font-size: 19px; font-weight: 500; letter-spacing: 0; line-height: 1;
  transition: background-color .45s ease, color .45s ease;
}
.atelier-hero .hero-tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.atelier-hero .hero-tabs button[aria-pressed="true"] { color: #f6f2e8; background: var(--ink); font-style: italic; }
.atelier-hero .hero-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.atelier-hero .hero-tabs i { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 1px; background: transparent; }
.atelier-hero .hero-tabs button[aria-pressed="true"] i { background: rgba(246, 242, 232, .22); }
.atelier-hero .hero-tabs i::after { background: rgba(246, 242, 232, .9); }
.atelier-hero .hero-pause {
  display: inline-grid; place-items: center; width: 54px; height: 54px; min-height: 0; padding: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer; transition: background-color .3s ease;
}
.atelier-hero .hero-pause:hover { background: rgba(255, 255, 255, .86); }
.atelier-hero .hero-pause svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.atelier-hero .hero-pause .i-play { display: none; fill: currentColor; stroke: none; }
.atelier-hero .hero-pause[aria-pressed="true"] .i-pause { display: none; }
.atelier-hero .hero-pause[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 700px) {
  .atelier-hero .hero-bottom { gap: 8px; }
  .atelier-hero .hero-tabs { padding: 3px; }
  .atelier-hero .hero-tabs button { padding: 0 15px 2px; font-size: 18px; }
  .atelier-hero .hero-tabs i { left: 14px; right: 14px; bottom: 7px; }
  .atelier-hero .hero-pause { width: 50px; height: 50px; }
}
@media (max-width: 360px) { .atelier-hero .hero-tabs button { padding: 0 11px 2px; font-size: 17px; } }

/* --- Scene copy, 25.09 evening (Alexander: «сделай более эстетичной и органично вписывающейся в эту секцию»). The opaque
   paper sheet becomes the same paper glass as the scene tabs: the photo shows through blurred, the glass is lighter where
   the text starts, soft round corners, a quiet shadow. The size and padding stay exactly as before (Alexander: «я тебя не
   просил менять сам ее размер»), the edge is an inset shadow, not a border, so nothing inside moves. Computers and
   tablets only: on a phone the copy sits on paper above the photo. --- */
@media (min-width: 701px) {
  body.is-hybrid .atelier-hero .hero-copy {
    border-radius: 26px;
    background: linear-gradient(140deg, rgba(248, 244, 236, .88) 0%, rgba(248, 244, 236, .78) 55%, rgba(246, 241, 231, .7) 100%);
    box-shadow: 0 24px 60px rgba(33, 28, 18, .14), inset 0 0 0 1px rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  }
}
@media (max-width: 1000px) and (min-width: 701px) { body.is-hybrid .atelier-hero .hero-copy { border-radius: 22px; } }