/* ==========================================================================
   ADRIAN PAV -- TELEFONO (2026-10-23)
   The phone is where most visitors arrive, so below 768px the site is not
   the desktop layout squeezed: it is recomposed around the thumb.

     - a dock at the bottom of the screen: menu, WhatsApp and the call,
       always in reach
     - the menu is a sheet that rises from the bottom (swipe down to close)
     - galleries and process steps swipe sideways instead of stacking for
       thousands of pixels; photos open full screen
     - the comparison table becomes one card per question
     - every tap answers with a press state

   Loaded after pagina.css on every page; telefono.js builds the dock, the
   sheet and the photo viewer. Above 767px nothing in this file applies
   except the two "not here" rules right below.
   ========================================================================== */

/* built by telefono.js on every page, used only on a phone */
.dock,.sheet,.swipe-meta{display:none}
.lb{display:none}

@media (max-width:767px){

/* ---------- 1. RHYTHM ------------------------------------------------------
   Desktop spacing was scaled down by clamp(); on a phone it still left
   screens with nothing on them. Sections breathe, they do not stall. */
:root{--gutter:1.125rem}
.sec{padding-block:4.25rem}
.sec--tight{padding-block:3.25rem}
.sec--top0{padding-top:0}
.sec:has(+ .seam),.pcta:has(+ .seam){padding-bottom:3rem}
.seam + .sec{padding-top:3rem}
.head{margin-bottom:2rem}
.headline{font-size:clamp(2.1rem,9.6vw,2.6rem);line-height:1.06}
.headline--sm{font-size:clamp(1.95rem,8.6vw,2.35rem)}
.sub{font-size:1.0625rem;line-height:1.5}
.scrolltext{font-size:clamp(1.6rem,7.4vw,2rem);line-height:1.18}
.cta{margin-top:2.25rem}

/* ---------- 2. TOUCH -------------------------------------------------------
   No hover on a phone, and the grey tap flash is switched off site-wide:
   whatever can be pressed shows it is being pressed. */
.cta__btn,.pill,.showcase__card,.related__card,.ccard,.foot__call,
.gallery__item,.sheet__floor,.dock__call,.dock__menu,.dock__wa,.sheet__call,.sheet__wa,.sheet__write{
  transition:transform .25s cubic-bezier(.28,.11,.32,1),filter .25s ease,background-color .25s ease;
}
.cta__btn:active,.pill:active,.showcase__card:active,.related__card:active,.ccard:active,
.foot__call:active,.gallery__item:active,.sheet__floor:active,.sheet__call:active,.sheet__wa:active,.sheet__write:active{
  transform:scale(.975);
}
.dock__call:active,.dock__menu:active,.dock__wa:active{transform:scale(.95)}
.cta__btn:hover{transform:none;filter:none}

/* ---------- 3. HEADER ------------------------------------------------------
   The bar steps aside on the way down (pagina.js); the dock takes over at
   the bottom, where the thumb is. */
.header__mark{font-size:1rem}

/* ---------- 4. HOME HERO ---------------------------------------------------
   One column the width of the screen. The call button used to refuse to
   wrap, which widened the hero's grid past the screen and dragged the
   wordmark off the right edge with it. */
.hero{grid-template-columns:minmax(0,1fr)}
.hero__foot{gap:1.15rem;padding-bottom:calc(1.5rem + var(--safe-bottom))}
.hero__headline{font-size:clamp(2.1rem,10vw,2.75rem);line-height:1}
.hero__intro .lead{font-size:1.0625rem}
.hero__location,.hero__baseline{display:none}
.hero__actions .btn{
  width:100%;white-space:normal;justify-content:space-between;
  min-height:58px;padding:1rem 1.15rem;border-radius:14px;line-height:1.3;
  letter-spacing:.035em;            /* the whole label on one line at 320px */
}
.hero__actions .btn::before{border-radius:inherit}

/* ---------- 5. PRODUCT HEROES ---------------------------------------------- */
.phero--full,.phero--solo{padding-bottom:2.25rem}
.phero--full .phero__title,.phero--solo .phero__title{font-size:clamp(2.5rem,11.4vw,3.2rem);line-height:1.02}
.phero__ctas{flex-direction:column;align-items:stretch;gap:.35rem}
.phero__ctas .pill{min-height:56px;font-size:.9375rem;white-space:normal;text-align:center}
.phero__ctas .tlink{justify-content:center}
.phero:not(.phero--full):not(.phero--solo){padding-top:calc(var(--head-total) + 2.5rem)}
.phero:not(.phero--full):not(.phero--solo) .phero__ctas{width:100%}

/* ---------- 6. LAVORAZIONI (Home showcase) ---------------------------------
   Three posters, one per screen-ish. The foot is darker than on desktop:
   on a phone the text covers a larger share of the photograph, and the
   sasso lavato macro is busy enough to swallow white type. */
.showcase{gap:.6rem;padding-inline:max(.6rem,var(--safe-left)) max(.6rem,var(--safe-right))}
.showcase__card{aspect-ratio:4/5;border-radius:22px}
.showcase__card::after{
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.86) 100%);
}
.showcase__title{font-size:2.15rem}
.showcase__link{
  align-self:flex-start;margin-top:.4rem;padding:.55rem 1rem;border-radius:980px;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* ---------- 7. SWIPE ROWS ---------------------------------------------------
   Galleries and the process steps scroll sideways, one card per swipe,
   with the next card peeking in so it is obvious there is more. */
.gallery,.steps__list{
  display:flex;gap:.625rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));
  padding-inline:var(--gutter-l) var(--gutter-r);
  scroll-padding-inline:var(--gutter-l);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery::-webkit-scrollbar,.steps__list::-webkit-scrollbar{display:none}

/* --- gallery: tall photo cards, caption on the photo, tap to open --------- */
.gallery__item,.gallery__item--7,.gallery__item--5,.gallery__item--12{
  flex:0 0 84%;scroll-snap-align:start;border-radius:20px;
}
.gallery__item .ph,.gallery__item--12 .ph{--ar:4/5;aspect-ratio:4/5;height:auto}
.gallery__item .gallery__cap{flex-direction:column;gap:.15rem;padding:1.15rem 1.15rem 1.05rem}
/* inside a sideways row the vertical fade-up has nothing to rise into */
.pjs .gallery .rv{opacity:1;transform:none}
.gallery__item::before{
  content:"";position:absolute;top:.8rem;right:.8rem;z-index:1;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* --- the line under a swipe row: where you are, and that it moves --------- */
.swipe-meta{
  display:flex;align-items:center;gap:.9rem;margin-top:1rem;
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);
}
.swipe-meta__count{color:var(--fg);font-variant-numeric:tabular-nums;min-width:4.6em}
.swipe-meta__bar{position:relative;flex:1;height:2px;border-radius:2px;background:var(--tile-line);overflow:hidden}
.swipe-meta__bar i{position:absolute;inset:0;background:var(--accent-2);transform-origin:0 50%;transform:scaleX(var(--p,.1));transition:transform .3s ease}
.swipe-meta__hint{display:inline-flex;align-items:center;gap:.4rem}
.swipe-meta__hint::after{content:"\2192";animation:nudge 1.6s ease-in-out infinite}
.swipe-meta.is-moved .swipe-meta__hint{opacity:0;transition:opacity .4s ease}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* --- process steps: chips on top, one card per phase ---------------------- */
.steps{display:block}
.steps__aside{position:static}
.steps__index{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  margin:1.75rem calc(-1 * var(--gutter-l)) 0 calc(-1 * var(--gutter-l));
  padding-inline:var(--gutter-l) var(--gutter-r);
  border:0;scroll-padding-inline:var(--gutter-l);
}
.steps__index::-webkit-scrollbar{display:none}
.steps__index li{border:0;flex:none}
.steps__index a,.steps__index a.is-active{
  min-height:44px;padding:.55rem 1rem;gap:.55rem;align-items:center;white-space:nowrap;
  border-radius:980px;background:var(--tile);color:var(--fg-2);font-size:.9375rem;
  transition:background .3s ease,color .3s ease;
}
.steps__index a span,.steps__index a.is-active span{color:var(--fg-3)}
.steps__index a.is-cur{background:var(--fg);color:var(--bg-dark)}
.steps__index a.is-cur span{color:var(--accent)}
.steps__list{margin-top:1rem}
.step{
  flex:0 0 86%;scroll-snap-align:start;
  background:var(--tile);border-radius:20px;overflow:hidden;padding-bottom:1.4rem;
}
.step + .step{margin-top:0}
.step .ph{order:-1;margin:0 0 1.15rem;border-radius:0;--ar:4/3}
.step__num,.step__title,.step__text{padding-inline:1.2rem}
.step__title{font-size:1.65rem}
.step__text{font-size:1rem;margin-top:.6rem}
.pjs .steps__list .rv{opacity:1;transform:none}
.steps .swipe-meta{margin-top:1rem}

/* ---------- 8. RAILS (applications) ---------------------------------------
   They keep drifting on their own; a thumb moves them, so the desktop
   arrows go. */
.rail{grid-auto-columns:80vw;gap:.625rem}
.card{border-radius:20px}
.rail__ctrl{display:none}

/* ---------- 9. BENTO & CARDS ---------------------------------------------- */
.bento{gap:.625rem}
.tile{border-radius:20px;padding:1.5rem 1.35rem}
.tile--media{min-height:clamp(26rem,118vw,32rem)}
.tile__title{font-size:1.6rem}
.related{gap:.625rem}
.related__card{min-height:22rem;border-radius:20px;padding:1.5rem 1.35rem}

/* ---------- 10. COMPARE: one card per question -----------------------------
   A three-column table needs 680px; scrolling it sideways hid two thirds
   of the answer. Each row becomes a card that names every option
   (telefono.js copies the column names into data-label). */
.compare{overflow:visible;margin-inline:0;padding-inline:0}
.compare table,.compare tbody,.compare tr,.compare th,.compare td{display:block;min-width:0}
.compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.compare tbody{display:grid;gap:.625rem}
.compare tr{background:var(--tile);border-radius:18px;padding:1.05rem 1.15rem .35rem}
.compare tbody th{
  width:auto;padding:0 0 .55rem;border:0;
  font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);
}
.compare td{
  display:grid;grid-template-columns:minmax(0,6.6rem) minmax(0,1fr);gap:.85rem;
  padding:.7rem 0;border:0;border-top:1px solid var(--tile-line);font-size:.98rem;
}
.compare td::before{content:attr(data-label);color:var(--fg-3);font-size:.875rem;line-height:1.45}
.compare td.is-us{color:var(--fg)}
.compare td.is-us::before{color:var(--accent-2);font-weight:var(--fw-strong)}

/* ---------- 11. SPECS, ZONE, FAQ ------------------------------------------ */
.specs__row{padding-block:1rem}
.zone__list{justify-content:flex-start}
.zone__list li{font-size:.9375rem}
.qa__item summary{font-size:1.125rem;min-height:60px;padding-block:1.05rem}
.qa__answer p{font-size:1rem}

/* ---------- 12. CALL BUTTONS ---------------------------------------------- */
.cta__btn{padding:1.3rem 1.1rem;border-radius:18px}
.cta__main{font-size:clamp(1.3rem,6vw,1.55rem)}
.pcta{padding-block:5rem}
.pcta__title{font-size:clamp(2.6rem,12vw,3.4rem)}

/* ---------- 13. CONTATTI ----------------------------------------------------
   The three ways in become a list of rows, like a phone's own contact card:
   icon, what it is, the value, and it is one tap. */
.ccards{gap:.5rem}
.ccard{
  display:grid;grid-template-columns:48px minmax(0,1fr) 16px;column-gap:1rem;row-gap:.1rem;align-items:center;
  min-height:0;padding:1.05rem 1.1rem;border-radius:18px;
}
.ccard__icon{grid-row:1 / span 3;margin:0}
.ccard__label{margin:0;grid-column:2}
.ccard__value{grid-column:2;font-size:1.3rem}
.ccard__note{grid-column:2;font-size:.9rem}
.ccard::after{
  content:"";grid-column:3;grid-row:1 / span 3;width:9px;height:9px;
  border-top:1.75px solid var(--fg-3);border-right:1.75px solid var(--fg-3);transform:rotate(45deg);
}
/* The submit button would not wrap, so the form's single column was as wide
   as the button's label and every field ran past the card's right edge. */
.form{grid-template-columns:minmax(0,1fr);padding:1.25rem 1.1rem;border-radius:20px}
.form__foot .pill{white-space:normal;min-height:56px;text-align:center}
.seg label{min-height:46px;font-size:1rem}
.request__hint{font-size:.9375rem}
.flow{gap:.625rem}
.flow__step{border-radius:20px}
.place .ph{border-radius:20px}
.place__actions .pill{flex:1 1 100%;min-height:52px}

/* ---------- 14. FOOTER ------------------------------------------------------ */
.foot{padding-bottom:calc(var(--safe-bottom))}
.foot__call{padding:.5rem .5rem .5rem 1.1rem;border-radius:16px}
.foot__call-btn{width:48px;height:48px;border-radius:12px}

/* ---------- 15. THE MENU OF THE DESKTOP ------------------------------------
   Replaced by the sheet below. pagina.js still owns it; telefono.js routes
   the burger to the sheet, so it never opens here. */
.menu{display:none}

/* ==========================================================================
   16. DOCK -- the bar at the bottom of the screen
   ========================================================================== */
.dock{
  position:fixed;z-index:120;
  left:max(.625rem,var(--safe-left));right:max(.625rem,var(--safe-right));
  bottom:calc(.625rem + var(--safe-bottom));
  display:grid;grid-template-columns:54px 54px minmax(0,1fr);gap:.375rem;
  padding:.375rem;border-radius:20px;
  background:rgba(18,18,19,.9);
  -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07) inset;
  color:#fff;
  transform:translateY(calc(100% + 1.5rem + var(--safe-bottom)));
  transition:transform .5s cubic-bezier(.2,.9,.25,1);
}
.dock.is-on{transform:none}
.dock__menu,.dock__wa{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;border-radius:15px;background:rgba(255,255,255,.09);
}
.dock__wa{color:#25d366}
.dock__lines{position:relative;width:18px;height:12px}
.dock__lines i{position:absolute;left:0;width:100%;height:1.75px;border-radius:2px;background:currentColor}
.dock__lines i:first-child{top:0}
.dock__lines i:nth-child(2){top:5px;width:70%}
.dock__lines i:last-child{bottom:0}
.dock__call{
  display:flex;align-items:center;gap:.75rem;min-width:0;
  min-height:54px;padding:0 .9rem 0 .7rem;border-radius:15px;
  background:linear-gradient(100deg,#e3262f 0%,#d4202a 60%,#c41b24 100%);
  box-shadow:0 10px 24px -12px rgba(212,32,42,.9);
}
.dock__icon{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.16);
}
.dock__icon svg{animation:ring 4.5s ease-in-out 1.2s infinite;transform-origin:50% 60%}
@keyframes ring{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(0)}}
.dock__text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.dock__text b{
  font-weight:var(--fw-mark);font-stretch:var(--fx-mark);text-transform:uppercase;
  font-size:1.0625rem;letter-spacing:-.005em;white-space:nowrap;
}
.dock__text small{
  font-size:.875rem;letter-spacing:0;
  color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* the open sheet has its own call button */
html.sheet-open .dock{transform:translateY(calc(100% + 1.5rem + var(--safe-bottom)))}

/* ==========================================================================
   17. SHEET -- the menu, risen from the bottom
   ========================================================================== */
.sheet{display:block;position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none;transition:visibility 0s linear .5s}
.sheet.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.sheet__scrim{
  position:absolute;inset:0;background:rgba(8,8,10,.48);
  opacity:0;transition:opacity .4s ease;
}
.sheet.is-open .sheet__scrim{opacity:1}
.sheet__panel{
  position:absolute;left:0;right:0;bottom:0;
  max-height:calc(100svh - var(--safe-top) - 2.5rem);overflow-y:auto;overscroll-behavior:contain;
  padding:.6rem max(1.125rem,var(--safe-right)) calc(1rem + var(--safe-bottom)) max(1.125rem,var(--safe-left));
  border-radius:26px 26px 0 0;background:#fff;color:var(--fg);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
  transform:translateY(105%);
  transition:transform .5s cubic-bezier(.2,.9,.25,1);
}
.sheet.is-open .sheet__panel{transform:translateY(var(--drag,0px))}
.sheet.is-dragging .sheet__panel{transition:none}
.sheet__grab{width:44px;height:5px;border-radius:5px;background:#d6d6d9;margin:0 auto .9rem}
.sheet__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.sheet__kicker{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);
}
.sheet__close{
  width:44px;height:44px;margin-right:-.4rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--tile);
}
.sheet__floors{display:grid;gap:.5rem}
.sheet__floor{
  display:grid;grid-template-columns:56px minmax(0,1fr) 12px;align-items:center;gap:.95rem;
  padding:.6rem .9rem .6rem .6rem;border-radius:18px;background:var(--tile);
}
.sheet__floor[aria-current="page"]{box-shadow:inset 0 0 0 1.5px var(--accent-2)}
.sheet__sw{width:56px;height:56px;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* the three floors drawn in CSS: trowelled quartz, washed stone, porous */
.sheet__sw--ind{background:
  radial-gradient(120% 80% at 20% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
  linear-gradient(135deg,#8e8b86 0%,#b9b6b1 45%,#7f7c77 100%)}
.sheet__sw--arc{background:
  radial-gradient(circle at 32% 28%,#f1e7d6 0 1.8px,transparent 2.6px) 0 0/7px 9px,
  radial-gradient(circle at 64% 70%,#4f4b46 0 2.4px,transparent 3.2px) 2px 1px/11px 10px,
  radial-gradient(circle at 20% 80%,#b48a66 0 2.2px,transparent 3px) 5px 3px/13px 12px,
  radial-gradient(circle at 75% 25%,#d9d3c9 0 2.6px,transparent 3.4px) 1px 6px/17px 15px,
  radial-gradient(circle at 45% 50%,#7d766c 0 1.6px,transparent 2.4px) 3px 4px/6px 7px,
  #a39886}
.sheet__sw--dre{background:
  radial-gradient(circle at 40% 40%,#3d3b38 0 2.2px,transparent 3px) 0 0/9px 8px,
  radial-gradient(circle at 70% 70%,#2f2d2a 0 1.6px,transparent 2.4px) 3px 2px/7px 10px,
  radial-gradient(circle at 25% 65%,#d8d6d2 0 2.4px,transparent 3.2px) 1px 4px/11px 13px,
  radial-gradient(circle at 60% 20%,#bdbab5 0 2px,transparent 2.8px) 5px 1px/13px 11px,
  #8c8a86}
.sheet__floor b{display:block;font-weight:var(--fw-title);font-size:1.2rem;letter-spacing:-.02em;line-height:1.15}
.sheet__floor small{display:block;margin-top:.15rem;color:var(--fg-3);font-size:.9rem;line-height:1.3}
.sheet__chev{width:9px;height:9px;border-top:1.75px solid var(--fg-3);border-right:1.75px solid var(--fg-3);transform:rotate(45deg)}
.sheet__pages{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem}
.sheet__pages a{
  display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 1rem;
  border-radius:16px;background:var(--tile);font-weight:var(--fw-title);font-size:1.1rem;letter-spacing:-.015em;
}
.sheet__pages a[aria-current="page"]{color:var(--accent-2)}
.sheet__actions{display:grid;gap:.5rem;margin-top:1rem}
.sheet__call{
  display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:60px;border-radius:18px;
  background:linear-gradient(100deg,#e3262f 0%,#d4202a 60%,#c41b24 100%);color:#fff;
  font-weight:var(--fw-mark);font-stretch:var(--fx-mark);text-transform:uppercase;font-size:1.0625rem;
}
.sheet__call small{font-family:var(--f-mono);font-weight:400;font-stretch:100%;font-size:var(--fs-mono);letter-spacing:.04em;opacity:.9}
.sheet__wa{
  display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;border-radius:18px;
  background:#e7f8ee;color:#0b6b35;font-weight:var(--fw-title);font-size:1.0625rem;letter-spacing:-.01em;
}
.sheet__wa svg{color:#25d366}
.sheet__write{
  display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;
}
.sheet__addr{
  display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;margin-top:.5rem;
  color:var(--fg-3);font-size:.9375rem;text-align:center;
}
html.sheet-open,html.sheet-open body,html.lb-open,html.lb-open body{overflow:hidden}

/* ==========================================================================
   18. PHOTO VIEWER
   ========================================================================== */
.lb{
  position:fixed;inset:0;z-index:300;background:#000;color:#fff;
  opacity:0;transition:opacity .3s ease;
}
.lb.is-open{display:block}
.lb:focus,.sheet__panel:focus{outline:none}
.lb.is-shown{opacity:1}
.lb__track{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.lb__track::-webkit-scrollbar{display:none}
.lb__slide{
  position:relative;margin:0;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--safe-top) + 4rem) 0 calc(var(--safe-bottom) + 5.5rem);
}
.lb__slide img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.lb__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:1rem max(1.125rem,var(--safe-left)) calc(1.25rem + var(--safe-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7) 40%);
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.7);pointer-events:none;
}
.lb__cap b{display:block;color:#fff;font-weight:400}
.lb__bar{
  position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-top) + .6rem) max(.75rem,var(--safe-right)) .6rem max(1.125rem,var(--safe-left));
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0));
}
.lb__count{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;font-variant-numeric:tabular-nums}
.lb__close{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);
}
.lb.is-dragging .lb__track{transition:none}
.lb__track{transition:transform .3s ease}

}/* end of the phone block */

/* --- no motion: nothing slides, rings or nudges --------------------------- */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .dock,.sheet__panel,.sheet__scrim,.lb{transition:none}
  .dock__icon svg,.swipe-meta__hint::after{animation:none}
}