/* =====================================================================
   LaBellaCasting — editorial media layer (mobile-first)

   Written phone-up, not desktop-down. ~90% of traffic arrives on a
   handset, so the portrait case is the design and the desktop case is
   the adaptation — every base rule here targets a narrow viewport and
   the media queries add width, never take it away.

   This turns out to suit the media package exactly: every supplied clip
   is 720x1280 and every photograph is ~736px portrait, which is the
   native shape of a phone screen. Full-bleed 9:16 video on mobile shows
   those files at true resolution rather than stretching them.

   Depends on site.css for tokens (--gold, --ink, --pearl, --line).
   Owns .lbc-* only; site.js keeps .rv and the counters.
   ===================================================================== */

:root{
  --lbc-veil: linear-gradient(180deg,
      rgba(10,10,11,.30) 0%, rgba(10,10,11,.20) 38%,
      rgba(10,10,11,.72) 76%, var(--ink) 100%);
  --lbc-rule: linear-gradient(90deg,
      transparent, rgba(200,169,81,.55) 50%, transparent);
  --lbc-r: 2px;
  --lbc-tap: 44px;               /* minimum comfortable touch target */
}

/* ===================================================== cinematic hero */
/* svh, not vh: on iOS Safari the collapsing address bar makes 100vh
   taller than the visible viewport, which pushes the CTA under the
   chrome on first paint. svh measures the small (toolbars-visible)
   viewport, so the button is reachable the moment the page lands. */
.lbc-hero{
  position:relative; overflow:hidden;
  min-height:100svh; display:grid; align-items:end;
  border-bottom:1px solid var(--line-soft);
}
.lbc-hero__media{position:absolute; inset:0; z-index:0; background:var(--plate)}
/* Both children must be absolutely positioned so they occupy the same
   box. Left in normal flow they stack vertically, and because the
   <video> carries a poster attribute the same frame paints twice — once
   as the <img> and again below it as the video's own poster. */
.lbc-hero__media img,
.lbc-hero__media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.lbc-hero__media video{z-index:1}
/* Portrait video fills a phone screen edge to edge with no crop at all.
   Focal point sits high so faces survive the bottom text gradient. */
.lbc-hero__media video{object-position:50% 32%}
.lbc-hero__media img{
  object-position:50% 34%;
  transform:scale(1.05); transform-origin:50% 35%;
  animation:lbc-burns 30s var(--ease) infinite alternate;
}
@keyframes lbc-burns{ to{ transform:scale(1.13) translate3d(-1%,-1.6%,0) } }

.lbc-hero__veil{position:absolute; inset:0; z-index:1; background:var(--lbc-veil)}
.lbc-hero__grain{
  position:absolute; inset:0; z-index:2; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lbc-hero__in{
  position:relative; z-index:3;
  padding-block:clamp(40px,11vw,84px);
  padding-bottom:max(clamp(40px,11vw,84px), env(safe-area-inset-bottom));
}
.lbc-hero h1{
  margin:.16em 0 .3em; max-width:14ch;
  font-size:clamp(2.1rem,10.5vw,4.4rem); line-height:1.04;
}
.lbc-hero .lede{max-width:40ch; font-size:clamp(.96rem,4vw,1.12rem)}

/* Stacked full-width buttons on a phone; inline once there's room. */
.lbc-cta{display:grid; gap:10px; margin-top:24px}
.lbc-cta .btn{width:100%; min-height:var(--lbc-tap); display:grid; place-items:center}
@media(min-width:600px){
  .lbc-cta{display:flex; flex-wrap:wrap}
  .lbc-cta .btn{width:auto; padding-inline:28px}
}

.lbc-rule{height:1px; background:var(--lbc-rule); border:0; margin:0}

/* ============================================ portrait media primitives */
.lbc-frame{
  position:relative; overflow:hidden; display:block;
  background:var(--plate); border:1px solid var(--line);
  border-radius:var(--lbc-r); aspect-ratio:4/5;
}
.lbc-frame img{width:100%; height:100%; object-fit:cover; display:block}
.lbc-frame--tall{aspect-ratio:9/16}
.lbc-frame--sq{aspect-ratio:1/1}

/* --------------------------------------------------------- video tiles */
.lbc-vtile{
  position:relative; overflow:hidden; background:var(--plate);
  border:1px solid var(--line); border-radius:var(--lbc-r);
  aspect-ratio:9/16; isolation:isolate; cursor:pointer;
  min-height:var(--lbc-tap);
}
.lbc-vtile__poster,
.lbc-vtile__v{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
.lbc-vtile__v{opacity:0; transition:opacity .5s var(--ease); z-index:1}
.lbc-vtile.is-playing .lbc-vtile__v{opacity:1}
.lbc-vtile::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(10,10,11,.84));
}
.lbc-vtile__label{
  position:absolute; left:12px; right:12px; bottom:11px; z-index:3;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pearl); line-height:1.3;
}
.lbc-vtile__cue{
  position:absolute; top:11px; right:11px; z-index:3;
  width:26px; height:26px; border:1px solid rgba(243,241,236,.5);
  border-radius:50%; transition:opacity .35s var(--ease);
  background:rgba(10,10,11,.3);
}
.lbc-vtile__cue::before{
  content:''; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:6px solid var(--pearl);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.lbc-vtile.is-playing .lbc-vtile__cue{opacity:0}
.lbc-vtile:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ================================================================ rails */
/* Edge-to-edge swipe rail. The negative margin lets tiles bleed to the
   screen edge while the padding keeps the first one aligned to the text
   column above it — the rail reads as continuous with the page rather
   than as a boxed-in widget. */
.lbc-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:64vw;
  gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut); padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lbc-rail::-webkit-scrollbar{display:none}
.lbc-rail > *{scroll-snap-align:start}
@media(min-width:560px){ .lbc-rail{grid-auto-columns:38vw} }
@media(min-width:900px){
  .lbc-rail{
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr);
    overflow:visible; margin-inline:0; padding-inline:0; gap:14px;
  }
}

/* swipe affordance under a rail — hidden where a real pointer exists */
.lbc-swipe{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
.lbc-swipe::after{content:''; flex:1; height:1px; background:var(--line)}
@media(hover:hover) and (pointer:fine){ .lbc-swipe{display:none} }

/* ====================================================== editorial rows */
.lbc-svc{display:grid; gap:clamp(52px,13vw,124px)}
.lbc-row{display:grid; gap:22px}
.lbc-row__body{max-width:46ch}
.lbc-row__idx{
  font-family:var(--display); font-size:.72rem; letter-spacing:.22em;
  color:var(--gold-deep); display:block; margin-bottom:11px;
}
.lbc-row h3{font-size:clamp(1.4rem,6vw,2.05rem); margin:0 0 .45em; line-height:1.16}
.lbc-row__meta{
  display:flex; flex-wrap:wrap; gap:7px 8px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.lbc-tag{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--silver); border:1px solid var(--line);
  padding:5px 10px; border-radius:var(--lbc-r);
}

/* On a phone the media is one clean portrait frame. The offset
   three-frame stack appears only where there's width to hold it without
   the supporting frames shrinking into thumbnails. */
.lbc-stack{position:relative}
/* Base (phone): the lead frame is the whole media column. */
.lbc-stack__lead{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line); border-radius:var(--lbc-r); background:var(--plate);
}
.lbc-stack__lead img{width:100%; height:100%; object-fit:cover; display:block}
.lbc-stack__sub{display:none}
@media(min-width:860px){
  .lbc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,4vw,56px); align-items:center}
  .lbc-row:nth-child(even) .lbc-row__media{order:2}
  .lbc-stack{aspect-ratio:4/5}
  .lbc-stack__lead{position:absolute; inset:0 22% 12% 0; z-index:2;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
  .lbc-stack__sub{display:block; position:absolute; overflow:hidden;
    border:1px solid var(--line); border-radius:var(--lbc-r); background:var(--plate)}
  .lbc-stack__sub img{width:100%; height:100%; object-fit:cover; display:block}
  .lbc-stack__sub--a{right:0; top:16%; width:38%; aspect-ratio:3/4; z-index:3}
  .lbc-stack__sub--b{left:14%; bottom:0; width:30%; aspect-ratio:1/1; z-index:1; opacity:.9}
}

/* ============================================================= mosaic */
/* Two columns on a phone is the right density for portrait crops — one
   column reads as a slideshow, three makes faces unreadable. */
.lbc-mosaic{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
@media(min-width:700px){ .lbc-mosaic{grid-template-columns:repeat(3,1fr); gap:12px} }
@media(min-width:1100px){ .lbc-mosaic{grid-template-columns:repeat(4,1fr)} }
.lbc-mosaic > *:nth-child(7n+1){grid-row:span 2}
.lbc-mosaic > *:nth-child(7n+1) .lbc-frame,
.lbc-mosaic > *:nth-child(7n+1) .lbc-vtile{aspect-ratio:9/16; height:100%}

/* ============================================================ reveals */
.lbc-rv{opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .75s var(--ease), transform .75s var(--ease)}
.lbc-rv.is-in{opacity:1; transform:none}
.lbc-rv[data-d="1"]{transition-delay:.07s}
.lbc-rv[data-d="2"]{transition-delay:.14s}
.lbc-rv[data-d="3"]{transition-delay:.21s}

.lbc-mask{display:block; overflow:hidden}
.lbc-mask > span{display:block; transform:translate3d(0,105%,0);
  transition:transform .9s var(--ease)}
.lbc-mask.is-in > span{transform:none}

/* ======================================================== sticky CTA */
/* Mobile only. The hero CTA scrolls away within one swipe on a phone and
   this is the page's commercial purpose, so it returns as a bar once the
   hero is gone. Sits above the safe-area inset to clear the iOS home
   indicator. */
.lbc-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:8px; padding:10px var(--gut);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translate3d(0,110%,0); transition:transform .4s var(--ease);
}
.lbc-sticky.is-on{transform:none}
.lbc-sticky .btn{flex:1; min-height:var(--lbc-tap); display:grid; place-items:center;
  font-size:.82rem; padding-inline:10px}
@media(min-width:900px){ .lbc-sticky{display:none} }

/* ============================================================== plans */
.lbc-plans{display:grid; gap:14px}
@media(min-width:760px){ .lbc-plans{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1120px){ .lbc-plans{grid-template-columns:repeat(4,1fr)} }
.lbc-plan{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--lbc-r); background:var(--plate);
}
.lbc-plan__media{position:relative; aspect-ratio:16/10; overflow:hidden}
@media(min-width:1120px){ .lbc-plan__media{aspect-ratio:4/3} }
.lbc-plan__media img{width:100%; height:100%; object-fit:cover; display:block;
  object-position:50% 38%}
.lbc-plan__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.15),rgba(18,18,20,.96));
}
.lbc-plan__name{
  position:absolute; left:16px; bottom:12px; z-index:2; margin:0;
  font-family:var(--display); font-size:1.32rem; letter-spacing:.05em;
}
.lbc-plan__body{padding:18px 16px 20px; display:flex; flex-direction:column; flex:1}
.lbc-plan__price{font-family:var(--display); font-size:1.9rem; color:var(--gold); line-height:1}
.lbc-plan__once{
  display:block; margin-top:7px; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.lbc-plan__list{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; flex:1}
.lbc-plan__list li{
  position:relative; padding-left:17px; font-size:.87rem; color:var(--silver);
}
.lbc-plan__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--gold-deep);
}
.lbc-plan .btn{margin-top:18px; min-height:var(--lbc-tap);
  display:grid; place-items:center}
.lbc-plan--current{border-color:var(--gold-deep)}
.lbc-plan__badge{
  position:absolute; top:10px; right:10px; z-index:3;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--gold); color:#151204; padding:4px 9px; border-radius:var(--lbc-r);
}

/* ==================================================== motion + budget */
@media(prefers-reduced-motion:reduce){
  .lbc-hero__media img{animation:none; transform:none}
  .lbc-rv{opacity:1; transform:none; transition:none}
  .lbc-mask > span{transform:none; transition:none}
  .lbc-vtile__v{display:none}
  .lbc-vtile__cue{opacity:0}
  .lbc-sticky{transition:none}
}

/* The hero sits under the fixed header, so the content plate needs to
   clear it on every breakpoint. */
.lbc-hero__in{padding-top:clamp(96px,22vw,150px)}

/* Trust row under the hero CTA — wraps rather than scrolling on narrow
   screens, since three short labels fit two-up on any phone. */
.lbc-hero .hero__trust{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--silver);
}

/* Sticky bar clearance: without this the final section's last line hides
   behind the bar on a phone. */
@media(max-width:899px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ================================================ membership artwork */
/* Layered onto membership.css rather than replacing it — the tier logic,
   region switch and upgrade states there are untouched. */
.mp-hero--media{position:relative; overflow:hidden}
/* membership.css positions a decorative glow partly outside the section;
   clipping here stops it creating a horizontal scrollbar on a phone. */
.mp-hero--media .mp-hero__glow{max-width:100%}
.mp-hero__bg{position:absolute; inset:0; z-index:0}
.mp-hero__bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:50% 28%; opacity:.45;
}
.mp-hero--media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.55),rgba(10,10,11,.86) 62%,var(--ink));
}
.mp-hero--media > .shell,
.mp-hero--media > .mp-hero__glow{position:relative; z-index:2}

/* ====================================================== tier plate band */
/* The membership_*.jpg slides are finished 16:9 compositions with the
   logo and tier name baked in. Shown whole and uncropped, which is the
   only way that artwork reads as intended — cropping it clips the mark
   and repeats copy the page already sets in live text. */
.lbc-plate{
  position:relative; width:100%; overflow:hidden;
  border-bottom:1px solid var(--line-soft); background:var(--plate);
}
.lbc-plate img{width:100%; height:auto; display:block}
.lbc-plate::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg,transparent,var(--ink));
  pointer-events:none;
}
/* Clears the fixed header, which would otherwise sit over the plate's
   own logo in the top-left corner. */
.lbc-plate{margin-top:clamp(64px,15vw,96px)}

/* ================================================== touch tap targets */
/* site.css sizes .btn--sm for a mouse. On a touch device anything under
   ~44px is a miss-and-retry, and these are real conversion links
   ("Brief this discipline", the sticky bar pair), so they get the floor. */
@media(hover:none){
  .btn--sm{
    min-height:var(--lbc-tap);
    display:inline-flex; align-items:center; justify-content:center;
  }
}