/* =========================================================
   RiNG STUDiO — cinema kit (business.html + wedding.html)
   Classes keep the b- prefix from where they were first built.
   Accent comes from --cine/--cine-2/--cine-deep: gold by default,
   rosé on the wedding theme.
   ========================================================= */

:root{ --cine:#d3b06a; --cine-2:#e8cf98; --cine-deep:#a8843f; --cine-hi:#f7e6bb; --cine-rgb:211,176,106; --ink:#060606; }
html[data-theme="wedding"]{ --cine:#c9505c; --cine-2:#e8a0a8; --cine-deep:#9c2130; --cine-hi:#f6c9ce; --cine-rgb:201,80,92; }

.b-gold{
  background:linear-gradient(100deg, var(--cine-deep) 15%, var(--cine-hi) 38%, var(--cine) 52%, var(--cine-deep) 75%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion: no-preference){
  .b-gold{ animation:bShine 6s linear infinite; }
}
@keyframes bShine{ from{ background-position:120% 0; } to{ background-position:-100% 0; } }

.b-h2{ font-size:clamp(32px,4.8vw,62px); line-height:1.03; }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:2px solid var(--cine-2); outline-offset:3px; }

/* =========================================================
   REVEAL VARIANTS (the base fade-up stays in style.css)
   ========================================================= */
/* A soft top-to-bottom wipe. Uses mask-position, not clip-path: Chrome's
   IntersectionObserver treats a fully clipped target as never visible. */
[data-reveal="mask"]{
  opacity:0; transform:translateY(22px);
  -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent 60%);
          mask-image:linear-gradient(180deg, #000 40%, transparent 60%);
  -webkit-mask-size:100% 250%; mask-size:100% 250%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 100%; mask-position:0 100%;
  transition:-webkit-mask-position 1.4s var(--ease), mask-position 1.4s var(--ease), transform 1.2s var(--ease), opacity .5s ease;
}
[data-reveal="mask"].is-visible{
  opacity:1; transform:none;
  -webkit-mask-position:0 0; mask-position:0 0;
}

[data-reveal="image"]{
  opacity:1; transform:none;
  clip-path:inset(9% 7% 9% 7% round var(--r, 4px));
  transition:clip-path 1.5s var(--ease);
}
[data-reveal="image"].is-visible{ clip-path:inset(0 0 0 0 round var(--r, 4px)); }
[data-reveal="image"] img{ transform:scale(1.16); transition:transform 1.9s var(--ease); }
[data-reveal="image"].is-visible img{ transform:scale(1); }

[data-reveal="row"]{ opacity:1; transform:none; transition:none; }
[data-reveal="row"] > *{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform 1s var(--ease); }
[data-reveal="row"].is-visible > *{ opacity:1; transform:none; }
[data-reveal="row"].is-visible > :nth-child(2){ transition-delay:.08s; }
[data-reveal="row"].is-visible > :nth-child(3){ transition-delay:.16s; }
[data-reveal="row"].is-visible > :nth-child(4){ transition-delay:.24s; }

/* =========================================================
   FAQ refinements
   ========================================================= */
.faq-a{ opacity:0; transition:max-height .6s var(--ease), opacity .45s ease; }
.faq-item.open .faq-a{ opacity:1; }
.faq-q > span:first-child{ transition:color .35s ease, transform .5s var(--ease); }
.faq-q:hover > span:first-child{ color:var(--accent-2); transform:translateX(4px); }
.faq-q:focus-visible{ outline-offset:6px; border-radius:4px; }
.faq-item.open .faq-q .plus{ background:var(--accent); }
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{ background:#fff; }

/* =========================================================
   HERO
   ========================================================= */
.b-hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding:130px 0 96px; overflow:hidden; isolation:isolate; background:var(--ink);
}
.b-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(var(--cine-rgb),.10), transparent 60%),
    linear-gradient(180deg, rgba(6,6,6,0) 70%, var(--bg) 100%);
}
.b-beams{ position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.b-beams::before, .b-beams::after{
  content:''; position:absolute; top:-30%; width:55%; height:160%;
  background:linear-gradient(180deg, rgba(var(--cine-rgb),.20), rgba(var(--cine-rgb),0) 72%);
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter:blur(14px);
  transform-origin:50% 0; mix-blend-mode:screen;
}
.b-beams::before{ left:-8%; transform:rotate(-18deg); }
.b-beams::after{ right:-6%; transform:rotate(16deg); }

.b-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; position:relative; z-index:2; }
.b-hero .kicker{ color:var(--cine-2); }
.b-hero .kicker::before{ background:var(--cine-2); }
.b-hero h1{ font-size:clamp(44px,5.8vw,86px); line-height:1.02; }
.b-hero h1 em{ font-style:italic; }
.b-hero .lede{ max-width:520px; color:var(--text-muted); font-size:18px; margin-top:24px; }
.b-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
.b-play-ic{ width:22px; height:22px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center; flex-shrink:0; }
.b-play-ic::before{ content:''; border-left:7px solid currentColor; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; margin-left:2px; }

/* viewfinder + HUD */
.b-viewfinder{ position:absolute; inset:96px 28px 36px; z-index:3; pointer-events:none; }
.b-viewfinder i{ position:absolute; width:26px; height:26px; border:0 solid rgba(245,241,236,.45); }
.b-viewfinder i:nth-child(1){ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.b-viewfinder i:nth-child(2){ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.b-viewfinder i:nth-child(3){ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.b-viewfinder i:nth-child(4){ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.b-hud{
  position:absolute; top:14px; left:18px; right:18px; display:flex; justify-content:space-between;
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; letter-spacing:.16em; color:rgba(245,241,236,.72);
}
.b-rec{ display:flex; align-items:center; gap:8px; }
.b-rec::before{ content:''; width:8px; height:8px; border-radius:50%; background:#e5383b; box-shadow:0 0 10px #e5383b; animation:bBlink 1.2s steps(2,start) infinite; }
@keyframes bBlink{ to{ visibility:hidden; } }

/* letterbox */
.b-letterbox{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.b-letterbox::before, .b-letterbox::after{ content:''; position:absolute; left:0; right:0; height:13vh; background:#000; transform:scaleY(0); }
.b-letterbox::before{ top:0; transform-origin:top; }
.b-letterbox::after{ bottom:0; transform-origin:bottom; }

/* 3D reel wall */
.b-wall{ position:relative; height:min(76vh, 720px); perspective:1500px; }
.b-wall-inner{
  height:100%; display:flex; align-items:center; justify-content:center; gap:20px;
  transform:rotateY(-17deg) rotateX(5deg) translate3d(0,var(--wall-y,0px),0); transform-style:preserve-3d;
}
.b-float{ animation:bBob 7s ease-in-out infinite alternate; }
.b-float:nth-child(2){ animation-delay:-2.5s; }
.b-float:nth-child(3){ animation-delay:-5s; }
@keyframes bBob{ from{ transform:translateY(-10px); } to{ transform:translateY(10px); } }
.b-phone{
  position:relative; width:clamp(150px,13vw,214px); aspect-ratio:9/16; border-radius:22px; overflow:hidden; background:#111;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--cine-rgb),.28);
}
.b-float:nth-child(1) .b-phone{ transform:translateY(9%) translateZ(-60px); }
.b-float:nth-child(2) .b-phone{ transform:translateZ(60px) scale(1.1); box-shadow:0 60px 110px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--cine-rgb),.5), 0 0 80px -20px rgba(var(--cine-rgb),.45); }
.b-float:nth-child(3) .b-phone{ transform:translateY(-9%) translateZ(-60px); }
.b-phone video, [data-playlist] > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .9s ease; }
[data-playlist] > video:not(.is-front){ opacity:0; }
.b-phone::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 35%), linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.45));
}

/* entrance */
@media (prefers-reduced-motion: no-preference){
  .b-beams::before{ animation:bBeamL 10s ease-in-out infinite alternate; }
  .b-beams::after{ animation:bBeamR 12s ease-in-out infinite alternate; }
  .b-js .b-letterbox::before, .b-js .b-letterbox::after{ transform:scaleY(1); animation:bBars 1.3s var(--ease) .35s both; }
  .b-js .b-hero .kicker{ animation:bFadeUp .9s var(--ease) .7s both; }
  .b-js .b-hero h1 .b-line > span{ animation:bLineUp 1.1s var(--ease) both; }
  .b-js .b-hero h1 .b-line:nth-child(1) > span{ animation-delay:.85s; }
  .b-js .b-hero h1 .b-line:nth-child(2) > span{ animation-delay:1s; }
  .b-js .b-hero h1 .b-line:nth-child(3) > span{ animation-delay:1.15s; }
  .b-js .b-hero .lede{ animation:bFadeUp 1s var(--ease) 1.25s both; }
  .b-js .b-hero-actions{ animation:bFadeUp 1s var(--ease) 1.4s both; }
  .b-js .b-wall{ animation:bWallIn 1.8s var(--ease) .5s both; }
  .b-js .b-viewfinder{ animation:bFade 1s ease 1.6s both; }
}
@keyframes bBeamL{ from{ transform:rotate(-24deg); opacity:.6; } to{ transform:rotate(-8deg); opacity:1; } }
@keyframes bBeamR{ from{ transform:rotate(22deg); opacity:1; } to{ transform:rotate(8deg); opacity:.55; } }
@keyframes bBars{ to{ transform:scaleY(0); } }
@keyframes bFadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes bFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes bLineUp{ from{ transform:translateY(112%); } to{ transform:none; } }
@keyframes bWallIn{ from{ opacity:0; transform:translateX(60px) scale(.94); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
.b-line{ display:block; overflow:hidden; padding:0 .12em .1em 0; margin-bottom:-.1em; }
.b-line > span{ display:inline-block; }

@media (max-width:900px){
  .b-hero{ align-items:flex-end; padding-bottom:72px; }
  .b-hero-grid{ grid-template-columns:1fr; position:static; }
  .b-wall{ position:absolute; inset:0; height:auto; z-index:-1; perspective:none; animation:none !important; }
  .b-wall-inner{ transform:none; gap:0; }
  .b-float{ animation:none; }
  .b-float:nth-child(1), .b-float:nth-child(3){ display:none; }
  .b-float:nth-child(2){ position:absolute; inset:0; }
  .b-float:nth-child(2) .b-phone{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; transform:none; box-shadow:none; }
  .b-phone::after{ background:linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,.25) 25%, rgba(6,6,6,.82) 58%, var(--bg) 100%); }
  .b-viewfinder{ inset:84px 14px 22px; }
  .b-hud{ font-size:10px; letter-spacing:.12em; }
  .b-letterbox::before, .b-letterbox::after{ height:9vh; }
}
@media (max-width:640px){
  .b-hero h1{ font-size:clamp(38px,10vw,60px); }
  .b-hero .lede{ font-size:16px; }
  .b-hero-actions .btn{ flex:1 1 auto; }
}

/* =========================================================
   TRAILER — kinetic title cards
   ========================================================= */
.b-trailer{ position:relative; height:270vh; background:#040404; }
.b-trailer-stage{ position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.b-trailer-bg{ position:absolute; inset:0; z-index:-1; }
.b-trailer-bg video{ width:100%; height:100%; object-fit:cover; opacity:.2; filter:saturate(.6) contrast(1.1); }
.b-trailer-bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(4,4,4,.2), #040404 75%); }
.b-tcard{
  grid-area:1 / 1; text-align:center; padding:0 24px; max-width:1050px;
  font-family:var(--font-display); font-size:clamp(34px,6.2vw,92px); line-height:1.06;
  opacity:0; transform:scale(1.06); filter:blur(12px);
  transition:opacity .8s ease, transform 1.4s var(--ease), filter 1s ease;
}
.b-tcard.is-active{ opacity:1; transform:none; filter:none; }
.b-tcard em{ font-style:italic; }
.b-trailer-meta{
  position:absolute; left:0; right:0; bottom:40px; display:flex; justify-content:center; align-items:center; gap:18px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; letter-spacing:.2em; color:var(--text-faint);
}
.b-trailer-bar{ width:160px; height:1px; background:var(--line-strong); position:relative; overflow:hidden; }
.b-trailer-bar i{ position:absolute; inset:0; background:var(--cine); transform:scaleX(var(--tp,0)); transform-origin:left; }

/* =========================================================
   SHOWREEL — horizontal film strip
   ========================================================= */
.b-reel{ position:relative; background:var(--bg); }
.b-reel-sticky{ position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:90px 0 40px; }
.b-reel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:38px; }
.b-reel-head .kicker{ color:var(--cine-2); }
.b-reel-head .kicker::before{ background:var(--cine-2); }
.b-reel-head p{ color:var(--text-muted); max-width:380px; font-size:15px; }
.b-reel-track{
  display:flex; gap:26px; align-items:flex-start; width:max-content;
  padding:0 max(32px, calc((100vw - 1240px) / 2 + 32px));
  transform:translate3d(var(--rx,0px),0,0); will-change:transform;
}
.b-card{
  --cw:min(21vw, calc((100vh - 330px) * 9 / 16));
  position:relative; flex:0 0 auto; width:var(--cw); min-width:220px; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  background:#111; box-shadow:0 0 0 1px var(--line-strong); cursor:pointer;
  transition:transform .6s var(--ease), box-shadow .5s ease;
}
.b-card:nth-child(even){ margin-top:54px; }
.b-card.is-wide{ width:calc(var(--cw) * 16 / 9 * 2.39); min-width:0; aspect-ratio:2.39/1; }
.b-card video, .b-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.b-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%); pointer-events:none; }
.b-card-btn{ position:absolute; inset:0; z-index:3; width:100%; height:100%; background:none; border:0; padding:0; cursor:pointer; border-radius:inherit; }
.b-card-btn:focus-visible{ outline-offset:-4px; }
.b-card-num{ position:absolute; z-index:2; top:16px; left:18px; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.75); }
.b-card-meta{ position:absolute; z-index:2; left:18px; right:18px; bottom:18px; pointer-events:none; }
.b-card-meta b{ display:block; font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.1; color:#fff; }
.b-card-meta span{ display:block; margin-top:6px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cine-2); }
.b-card-play{
  position:absolute; z-index:2; top:50%; left:50%; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%;
  display:grid; place-items:center; background:rgba(6,6,6,.45); border:1px solid rgba(var(--cine-rgb),.7); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:scale(.8); transition:opacity .4s ease, transform .5s var(--ease); pointer-events:none;
}
.b-card-play::before{ content:''; border-left:14px solid currentColor; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; }
@media (hover:hover){
  .b-card:hover{ transform:translateY(-8px); box-shadow:0 0 0 1px var(--cine), 0 30px 70px -25px rgba(var(--cine-rgb),.45); }
  .b-card:hover .b-card-play{ opacity:1; transform:none; }
}
@media (hover:none){ .b-card-play{ opacity:.9; transform:scale(.85); } }
.b-card-btn:focus-visible ~ .b-card-play{ opacity:1; transform:none; }
.b-card-cta{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:18px; padding:28px;
  background:radial-gradient(ellipse at 30% 20%, rgba(var(--cine-rgb),.18), transparent 60%), #0d0d0e;
  box-shadow:0 0 0 1px rgba(var(--cine-rgb),.45); cursor:default;
}
.b-card-cta::after{ display:none; }
.b-card-cta h3{ font-size:clamp(26px,2.4vw,34px); line-height:1.08; }
.b-card-cta p{ color:var(--text-muted); font-size:14px; }

.b-reel-progress{ margin-top:34px; height:1px; background:var(--line); position:relative; }
.b-reel-progress i{ position:absolute; inset:0; background:var(--cine); transform:scaleX(var(--rp,0)); transform-origin:left; }

/* Without the pinned scroll (mobile, tablet, reduced motion): native swipe row. */
.b-reel.is-static .b-reel-sticky{ position:relative; height:auto; padding:96px 0 72px; }
.b-reel.is-static .b-reel-scroller{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px; }
.b-reel.is-static .b-reel-scroller::-webkit-scrollbar{ display:none; }
.b-reel.is-static .b-reel-track{ transform:none; }
.b-reel.is-static .b-card{ scroll-snap-align:center; }
.b-reel.is-static .b-reel-progress{ display:none; }
@media (max-width:900px){
  .b-reel-head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:28px; }
  .b-reel-track{ gap:14px; padding:0 20px; }
  .b-card{ --cw:66vw; min-width:0; max-width:300px; }
  .b-card:nth-child(even){ margin-top:0; }
  .b-card.is-wide{ width:86vw; max-width:none; }
  .b-card.is-wide .b-card-meta{ left:14px; bottom:12px; }
  .b-card.is-wide .b-card-meta b{ font-size:17px; }
  .b-card.is-wide .b-card-num{ top:10px; left:14px; }
  .b-card.is-wide .b-card-play{ width:44px; height:44px; left:auto; right:14px; margin:-22px 0 0 0; }
}

/* =========================================================
   WHY — value cards with cursor spotlight
   ========================================================= */
.b-why-head{ max-width:760px; margin-bottom:56px; }
.b-why-head .kicker{ color:var(--cine-2); }
.b-why-head .kicker::before{ background:var(--cine-2); }
.b-why-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.b-spot{ position:relative; isolation:isolate; overflow:hidden; }
.b-spot::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(var(--cine-rgb),.16), transparent 60%);
}
.b-spot:hover::before{ opacity:1; }
.b-why-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px 30px; transition:border-color .4s ease, transform .6s var(--ease); }
.b-why-card:hover{ border-color:rgba(var(--cine-rgb),.45); transform:translateY(-6px); }
.b-why-num{ display:block; font-family:var(--font-display); font-size:46px; line-height:1; margin-bottom:26px; }
.b-why-card h3{ font-size:22px; margin-bottom:12px; }
.b-why-card p{ color:var(--text-muted); font-size:14.5px; }
@media (max-width:1000px){ .b-why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .b-why-grid{ grid-template-columns:1fr; } }

.svc-card.b-spot:hover{ border-color:rgba(var(--cine-rgb),.45); }

/* =========================================================
   ABLAUF — gold journey line (same mechanics as the wedding page)
   ========================================================= */
.b-process::before{ display:none; }
.b-process-track{ position:absolute; top:26px; left:50px; right:calc(25% - 50px); height:1px; background:var(--line); z-index:0; }
.b-process-track i{ display:block; width:100%; height:100%; background:linear-gradient(90deg, var(--cine-deep), var(--cine-2)); transform:scaleX(var(--progress,0)); transform-origin:left; }
.b-process .p-step{ z-index:1; }
.b-process .p-num{ transition:border-color .5s ease, color .5s ease, background .5s ease, box-shadow .6s ease; }
.b-process .p-step.is-active .p-num{ border-color:var(--cine); background:var(--cine); color:#141414; box-shadow:0 0 0 6px rgba(var(--cine-rgb),.14); }
.b-process .p-step h3{ font-size:20px; margin-bottom:10px; transition:color .5s ease; }
.b-process .p-step:not(.is-active) h3{ color:var(--text-muted); }
@media (max-width:900px){
  .b-process{ gap:40px; }
  .b-process-track{ top:26px; bottom:var(--track-end,26px); left:26px; right:auto; width:1px; height:auto; }
  .b-process-track i{ transform:scaleY(var(--progress,0)); transform-origin:top; background:linear-gradient(180deg, var(--cine-deep), var(--cine-2)); }
  .b-process .p-step{ display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:22px; padding:0; }
  .b-process .p-step .p-num{ margin-bottom:0; grid-row:span 2; }
  .b-process .p-step h3{ margin:12px 0 6px; }
}

/* =========================================================
   FINAL — film-leader countdown, then the title card
   ========================================================= */
.b-final-card{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--radius-lg);
  min-height:460px; display:grid; place-items:center; text-align:center; padding:70px 32px;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--cine-rgb),.18), transparent 60%), #070707;
  border:1px solid rgba(var(--cine-rgb),.35);
}
.b-final-card .b-beams{ z-index:-1; opacity:.7; }
.b-final-copy, .b-leader{ grid-area:1 / 1; }
.b-final-copy .kicker{ color:var(--cine-2); justify-content:center; }
.b-final-copy .kicker::before{ background:var(--cine-2); }
.b-final-copy h2{ font-size:clamp(38px,6vw,84px); line-height:1.02; }
.b-final-copy h2 em{ font-style:italic; }
.b-final-copy p{ color:var(--text-muted); max-width:520px; margin:20px auto 0; }
.b-final-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

.b-leader{ width:min(300px,64vw); aspect-ratio:1; position:relative; display:grid; place-items:center; opacity:0; pointer-events:none; }
.b-leader::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(245,241,236,.35); box-shadow:inset 0 0 0 14px rgba(245,241,236,.04); }
.b-leader::after{
  content:''; position:absolute; inset:8%; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(var(--cine-rgb),.42) 0deg, rgba(var(--cine-rgb),.42) var(--sweep,0deg), transparent var(--sweep,0deg));
}
.b-leader-cross{ position:absolute; inset:0; }
.b-leader-cross::before, .b-leader-cross::after{ content:''; position:absolute; background:rgba(245,241,236,.22); }
.b-leader-cross::before{ left:50%; top:-12%; bottom:-12%; width:1px; }
.b-leader-cross::after{ top:50%; left:-12%; right:-12%; height:1px; }
.b-leader-num{ position:relative; z-index:1; font-family:var(--font-display); font-size:clamp(90px,14vw,150px); line-height:1; color:#fff; }

.b-js .b-final-card[data-countdown] .b-final-copy{ opacity:0; transform:scale(1.04); filter:blur(8px); }
.b-final-card.is-counting .b-leader{ opacity:1; }
.b-final-card.is-done .b-leader{ opacity:0; transform:scale(1.4); transition:opacity .5s ease, transform .7s var(--ease); }
.b-final-card.is-done .b-final-copy{ opacity:1 !important; transform:none !important; filter:none !important; transition:opacity .9s ease .15s, transform 1.2s var(--ease) .15s, filter .9s ease .15s; }

/* =========================================================
   VIDEO MODAL
   ========================================================= */
.b-modal{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:60px 90px;
  background:rgba(4,4,4,.94); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.b-modal.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.b-modal-fig{ margin:0; display:flex; flex-direction:column; align-items:center; transform:scale(.95); transition:transform .55s var(--ease); max-height:100%; }
.b-modal.is-open .b-modal-fig{ transform:none; }
.b-modal video{ display:block; height:min(80vh, 820px); max-width:100%; aspect-ratio:9/16; background:#000; border-radius:14px; box-shadow:0 0 0 1px rgba(var(--cine-rgb),.35); }
.b-modal.is-landscape video{ height:auto; width:min(calc(100vw - 200px), 1400px, calc(80vh * 16 / 9)); max-width:none; aspect-ratio:16/9; }
@media (max-width:760px){ .b-modal.is-landscape video{ width:calc(100vw - 24px); } }
.b-modal-cap{ margin-top:14px; text-align:center; color:var(--text-muted); font-size:13.5px; }
.b-modal-cap b{ color:var(--text); font-weight:500; font-family:var(--font-display); font-size:19px; display:block; }
.b-modal-btn{
  position:absolute; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:rgba(11,11,12,.6); color:var(--text); transition:border-color .3s ease;
}
.b-modal-btn:hover{ border-color:var(--cine); }
.b-modal-close{ top:20px; right:22px; }
.b-modal-prev{ left:22px; top:50%; margin-top:-26px; }
.b-modal-next{ right:22px; top:50%; margin-top:-26px; }
body.b-modal-lock{ overflow:hidden; }
@media (max-width:760px){
  .b-modal{ padding:60px 12px 96px; }
  .b-modal video{ height:auto; width:100%; max-height:calc(100svh - 210px); }
  .b-modal-prev, .b-modal-next{ top:auto; bottom:22px; margin-top:0; }
  .b-modal-prev{ left:calc(50% - 64px); }
  .b-modal-next{ right:calc(50% - 64px); }
}

/* =========================================================
   PAGE HERO — dimmed film behind the page title (about, faq)
   ========================================================= */
.b-pagehero{
  position:relative; min-height:76vh; min-height:76svh; display:flex; align-items:flex-end;
  padding:150px 0 84px; overflow:hidden; isolation:isolate; background:var(--ink);
}
.b-pagehero-media{ position:absolute; inset:0; z-index:-2; }
.b-pagehero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,6,6,.82) 0%, rgba(6,6,6,.45) 50%, rgba(6,6,6,.2) 100%),
    linear-gradient(180deg, rgba(6,6,6,.5) 0%, rgba(6,6,6,0) 35%, rgba(6,6,6,.4) 70%, var(--bg) 100%);
}
.b-pagehero .kicker{ color:var(--cine-2); }
.b-pagehero .kicker::before{ background:var(--cine-2); }
.b-pagehero h1{ font-size:clamp(40px,6vw,88px); line-height:1.02; max-width:920px; }
.b-pagehero h1 em{ font-style:italic; }
.b-pagehero .lede{ max-width:560px; color:var(--text-muted); font-size:18px; margin-top:22px; }
@media (prefers-reduced-motion: no-preference){
  .b-js .b-pagehero .b-letterbox::before, .b-js .b-pagehero .b-letterbox::after{ transform:scaleY(1); animation:bBars 1.3s var(--ease) .3s both; }
  .b-js .b-pagehero .kicker{ animation:bFadeUp .9s var(--ease) .6s both; }
  .b-js .b-pagehero h1 .b-line > span{ animation:bLineUp 1.1s var(--ease) both; }
  .b-js .b-pagehero h1 .b-line:nth-child(1) > span{ animation-delay:.75s; }
  .b-js .b-pagehero h1 .b-line:nth-child(2) > span{ animation-delay:.9s; }
  .b-js .b-pagehero .lede{ animation:bFadeUp 1s var(--ease) 1.1s both; }
  .b-js .b-pagehero-media{ animation:bFade 1.6s ease .2s both; }
}
@media (max-width:640px){
  .b-pagehero{ min-height:70svh; padding-bottom:56px; }
  .b-pagehero .lede{ font-size:16px; }
}

/* Any box can carry a looping film behind its content. */
.b-bgfill{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.b-bgfill > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split-panel .sp-bg > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-media .b-bgfill{ z-index:0; }
.path-card .b-bgfill + *{ position:relative; }
.path-grid .path-card::before{ background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.93) 100%); }
.about-media .am-tag{ z-index:2; }

/* Mixed film strip: 2.39:1 films and 9:16 reels share one row height. */
.b-reel.is-mixed .b-card{ --cw:min(13vw, calc((100vh - 330px) * 9 / 16)); min-width:150px; }
@media (max-width:900px){
  .b-reel.is-mixed .b-card{ --cw:58vw; }
  .b-reel.is-mixed .b-reel-track{ align-items:center; }
}
.b-card-meta span.is-wedding{ color:#e8a0a8; }
.b-card-meta span.is-business{ color:#e8cf98; }

/* FAQ groups: a reel rides along next to the questions. */
.b-faq-side{ position:sticky; top:110px; align-self:start; }
.b-faq-phone{
  position:relative; width:min(240px, 60%); aspect-ratio:9/16; border-radius:20px; overflow:hidden; margin-top:40px;
  background:#111; box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--cine-rgb),.35);
}
.b-faq-phone.is-wedding{ box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(201,80,92,.45); }
.b-faq-phone video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .b-faq-side{ position:static; } .b-faq-phone{ display:none; } }

/* Featured film ("Im Fokus"): one big widescreen card that opens the modal. */
.b-feature-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:34px; }
.b-feature-head .kicker{ color:var(--cine-2); }
.b-feature-head .kicker::before{ background:var(--cine-2); }
.b-feature-head p{ color:var(--text-muted); max-width:420px; font-size:15px; }
.b-card.b-feature{ width:100%; min-width:0; max-width:none; margin-top:0; aspect-ratio:2.39/1; border-radius:var(--radius-lg); --r:var(--radius-lg); }
.b-card.b-feature.is-169{ aspect-ratio:16/9; }
.b-feature .b-card-meta{ left:clamp(18px,3vw,40px); bottom:clamp(16px,3vw,38px); }
.b-feature .b-card-meta b{ font-size:clamp(26px,3.4vw,48px); }
.b-feature .b-card-meta span{ font-size:11.5px; margin-top:10px; }
.b-feature .b-card-num{ top:clamp(14px,2.4vw,28px); left:clamp(18px,3vw,40px); }
.b-feature .b-card-play{ width:84px; height:84px; margin:-42px 0 0 -42px; opacity:1; transform:none; }
.b-feature .b-card-play::before{ border-left-width:18px; border-top-width:11px; border-bottom-width:11px; }
.b-feature::after{ background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.8) 100%); }
@media (hover:hover){ .b-card.b-feature:hover{ transform:translateY(-4px); } }
@media (max-width:900px){
  .b-feature-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .b-card.b-feature{ width:100%; aspect-ratio:16/10; }
  .b-card.b-feature .b-card-play{ width:62px; height:62px; left:50%; right:auto; margin:-31px 0 0 -31px; }
  .b-card.b-feature .b-card-meta{ left:18px; bottom:16px; }
  .b-card.b-feature .b-card-meta b{ font-size:24px; }
  .b-card.b-feature .b-card-num{ top:14px; left:18px; }
}
.b-pagehero-media > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Three-column value line (about). */
.b-process.process-3col .b-process-track{ right:calc(33.333% - 50px); }

.b-final-copy h2 em{ display:block; }

/* =========================================================
   REDUCED MOTION — calm fades only
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal="mask"], [data-reveal="image"], [data-reveal="row"] > *{
    transform:none !important; clip-path:none !important;
    -webkit-mask-image:none !important; mask-image:none !important;
    transition-property:opacity !important; transition-duration:1s !important; transition-timing-function:ease !important;
  }
  [data-reveal="image"]{ opacity:0; }
  [data-reveal="image"].is-visible{ opacity:1; }
  [data-reveal="row"]{ opacity:1 !important; }
  [data-reveal="image"] img{ transform:none !important; transition:none !important; }
  .faq-q > span:first-child{ transition:color .35s ease !important; transform:none !important; }
  .b-float, .b-rec::before, .b-gold, .marquee-track{ animation:none !important; }
  .b-trailer{ height:auto; }
  .b-trailer-stage{ position:relative; height:auto; padding:120px 0; gap:40px; grid-auto-flow:row; }
  .b-tcard{ grid-area:auto; opacity:1; transform:none; filter:none; }
  .b-trailer-meta{ display:none; }
  .b-card, .b-why-card{ transition:box-shadow .3s ease, border-color .3s ease !important; }
  .b-card:hover, .b-why-card:hover{ transform:none !important; }
  .b-js .b-final-card[data-countdown] .b-final-copy{ opacity:1; transform:none; filter:none; }
  .b-leader{ display:none; }
  .b-modal, .b-modal-fig{ transition:opacity .2s ease !important; transform:none !important; }
  .b-js .b-hero .kicker, .b-js .b-hero .lede, .b-js .b-hero-actions, .b-js .b-wall, .b-js .b-viewfinder{ animation:bFade 1s ease .2s both; }
  .b-js .b-hero h1 .b-line > span{ animation:bFade 1s ease .4s both; }
}