/* ==========================================================================
   EK Studio — Websites service page
   Extends styles.css (Hybrid A + C). New components only; shared system reused.
   ========================================================================== */

/* ==========================================================================
   2. HERO
   ========================================================================== */
.web-hero{padding-block:clamp(38px,5vw,76px) clamp(48px,6vw,96px)}
.web-hero-grid{display:grid;grid-template-columns:1.02fr 1.06fr;gap:clamp(34px,5vw,68px);align-items:center}
.web-hero h1{
  font-family:var(--font-display);font-weight:400;line-height:1.0;letter-spacing:-.02em;
  font-size:clamp(2.5rem,5vw,4.2rem);color:var(--espresso);margin-top:8px;
}
.web-hero .lead{margin-top:24px;max-width:52ch;font-size:1.18rem;line-height:1.58;color:var(--body)}
.web-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.web-status{
  margin-top:30px;display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-strong);
}
.web-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}

/* --- hero composition (real work: Educational Koncepts espresso panel + LMP Legal device) --- */
.web-hero-visual{position:relative;isolation:isolate;padding-top:26px}
.web-tick{
  position:absolute;margin:0;font-family:var(--font-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-strong);z-index:4;
}
.web-tick--tl{top:0;left:2px}
.web-tick--tr{top:0;right:2px;text-align:right}
.whv-stage{position:relative}
.whv-lmp{position:absolute;right:-2%;bottom:-11%;width:62%;min-width:210px;z-index:3}

/* Educational Koncepts — real screenshot in a refined dark espresso supporting panel */
.whv-ek{
  position:relative;z-index:1;width:80%;margin:0;
  border-radius:14px;padding:clamp(11px,1.4vw,17px);
  background:linear-gradient(150deg,#2a1712 0%,#1c110e 60%,#241318 100%);
  box-shadow:var(--shadow-lg);
}
.whv-ek::before{
  content:"";position:absolute;inset:0;border-radius:14px;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(216,99,107,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(216,99,107,.06) 1px,transparent 1px);
  background-size:34px 34px;
}
.whv-ek-screen{
  position:relative;overflow:hidden;border-radius:7px;aspect-ratio:16/9;background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
}
.whv-ek-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* ==========================================================================
   5 / 7. PACKAGE DETAIL (editorial, cream)
   ========================================================================== */
.pkg-detail-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,66px);align-items:start}
.pkg-eyebrow{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--burgundy);display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
}
.pkg-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.pkg-detail-main h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);
  line-height:1.04;letter-spacing:-.02em;color:var(--espresso);
}
.pkg-detail-main .lede{margin-top:16px;font-size:1.12rem;line-height:1.6;color:var(--body);max-width:52ch}
.designed-for{margin-top:26px;padding-top:22px;border-top:1px solid var(--divider)}
.df-label{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-strong);margin:0 0 10px;
}
.df-text{font-size:1.02rem;line-height:1.6;color:var(--body);max-width:54ch}
.pkg-detail-main .btn{margin-top:30px}

/* inclusions checklist */
.inclusions{
  border:1px solid var(--divider-strong);border-radius:14px;background:var(--surface);
  padding:clamp(24px,2.6vw,34px);
}
.inc-label{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-strong);padding-bottom:16px;border-bottom:1px solid var(--divider);
}
.inc-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.inc-list{margin-top:4px}
.inc-list li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--divider);
  font-size:1.02rem;line-height:1.45;color:var(--body);
}
.inc-list li:last-child{border-bottom:0;padding-bottom:0}
.inc-list li::before{content:"\2713";color:var(--burgundy);font-weight:700;font-size:.86em;line-height:1}

/* ==========================================================================
   6. PROFESSIONAL WEBSITE — featured espresso detail
   ========================================================================== */
.pkg-pro{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream-soft)}
.pkg-pro::before{
  content:"";position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(216,99,107,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(216,99,107,.05) 1px,transparent 1px);
  background-size:46px 46px;
}
.pkg-pro-inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,5vw,64px);align-items:center;padding-block:clamp(56px,7vw,100px);
}
.pkg-pro .pkg-eyebrow{color:var(--signal-soft)}
.pkg-pro .pkg-eyebrow::before{background:var(--signal-soft)}
.pkg-pro h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.03;letter-spacing:-.02em;color:var(--cream);
}
.pkg-pro .lede{margin-top:16px;font-size:1.14rem;line-height:1.6;color:var(--cream-soft);max-width:52ch}
.pkg-pro .designed-for{border-top-color:var(--hair-dark)}
.pkg-pro .df-label{color:var(--cream-mute)}
.pkg-pro .df-text{color:var(--cream-soft)}
.pkg-pro .inclusions{background:rgba(255,255,255,.035);border-color:var(--hair-dark);margin-top:26px}
.pkg-pro .inc-label{color:var(--cream-mute);border-bottom-color:var(--hair-dark)}
.pkg-pro .inc-list li{color:var(--cream-soft);border-bottom-color:var(--hair-dark)}
.pkg-pro .inc-list li::before{color:var(--signal-soft)}
.pkg-pro .btn-primary{box-shadow:0 0 0 1px rgba(243,234,219,.14)}
.pkg-pro-copy .btn{margin-top:30px}
.pkg-pro-visual{position:relative}

/* ==========================================================================
   10. FINAL CTA — note line
   ========================================================================== */
.final-note{
  margin:26px auto 0;max-width:52ch;
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;
  line-height:1.6;text-transform:uppercase;color:var(--cream-soft);
}

/* ==========================================================================
   4. BUILT FOR EVERY SCREEN — device-family proof (public-facing)
   ========================================================================== */
.screens-grid{display:grid;grid-template-columns:0.9fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:center}
.screens-copy h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.04;letter-spacing:-.02em;color:var(--espresso);
}
.screens-copy .lede{margin-top:16px;font-size:1.12rem;line-height:1.6;color:var(--body);max-width:52ch}
.proof-list{margin-top:28px;border-top:1px solid var(--divider)}
.proof-list li{padding:20px 0;border-bottom:1px solid var(--divider)}
.proof-num{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--burgundy);margin:0 0 9px;
}
.proof-desc{font-size:1.02rem;line-height:1.55;color:var(--body);max-width:54ch;margin:0}

/* device-family composition — warm-metal desktop + tablet, dark phone */
.screens-visual{position:relative;isolation:isolate;padding:0 0 9%}
.screens-legend{display:flex;flex-wrap:wrap;gap:9px 20px;margin-bottom:22px}
.screens-legend span{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-strong);
}
.screens-legend span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none}
.screens-stage{position:relative;padding-bottom:15%}
.sc-desktop{width:100%}
.sc-tablet{position:absolute;left:-3%;bottom:15%;width:37%;min-width:120px;z-index:2}
.sc-tablet::before{display:none}

/* Realistic scrollable phone — genuine LMP Legal mobile capture */
.sc-phone{position:absolute;left:37%;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px}
.rp-phone{
  position:relative;width:clamp(140px,12vw,168px);aspect-ratio:390/844;flex:none;
  border-radius:34px;
  background:linear-gradient(145deg,#3a3a3d 0%,#1b1b1e 42%,#0c0c0e 100%);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,.5),
    inset 0 1.5px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.5),
    inset 2px 0 2px rgba(255,255,255,.14),inset -2px 0 2px rgba(0,0,0,.3);
}
.rp-island{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:30%;height:10px;border-radius:7px;background:#000;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-screen{
  position:absolute;inset:7px;overflow-y:auto;overflow-x:hidden;
  border-radius:28px;background:#111;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.phone-screen::-webkit-scrollbar{display:none}
.phone-screen img{display:block;width:100%;height:auto;max-width:none}
/* subtle screen glare — never blocks scrolling */
.rp-phone::after{
  content:"";position:absolute;inset:7px;border-radius:28px;pointer-events:none;z-index:2;
  background:linear-gradient(122deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 12%,transparent 30%);
}
.rp-caption{
  margin:0;font-family:var(--font-mono);font-size:clamp(10px,.72rem,11px);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--signal);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){.phone-screen{scroll-behavior:auto}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Once the desktop frame would be shorter than the tall phone, the family
   recomposes to a phone-forward stack so the phone is always fully contained. */
@media (max-width:1160px){
  .screens-stage{padding-bottom:0;display:flex;justify-content:center}
  .sc-desktop{position:absolute;top:0;left:0;width:64%;margin:0;z-index:1}
  .sc-tablet{position:absolute;top:13%;right:0;left:auto;bottom:auto;width:39%;min-width:110px;z-index:2}
  .sc-phone{position:relative;left:auto;right:auto;bottom:auto;margin:0 auto;z-index:3}
}
@media (max-width:900px){
  .web-hero-grid{grid-template-columns:1fr;gap:46px}
  .web-hero-visual{max-width:560px}
  .screens-grid{grid-template-columns:1fr;gap:40px}
  .screens-visual{max-width:520px;margin-inline:auto;width:100%}
  .pkg-detail-grid{grid-template-columns:1fr;gap:30px}
  .pkg-pro-inner{grid-template-columns:1fr;gap:38px}
}

@media (max-width:620px){
  .web-hero-actions{flex-direction:column;align-items:stretch}
  .web-hero-actions .btn{width:100%}
  .pkg-detail-main .btn,.pkg-pro-copy .btn,.final-cta .btn{width:100%}
  /* stack the technical ticks so they never collide on narrow screens */
  .web-hero-visual{padding-top:0}
  .web-tick{position:static;display:block;text-align:left;margin:0 0 5px}
  .whv-stage{margin-top:14px}
  .whv-lmp{width:70%;right:0;bottom:-8%}
  .whv-ek{width:88%}
}

/* ==========================================================================
   8. MOBILE PAGE — four-phone mobile showcase
   Premium HTML/CSS mobile previews built from approved EK Studio content.
   ========================================================================== */
.mobile-page .section-head{max-width:60ch}
.mp-swipe{
  display:none;margin:26px 0 0;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-strong);
}
.mp-swipe::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--signal);margin-right:9px;vertical-align:middle}

/* Composition — desktop: staggered editorial row of four */
.mp-gallery{
  margin-top:clamp(34px,4.5vw,54px);
  display:flex;gap:clamp(18px,2vw,30px);justify-content:center;align-items:flex-start;
}
.mp-item{margin:0;width:100%;max-width:238px;min-width:0;display:flex;flex-direction:column;gap:14px}
.mp-item:nth-child(even){transform:translateY(26px)}
.mp-label{
  margin:0;font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-strong);display:flex;align-items:center;gap:9px;
}
.mp-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none}

/* Phone frame — warm-dark refined hardware (decorative; screen is the interactive layer) */
.mp-phone{
  position:relative;width:100%;aspect-ratio:390/844;border-radius:34px;
  background:linear-gradient(145deg,#3a3a3d 0%,#1b1b1e 42%,#0c0c0e 100%);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,.5),
    inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -2px 3px rgba(0,0,0,.5),
    inset 2px 0 2px rgba(255,255,255,.12),inset -2px 0 2px rgba(0,0,0,.3);
}
.mp-island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:32%;height:11px;border-radius:7px;background:#000;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.mp-glare{
  content:"";position:absolute;inset:8px;border-radius:28px;pointer-events:none;z-index:2;
  background:linear-gradient(122deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 12%,transparent 30%);
}
/* Accessible internal scroll area — the single focusable element per phone */
.mp-screen{
  position:absolute;inset:8px;overflow-y:auto;overflow-x:hidden;
  border-radius:28px;background:var(--surface);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.mp-screen::-webkit-scrollbar{display:none}
.mp-screen:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}

/* --- shared inner-screen type scale --- */
.mps{padding:16px 15px 20px;min-height:100%;box-sizing:border-box}
.mps-eyebrow{
  margin:0 0 9px;font-family:var(--font-mono);font-size:.58rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--burgundy);display:flex;align-items:center;gap:7px;
}
.mps-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none}
.mps-h{
  margin:0;font-family:var(--font-display);font-weight:400;font-size:1.32rem;line-height:1.04;
  letter-spacing:-.01em;color:var(--espresso);
}
.mps-h em{font-style:italic;color:var(--burgundy)}
.mps-copy{margin:11px 0 0;font-family:var(--font-body);font-size:.76rem;line-height:1.5;color:var(--body)}
.mps-brand{
  margin:0 0 14px;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.02em;color:var(--espresso);
}
.mps-cap{
  margin:9px 0 0;font-family:var(--font-mono);font-size:.56rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-strong);
}
/* pill button visual (non-interactive preview) */
.mps-btn{
  display:block;margin-top:14px;padding:9px 12px;border-radius:999px;text-align:center;
  font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.01em;
}
.mps-btn--solid{background:var(--burgundy);color:var(--cream)}
/* screenshot crop inside the phone */
.mps-shot{
  margin-top:14px;overflow:hidden;border-radius:9px;aspect-ratio:16/11;background:#0a0a0a;
  box-shadow:0 1px 0 rgba(0,0,0,.4),0 8px 18px -10px rgba(36,24,19,.5);
}
.mps-shot--tall{aspect-ratio:5/6}
.mps-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* Phone 01 — hero discipline index */
.mps-index{margin:14px 0 0;padding:14px 0 0;list-style:none;border-top:1px solid var(--divider)}
.mps-index li{
  display:flex;align-items:baseline;gap:9px;padding:6px 0;
  font-family:var(--font-body);font-weight:500;font-size:.78rem;color:var(--espresso);
}
.mps-index li span{font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--signal)}

/* Phone 02 — selected work */
.mps-kick{margin:12px 0 0;font-family:var(--font-mono);font-size:.56rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-strong)}
.mps-title,.mps-mini-title{margin:5px 0 0;font-family:var(--font-display);font-size:1.05rem;color:var(--espresso);line-height:1.1}
.mps-meta{margin:4px 0 0;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-strong)}
.mps-textlink{display:inline-block;margin-top:10px;font-family:var(--font-body);font-weight:600;font-size:.72rem;color:var(--burgundy)}
.mps-mini{margin-top:14px;padding-top:13px;border-top:1px solid var(--divider)}
.mps-more{margin:16px 0 0;font-family:var(--font-mono);font-size:.56rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-strong)}

/* Phone 02 — Educational Koncepts espresso featured panel (mini HTML/CSS representation) */
.mps-ek{
  position:relative;overflow:hidden;margin-top:14px;padding:16px 15px 18px;border-radius:12px;
  background:linear-gradient(155deg,#2a1712 0%,#1c110e 58%,#241318 100%);color:var(--cream);
  box-shadow:var(--shadow-md);
}
.mps-ek::before{
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:linear-gradient(rgba(216,99,107,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(216,99,107,.06) 1px,transparent 1px);
  background-size:30px 30px;
}
.mps-ek > *{position:relative}
.mps-ek-kick{
  margin:0;font-family:var(--font-mono);font-size:.56rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-soft);display:flex;align-items:center;gap:7px;
}
.mps-ek-kick::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal-soft);flex:none}
.mps-ek-name{margin:11px 0 0;font-family:var(--font-display);font-size:1.28rem;line-height:1.05;letter-spacing:-.01em;color:var(--cream)}
.mps-ek-sub{margin:6px 0 0;font-family:var(--font-body);font-weight:500;font-size:.74rem;line-height:1.4;color:var(--cream-soft)}
.mps-ek-head{
  margin:14px 0 0;font-family:var(--font-display);font-size:1.5rem;line-height:1.08;letter-spacing:-.01em;color:var(--cream);
}
.mps-ek-head em{font-style:italic;color:var(--signal-soft)}
.mps-ek-tag{
  margin:14px 0 0;font-family:var(--font-mono);font-size:.56rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-mute);
}
.mps-ek-link{
  display:inline-block;margin-top:13px;font-family:var(--font-body);font-weight:600;font-size:.78rem;
  color:var(--signal-soft);
}

/* Phone 03 — packages */
.mps-pkgs .mps-h{margin-bottom:4px}
.mps-card{
  margin-top:12px;padding:13px 13px 15px;border:1px solid var(--divider-strong);border-radius:11px;
  background:var(--surface);
}
.mps-card--feat{
  border-color:var(--burgundy);border-width:1.6px;background:#fff;
  box-shadow:var(--shadow-md);
}
.mps-most{
  margin:0 0 7px;font-family:var(--font-mono);font-size:.54rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--burgundy);
}
.mps-plabel{margin:0;font-family:var(--font-display);font-size:1.02rem;color:var(--espresso);line-height:1.1}
.mps-price{margin:5px 0 0;font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--espresso)}
.mps-pdesc{margin:6px 0 0;font-family:var(--font-body);font-size:.68rem;line-height:1.45;color:var(--body)}
.mps-note-line{margin:14px 0 0;font-family:var(--font-body);font-size:.68rem;line-height:1.5;color:var(--muted-strong)}

/* Phone 04 — final CTA + footer (espresso) */
.mps-cta{background:var(--espresso);color:var(--cream);margin:-16px -15px -20px;padding:18px 15px 22px}
.mps-eyebrow--dark{color:var(--signal-soft)}
.mps-eyebrow--dark::before{background:var(--signal-soft)}
.mps-h--dark{color:var(--cream)}
.mps-h--dark em{color:var(--signal-soft)}
.mps-copy--dark{color:var(--cream-soft)}
.mps-cta-note{
  margin:12px 0 0;font-family:var(--font-mono);font-size:.56rem;font-weight:500;letter-spacing:.08em;
  line-height:1.6;text-transform:uppercase;color:var(--cream-soft);
}
.mps-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair-dark)}
.mps-foot-brand{margin:0;font-family:var(--font-display);font-size:1.05rem;color:var(--cream);letter-spacing:.02em}
.mps-foot-tag{margin:3px 0 0;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-mute)}
.mps-foot-heading{margin:16px 0 8px;font-family:var(--font-mono);font-size:.52rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-mute)}
.mps-foot-links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px}
.mps-foot-links li{font-family:var(--font-body);font-weight:500;font-size:.68rem;color:var(--cream-soft)}
.mps-foot-col{margin:12px 0 0;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-mute)}

/* Section footer note + action */
.mp-note{
  margin:clamp(28px,4vw,44px) auto 0;max-width:60ch;text-align:center;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.05em;line-height:1.6;
  text-transform:uppercase;color:var(--muted-strong);
}
.mp-action{margin-top:22px;display:flex;justify-content:center}

/* Tablet — balanced 2×2 grid */
@media (max-width:1080px){
  .mp-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,240px));justify-content:center;gap:clamp(24px,4vw,42px) clamp(22px,4vw,40px)}
  .mp-item:nth-child(even){transform:none}
}

/* Mobile — horizontal snap gallery (only the gallery scrolls sideways) */
@media (max-width:620px){
  .mp-swipe{display:block}
  .mp-gallery{
    display:flex;grid-template-columns:none;flex-wrap:nowrap;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;margin-inline:calc(var(--pad) * -1);padding:6px var(--pad) 14px;
    scrollbar-width:none;
  }
  .mp-gallery::-webkit-scrollbar{display:none}
  .mp-item{flex:0 0 auto;width:min(76vw,290px);max-width:none;scroll-snap-align:center}
  .mp-item:nth-child(even){transform:none}
}

@media (prefers-reduced-motion:reduce){
  .mp-screen{scroll-behavior:auto}
  .mp-gallery{scroll-behavior:auto}
}