/* ===========================================================
   بنا آفرین پارس — کاتالوگ دیجیتال تعاملی
   Design tokens
   =========================================================== */
:root{
  --navy:#12204c;
  --navy-2:#1a2c63;
  --navy-deep:#0c1839;
  --gold:#ffad06;
  --bronze:#c8a86a;
  --cream:#fbfaf8;
  --cream-2:#f3f1ec;
  --offwhite:#ecebe8;
  --ink:#12204c;
  --ink-70: rgba(18,32,76,.72);
  --ink-58: rgba(18,32,76,.58);
  --ink-40: rgba(18,32,76,.40);
  --ink-22: rgba(18,32,76,.16);
  --paper-edge: rgba(18,32,76,.10);
  --serif-display: 'Vazirmatn', 'Segoe UI', sans-serif;
  /* True monospace — reserved for the handful of spots that are always
     pure Latin/numeral (bapgroup.ir, the cover's English eyebrow). */
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Editorial "label" voice for every eyebrow/kicker/folio/footer element
     that carries Persian text. IBM Plex Sans Arabic is the official
     Arabic-script companion to IBM Plex Mono — same technical, geometric
     spirit, but with real Persian letterforms — so short Latin brand
     fragments that land inside a Persian label (AFTEC, GFRC…) still read
     as part of one considered type system instead of falling back to
     whatever generic font the OS happens to substitute. */
  --label: 'IBM Plex Sans Arabic', 'Vazirmatn', sans-serif;
  --page-w: 620px;
  --page-h: 872px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.bap-catalog-body{
  font-family:'Vazirmatn', sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1a2c63 0%, #0c1839 58%, #08122b 100%);
  color:var(--ink);
  min-height:100vh;
  overflow:hidden;
  direction:rtl;
}

/* ---------- App shell ---------- */
.bap-app{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.bap-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 22px;
  background:linear-gradient(180deg, rgba(12,24,57,.92), rgba(12,24,57,.55) 85%, transparent);
  position:relative;
  z-index:20;
}
.bap-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}
.bap-brand-mark{
  height:34px;
  padding:5px 10px;
  border-radius:9px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.bap-brand-mark img{
  height:100%;
  width:auto;
  display:block;
  object-fit:contain;
}
.bap-brand-text{line-height:1.15}
.bap-brand-text b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-0.01em}
.bap-brand-text span{display:block;font-size:9.5px;letter-spacing:.03em;color:rgba(255,255,255,.5);font-family:var(--label);font-weight:600;margin-top:2px}

.bap-topbar-actions{display:flex;align-items:center;gap:8px}
.bap-icon-btn{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
  cursor:pointer;
  transition:.2s;
}
.bap-icon-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.bap-icon-btn svg{width:16px;height:16px}
.bap-icon-btn svg#bap-icon-sound-off{display:none}

/* ---------- Book stage ---------- */
.bap-stage{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px 10px;
  min-height:0;
}
.bap-book-mirror{
  transform:scaleX(-1);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
  width:min(97vw, 1720px);
  height:min(86vh, 940px);
  display:flex;
  align-items:center;
  justify-content:center;
}
#bap-book{ position:relative; width:100%; height:100%; }

/* Each page's inner content is mirrored back so text/images read normally */
.bap-page-face{
  transform:scaleX(-1);
  width:100%;height:100%;
  position:relative;
  overflow:hidden;
  background:var(--cream);
}

.bap-page{
  background:var(--cream);
}

/* ---------- Nav arrows ---------- */
.bap-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(12,24,57,.55);
  backdrop-filter:blur(6px);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  z-index:15;
  transition:.2s;
}
.bap-nav-btn:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.bap-nav-btn.prev{right:14px}
.bap-nav-btn.next{left:14px}
.bap-nav-btn svg{width:18px;height:18px}
@media (max-width:760px){
  :where(html:not(.bap-phone)) .bap-nav-btn{width:36px;height:36px}
  :where(html:not(.bap-phone)) .bap-nav-btn.prev{right:4px}
  :where(html:not(.bap-phone)) .bap-nav-btn.next{left:4px}
}

/* ---------- Bottom bar ---------- */
.bap-bottombar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:10px 18px 16px;
  color:rgba(255,255,255,.68);
  font-family:var(--label);
  font-weight:500;
  font-size:11px;
  letter-spacing:.02em;
}
.bap-progress-track{
  width:min(360px,40vw);
  height:3px;
  background:rgba(255,255,255,.14);
  border-radius:3px;
  overflow:hidden;
}
.bap-progress-fill{
  height:100%;
  width:0%;
  background:var(--gold);
  transition:width .35s ease;
}

/* ===========================================================
   Shared page furniture (runs on every inner page)
   =========================================================== */
.pg{
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
  padding:30px 34px 24px;
  position:relative;
}
.pg::before{ /* paper depth vignette */
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 60px rgba(18,32,76,.05);
}
.pg-run{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--label);
  font-weight:600;
  font-size:9.5px;
  letter-spacing:.02em;
  color:var(--ink-40);
  padding-bottom:9px;
  border-bottom:1px solid var(--paper-edge);
  margin-bottom:18px;
  flex:none;
}
.pg-run b{color:var(--bronze);font-weight:700}
.pg-body{flex:1;min-height:0;position:relative}
.pg-foot{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:10px;
  margin-top:14px;
  border-top:1px solid var(--paper-edge);
}
.pg-folio{
  font-family:var(--label);
  font-size:10.5px;
  color:var(--navy);
  background:var(--offwhite);
  border:1px solid var(--paper-edge);
  border-radius:6px;
  padding:3px 9px;
  font-weight:700;
}
.pg-foot-note{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.08em;
  color:var(--ink-40);
}

/* ===========================================================
   COVER (front & back)
   =========================================================== */
.pg-cover{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255,173,6,.16), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 68%, #081127 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:38px 34px;
  position:relative;
  overflow:hidden;
}
.pg-cover .cover-frame{
  position:absolute;inset:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:2px;
  pointer-events:none;
}
.pg-cover .cover-frame::before,.pg-cover .cover-frame::after{
  content:"";position:absolute;width:20px;height:20px;
  border:1.5px solid var(--gold);
}
.pg-cover .cover-frame::before{top:-1px;right:-1px;border-left:none;border-bottom:none}
.pg-cover .cover-frame::after{bottom:-1px;left:-1px;border-right:none;border-top:none}
.cover-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.cover-eyebrow{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;
  color:rgba(255,255,255,.55);
}
.cover-badge{
  font-family:var(--label);
  font-size:9.5px;
  letter-spacing:.01em;
  color:var(--navy-deep);
  background:var(--gold);
  padding:5px 10px;
  border-radius:100px;
  font-weight:700;
}
.pg-cover .cover-top,.pg-cover .cover-mid,.pg-cover .cover-bottom{position:relative;z-index:2}
.cover-mid{margin-top:auto}
.cover-photo{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.46;
  z-index:0;
}
.pg-cover .cover-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,17,39,.25) 0%, rgba(8,17,39,.2) 34%, rgba(8,17,39,.62) 66%, rgba(8,17,39,.95) 100%);
}
.cover-title{position:relative;z-index:2}
.cover-title h1{
  margin:0;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:.92;
  font-size:52px;
}
.cover-title h1 span{display:block;font-weight:300;color:rgba(255,255,255,.85)}
.cover-sub{
  margin-top:14px;
  max-width:70%;
  font-size:13px;
  line-height:1.9;
  color:rgba(255,255,255,.62);
}
.cover-divider{
  margin:20px 0;
  height:1px;
  background:linear-gradient(to left, var(--bronze), transparent);
}
.cover-bottom{
  position:relative;z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  font-family:var(--label);
  font-size:10px;
  color:rgba(255,255,255,.5);
  letter-spacing:.02em;
}
.cover-bottom b{color:#fff;font-weight:700;display:block;font-size:12px;margin-bottom:4px;letter-spacing:0}

/* Back cover variant */
.pg-back{ justify-content:center; align-items:center; text-align:center; gap:22px; }
.pg-back .bap-brand-mark,.pg-back h2,.pg-back p,.pg-back .contact-line{position:relative;z-index:2}
.pg-back .bap-brand-mark-lg{
  height:64px;width:auto;padding:12px 20px;border-radius:16px;
  background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.pg-back h2{color:#fff;font-size:22px;font-weight:800;margin:0}
.pg-back p{color:rgba(255,255,255,.55);font-size:12.5px;line-height:2;max-width:320px;margin:0 auto}
.pg-back .contact-line{
  font-family:var(--mono);
  font-size:12px;
  color:var(--gold);
  letter-spacing:.03em;
  direction:ltr;
}

/* ===========================================================
   Section eyebrow / kicker used across inner pages
   =========================================================== */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--label);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--bronze);
  background:var(--offwhite);
  border:1px solid var(--paper-edge);
  padding:5px 11px 5px 8px;
  border-radius:100px;
  width:fit-content;
}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

h1.pg-title,h2.pg-title{
  font-weight:900;
  letter-spacing:-0.025em;
  color:var(--navy);
  line-height:1.08;
  margin:12px 0 0;
}
.pg-tagline{
  color:var(--ink-58);
  font-size:13px;
  line-height:1.85;
  margin-top:10px;
}
.pg-copy{
  color:var(--ink-70);
  font-size:12.5px;
  line-height:2;
  text-align:justify;
}
.pg-copy p{margin:0 0 12px}
.pg-copy p:last-child{margin-bottom:0}

/* ===========================================================
   TOC page
   =========================================================== */
.toc-list{list-style:none;margin:0;padding:0}
.toc-group-label{
  font-family:var(--label);
  font-weight:600;
  font-size:10.5px;letter-spacing:.02em;color:var(--bronze);
  margin:16px 0 6px;
}
.toc-group-label:first-child{margin-top:4px}
.toc-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:6px 0;
  border-bottom:1px dotted var(--paper-edge);
  font-size:12.5px;
  color:var(--navy);
  cursor:pointer;
  transition:color .15s;
}
.toc-row:hover{color:var(--bronze)}
.toc-row:hover .t-name{color:var(--bronze)}
.toc-row .t-name{white-space:nowrap;font-weight:600}
.toc-row .t-dots{flex:1;border-bottom:1px dotted var(--ink-22);transform:translateY(-4px)}
.toc-row .t-num{font-family:var(--label);font-size:11px;color:var(--ink-40)}

/* ===========================================================
   Stat cards
   =========================================================== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-card{
  background:var(--navy);
  color:#fff;
  border-radius:14px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.stat-card .stat-label{
  font-family:var(--label);
  font-weight:600;
  font-size:9.5px;letter-spacing:.02em;color:rgba(255,255,255,.55);
}
.stat-card .stat-value{
  font-weight:900;font-size:26px;margin-top:8px;letter-spacing:-0.02em;
}
.stat-card .stat-sub{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:3px}
.stat-card.gold{background:var(--gold);color:var(--navy-deep)}
.stat-card.gold .stat-label{color:rgba(12,24,57,.55)}
.stat-card.gold .stat-sub{color:rgba(12,24,57,.55)}

/* ===========================================================
   Timeline (history)
   =========================================================== */
.tl{position:relative;padding-right:18px;margin-top:16px}
.tl::before{content:"";position:absolute;right:5px;top:4px;bottom:4px;width:1px;background:var(--paper-edge)}
.tl-item{position:relative;padding-bottom:16px}
.tl-item::before{
  content:"";position:absolute;right:-18px;top:3px;
  width:9px;height:9px;border-radius:50%;
  background:var(--cream);border:2px solid var(--bronze);
}
.tl-item .tl-year{font-family:var(--label);font-size:10.5px;letter-spacing:.01em;color:var(--bronze);font-weight:700}
.tl-item .tl-text{font-size:12px;color:var(--ink-70);line-height:1.8;margin-top:2px}

/* ===========================================================
   PRODUCT SPEC-SHEET PAGE
   =========================================================== */
.prod-photo{
  position:relative;
  height:230px;
  margin:0 -34px 0;
  overflow:hidden;
}
.prod-photo img{width:100%;height:100%;object-fit:cover;display:block}
.prod-photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(12,24,57,.55), transparent 42%);
}
.prod-photo .prod-tag{
  position:absolute;
  right:34px;bottom:12px;
  background:var(--navy);
  color:#fff;
  font-family:var(--label);
  font-weight:600;
  font-size:10px;
  letter-spacing:.02em;
  padding:6px 12px;
  border-radius:100px;
}
.prod-body{padding-top:16px}
.prod-body h2{
  font-weight:900;
  font-size:22px;
  color:var(--navy);
  letter-spacing:-0.02em;
  margin:0;
  line-height:1.15;
}
.prod-tagline{
  font-size:12px;
  color:var(--bronze);
  margin-top:6px;
  line-height:1.7;
  font-weight:600;
}
.prod-about{
  margin-top:12px;
}
.prod-features{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.feat{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:var(--cream-2);
  border-radius:10px;
  padding:9px 10px;
}
.feat .chk{
  flex:none;
  width:17px;height:17px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:9px;
  display:grid;place-items:center;
  margin-top:1px;
}
.feat span{font-size:11px;line-height:1.65;color:var(--ink-70)}

/* ===========================================================
   PRODUCT SPREAD v2 — two facing pages per product
   =========================================================== */

/* -- LEFT page: compact info + shaped photo cluster + two lists -- */
.pg-prod2-left{
  position:relative;
  background:
    radial-gradient(560px 380px at 100% 0%, rgba(255,173,6,.09), transparent 62%),
    radial-gradient(460px 340px at 0% 100%, rgba(18,32,76,.06), transparent 60%),
    var(--cream);
}
.pg-prod2-left::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(18,32,76,.035) 0 1px, transparent 1px 26px);
  opacity:.6;
}
.p2-eyebrow{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;
  font-family:var(--label);font-size:10.5px;letter-spacing:.02em;
  color:var(--bronze);font-weight:700;
}
.p2-eyebrow .ln{width:20px;height:1px;background:var(--bronze);flex:none}
.p2-title{
  position:relative;z-index:1;
  font-weight:900;font-size:20px;color:var(--navy);
  letter-spacing:-.02em;line-height:1.2;margin:9px 0 0;
}
.p2-tagline{
  position:relative;z-index:1;
  font-size:11px;color:var(--ink-58);line-height:1.75;margin-top:8px;max-width:97%;
}
.p2-gallery{
  position:relative;z-index:1;
  display:flex;gap:10px;margin-top:16px;align-items:flex-end;height:148px;
}
.p2-tile{
  position:relative;overflow:hidden;background:#dfe3ea;
  box-shadow:0 16px 28px -12px rgba(18,32,76,.42), 0 2px 6px rgba(18,32,76,.14);
}
.p2-tile img{width:100%;height:100%;object-fit:cover;display:block}
.p2-tile.t-rect{flex:1.3;height:100%;border-radius:6px 20px 6px 20px}
.p2-tile.t-square{flex:.85;height:74%;border-radius:14px}
.p2-lists{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:18px;border-top:1px solid var(--paper-edge);padding-top:14px;
}
.p2-col{padding:0 14px}
.p2-col:last-child{border-right:1px dashed var(--paper-edge)}
.p2-col-label{
  font-family:var(--label);font-size:9.5px;letter-spacing:.02em;
  color:var(--bronze);font-weight:700;margin-bottom:8px;
}
.p2-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.p2-col li{display:flex;align-items:flex-start;gap:6px;font-size:10.5px;line-height:1.6;color:var(--ink-70)}
.p2-col li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:5px}

/* -- RIGHT page: dark full-bleed gallery with diagonal photo cluster -- */
.pg2r{
  width:100%;height:100%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:
    radial-gradient(760px 520px at 92% 100%, rgba(255,173,6,.10), transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 55%, #070f26 100%);
}
.pg2r::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 30px);
}
.pg2r-topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px 0;
}
.pg2r-eyebrow{font-family:var(--label);font-weight:600;font-size:9.5px;letter-spacing:.02em;color:rgba(255,255,255,.55)}
.pg2r-name{font-size:14px;font-weight:800;color:#fff;margin-top:3px}
.pg2r-catpill{
  background:var(--gold);color:var(--navy-deep);
  font-family:var(--label);font-size:9.5px;font-weight:700;
  padding:5px 12px;border-radius:100px;flex:none;
}
.pg2r-stage{position:relative;flex:1;margin:16px 24px 0}
.p2r-hero{
  position:absolute;top:0;right:0;width:80%;height:88%;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,12% 100%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55);
}
.p2r-hero img{width:100%;height:100%;object-fit:cover;display:block}
.p2r-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(7,15,38,.35), transparent 45%)}
.p2r-inset-a{
  position:absolute;right:8%;bottom:-4%;width:40%;height:40%;overflow:hidden;border-radius:6px;
  clip-path:polygon(0 0,90% 0,100% 100%,10% 100%);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.6);
  border:3px solid var(--navy-deep);
}
.p2r-inset-a img{width:100%;height:100%;object-fit:cover;display:block}
.p2r-inset-b{
  position:absolute;left:4%;top:2%;width:24%;height:26%;overflow:hidden;border-radius:12px;
  box-shadow:0 16px 30px -10px rgba(0,0,0,.55);
  border:3px solid var(--gold);
}
.p2r-inset-b img{width:100%;height:100%;object-fit:cover;display:block}
.pg2r-badges{position:absolute;left:22px;bottom:16px;display:flex;align-items:center;z-index:3}
.gear{
  width:46px;height:46px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:repeating-conic-gradient(rgba(255,255,255,.4) 0deg 5deg, transparent 5deg 18deg);
}
.gear .gcore{
  width:32px;height:32px;border-radius:50%;background:var(--navy-deep);
  border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;
}
.gear.small{width:28px;height:28px;margin-right:-13px;opacity:.7}
.gear.small .gcore{width:19px;height:19px}
.gear .folio-num{font-family:var(--label);font-size:11px;color:var(--gold);font-weight:700}
.pg2r-foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px 16px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.01em;color:rgba(255,255,255,.48);
}
.pg2r-foot span:first-child{font-family:var(--mono);letter-spacing:.06em}

/* ===========================================================
   PRODUCT SPREAD — desktop-only variety
   ===========================================================
   Every product used to reuse the exact same photo-cluster shapes,
   crops and frame styling — 18 left pages with an identical rect+
   square pair, 18 right pages with an identical diagonal hero+inset
   cluster. Each product's .p2-gallery / .pg2r-stage now also carries
   one modifier class (g-v1..g-v5 / r-v1..r-v5) picked from a shuffled,
   non-repeating rotation, so position, framing, corner shape, border
   and background treatment vary from page to page instead of
   following one fixed template.

   Also fixes the LEFT page's dead space: .p2-gallery used to be a
   fixed 148px regardless of how tall the actual page canvas was
   (up to 940px), leaving empty room between the lists and the
   footer on larger screens/pages with a short tagline. .prod2-body
   turns the column into a flex layout so the gallery (flex:1) always
   grows to fill whatever space is actually left.

   Scoped to ≥761px only — the 760px-and-under rules further down
   already hand-tune this spread for the single-page mobile view
   (fixed 112px gallery, inset-b hidden, etc.) and are left untouched;
   every variant below still starts from the same two/three base
   elements (.t-rect/.t-square, .p2r-hero/.p2r-inset-a/.p2r-inset-b)
   so mobile automatically falls back to that original layout. */
@media (min-width:761px){
  .prod2-body{display:flex;flex-direction:column}
  .prod2-body .p2-gallery{flex:1;min-height:0;height:auto}

  /* -- Left page gallery variants -- */
  .g-v1{align-items:stretch}
  .g-v1 .t-square{height:100%}

  .g-v2{align-items:stretch}
  .g-v2 .t-rect{border-radius:20px 4px 20px 4px}
  .g-v2 .t-square{height:100%;border-radius:4px 20px 4px 20px;border:3px solid var(--gold)}

  .g-v3{align-items:stretch}
  .g-v3 .t-rect{border-radius:24px}
  .g-v3 .t-square{height:100%;border-radius:50% 12px 50% 12px;border:3px solid var(--navy)}

  .g-v4{position:relative}
  .g-v4 .t-rect{flex:1;height:100%;border-radius:22px}
  .g-v4 .t-square{
    position:absolute;left:10px;bottom:10px;z-index:2;
    width:64px;height:64px;flex:none;border-radius:50%;
    border:3px solid var(--gold);
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }

  .g-v5{align-items:stretch;gap:14px}
  .g-v5 .t-rect{border-radius:14px}
  .g-v5 .t-square{flex:.6;height:100%;border-radius:14px;border:3px solid var(--navy)}
  .g-v5 .t-square img{filter:saturate(0) contrast(1.05);opacity:.92}

  /* -- Right page photo-cluster variants -- */
  .r-v1 .p2r-hero{height:100%}
  .r-v1 .p2r-inset-b{
    left:0;top:0;width:20%;height:100%;
    border-radius:0 18px 18px 0;
  }

  .r-v2 .p2r-hero{right:auto;left:0;height:100%;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
  .r-v2 .p2r-inset-a{right:auto;left:8%;border-color:var(--gold)}
  .r-v2 .p2r-inset-b{
    left:auto;right:0;top:0;width:20%;height:100%;
    border-radius:18px 0 0 18px;border-color:var(--navy-deep);
  }

  .r-v3 .p2r-hero{width:100%;height:100%;top:0;right:0;clip-path:none;border-radius:18px}
  .r-v3 .p2r-inset-a{
    right:auto;left:6%;bottom:6%;top:auto;
    width:auto;height:34%;aspect-ratio:1/1;
    border-radius:50%;clip-path:none;border:4px solid var(--gold);
  }
  .r-v3 .p2r-inset-b{display:none}

  .r-v4 .p2r-hero{width:100%;height:60%;top:0;right:0;clip-path:none;border-radius:16px}
  .r-v4 .p2r-inset-a{
    width:49%;height:38%;bottom:0;top:auto;left:0;right:auto;
    border-radius:12px;clip-path:none;border-color:var(--navy-deep);
  }
  .r-v4 .p2r-inset-b{
    width:49%;height:38%;bottom:0;top:auto;right:0;left:auto;
    border-radius:12px;clip-path:none;border-color:var(--gold);
  }

  .r-v5 .p2r-hero{width:100%;height:100%;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  .r-v5 .p2r-inset-a{
    top:6%;bottom:auto;right:auto;left:6%;
    width:38%;height:38%;border-radius:14px;clip-path:none;border-color:var(--gold);
  }
  .r-v5 .p2r-inset-b{display:none}
}
/* phone-spread copy of the min-width block above */

  :where(html.bap-phone) .prod2-body{display:flex;flex-direction:column}
  :where(html.bap-phone) .prod2-body .p2-gallery{flex:1;min-height:0;height:auto}

  /* -- Left page gallery variants -- */
  :where(html.bap-phone) .g-v1{align-items:stretch}
  :where(html.bap-phone) .g-v1 .t-square{height:100%}

  :where(html.bap-phone) .g-v2{align-items:stretch}
  :where(html.bap-phone) .g-v2 .t-rect{border-radius:20px 4px 20px 4px}
  :where(html.bap-phone) .g-v2 .t-square{height:100%;border-radius:4px 20px 4px 20px;border:3px solid var(--gold)}

  :where(html.bap-phone) .g-v3{align-items:stretch}
  :where(html.bap-phone) .g-v3 .t-rect{border-radius:24px}
  :where(html.bap-phone) .g-v3 .t-square{height:100%;border-radius:50% 12px 50% 12px;border:3px solid var(--navy)}

  :where(html.bap-phone) .g-v4{position:relative}
  :where(html.bap-phone) .g-v4 .t-rect{flex:1;height:100%;border-radius:22px}
  :where(html.bap-phone) .g-v4 .t-square{
    position:absolute;left:10px;bottom:10px;z-index:2;
    width:64px;height:64px;flex:none;border-radius:50%;
    border:3px solid var(--gold);
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }

  :where(html.bap-phone) .g-v5{align-items:stretch;gap:14px}
  :where(html.bap-phone) .g-v5 .t-rect{border-radius:14px}
  :where(html.bap-phone) .g-v5 .t-square{flex:.6;height:100%;border-radius:14px;border:3px solid var(--navy)}
  :where(html.bap-phone) .g-v5 .t-square img{filter:saturate(0) contrast(1.05);opacity:.92}

  /* -- Right page photo-cluster variants -- */
  :where(html.bap-phone) .r-v1 .p2r-hero{height:100%}
  :where(html.bap-phone) .r-v1 .p2r-inset-b{
    left:0;top:0;width:20%;height:100%;
    border-radius:0 18px 18px 0;
  }

  :where(html.bap-phone) .r-v2 .p2r-hero{right:auto;left:0;height:100%;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
  :where(html.bap-phone) .r-v2 .p2r-inset-a{right:auto;left:8%;border-color:var(--gold)}
  :where(html.bap-phone) .r-v2 .p2r-inset-b{
    left:auto;right:0;top:0;width:20%;height:100%;
    border-radius:18px 0 0 18px;border-color:var(--navy-deep);
  }

  :where(html.bap-phone) .r-v3 .p2r-hero{width:100%;height:100%;top:0;right:0;clip-path:none;border-radius:18px}
  :where(html.bap-phone) .r-v3 .p2r-inset-a{
    right:auto;left:6%;bottom:6%;top:auto;
    width:auto;height:34%;aspect-ratio:1/1;
    border-radius:50%;clip-path:none;border:4px solid var(--gold);
  }
  :where(html.bap-phone) .r-v3 .p2r-inset-b{display:none}

  :where(html.bap-phone) .r-v4 .p2r-hero{width:100%;height:60%;top:0;right:0;clip-path:none;border-radius:16px}
  :where(html.bap-phone) .r-v4 .p2r-inset-a{
    width:49%;height:38%;bottom:0;top:auto;left:0;right:auto;
    border-radius:12px;clip-path:none;border-color:var(--navy-deep);
  }
  :where(html.bap-phone) .r-v4 .p2r-inset-b{
    width:49%;height:38%;bottom:0;top:auto;right:0;left:auto;
    border-radius:12px;clip-path:none;border-color:var(--gold);
  }

  :where(html.bap-phone) .r-v5 .p2r-hero{width:100%;height:100%;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  :where(html.bap-phone) .r-v5 .p2r-inset-a{
    top:6%;bottom:auto;right:auto;left:6%;
    width:38%;height:38%;border-radius:14px;clip-path:none;border-color:var(--gold);
  }
  :where(html.bap-phone) .r-v5 .p2r-inset-b{display:none}


@media (max-width:760px){
  :where(html:not(.bap-phone)) .p2-title{font-size:17px}
  :where(html:not(.bap-phone)) .p2-gallery{height:112px;gap:8px}
  :where(html:not(.bap-phone)) .p2-lists{grid-template-columns:1fr 1fr;gap:0}
  :where(html:not(.bap-phone)) .p2-col{padding:0 8px}
  :where(html:not(.bap-phone)) .pg2r-name{font-size:12px}
  :where(html:not(.bap-phone)) .p2r-inset-b{display:none}
  :where(html:not(.bap-phone)) .g-single .t-square{display:none}
  :where(html:not(.bap-phone)) .g-single .t-rect{flex:1;height:100%}
  :where(html:not(.bap-phone)) .gear{width:38px;height:38px}
  :where(html:not(.bap-phone)) .gear .gcore{width:26px;height:26px}
  :where(html:not(.bap-phone)) .gear.small{width:22px;height:22px}
}

/* ---------------------------------------------------------
   Diagram tiles — technical drawings / CAD renders / spec
   sheets carry their own baked-in labels, so cropping them
   like a photo (object-fit:cover) slices captions off. These
   sit on a light drafting-paper card and are fully contained
   instead, the way a real catalog insets a line drawing.
   --------------------------------------------------------- */
.is-diagram{
  background:
    linear-gradient(135deg, rgba(18,32,76,.05) 0 1px, transparent 1px 22px),
    #f2efe7 !important;
  display:flex;align-items:center;justify-content:center;
  padding:7%;
}
.is-diagram img{
  object-fit:contain !important;
  object-position:center !important;
  width:100%;height:100%;
  filter:drop-shadow(0 2px 6px rgba(18,32,76,.18));
}
.is-diagram::after{display:none}

/* ---------------------------------------------------------
   Text-callout card — used in place of a third product photo
   when a product only has enough real photography for two
   frames. Keeps the same slot/shape/position rules as
   .p2r-inset-b (or .t-square) so it drops straight into any
   variant, but shows authored copy instead of an image.
   --------------------------------------------------------- */
.p2r-note{
  background:linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.02)), var(--navy-deep);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:8% 9%;
}
/* Override the inherited .p2r-inset-b box — that shape is sized for a
   photo thumbnail and is too narrow for wrapped Persian text (words
   were breaking one-per-line). Force a wider, shorter card instead,
   regardless of which r-vN variant positions it. */
.p2r-inset-b.p2r-note{width:46%;height:30%}
.p2r-note .note-eyebrow{
  font-family:var(--label);font-weight:700;font-size:8.5px;letter-spacing:.03em;
  color:var(--gold);text-transform:none;
}
.p2r-note p{
  margin:0;font-size:10.5px;line-height:1.65;color:rgba(255,255,255,.86);
}
.t-square.p2r-note{padding:9% 8%}

/* ===========================================================
   SERVICES page
   =========================================================== */
.svc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.svc-card{
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:14px;
  background:var(--cream);
}
.svc-num{
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  color:var(--bronze);
}
.svc-card h3{margin:8px 0 0;font-size:13.5px;font-weight:800;color:var(--navy)}
.svc-card p{margin:6px 0 0;font-size:11px;line-height:1.75;color:var(--ink-58)}

/* Consultation call-to-action band — closes out the services page with
   a next-step instead of trailing off into blank paper. */
.cta-band{
  margin-top:18px;background:var(--navy);border-radius:16px;
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.cta-band .cta-text{font-size:12px;line-height:1.8;color:rgba(255,255,255,.82);max-width:56%}
.cta-band .cta-text b{color:#fff;display:block;font-size:13.5px;margin-bottom:3px;font-weight:800}
.cta-band .cta-contact{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.cta-band .cta-contact a{font-family:var(--mono);font-size:12.5px;color:var(--gold);font-weight:700;direction:ltr}

/* ===========================================================
   Certifications page
   =========================================================== */
.cert-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}
.cert-card{
  flex:0 1 31%;
  border:1px solid var(--paper-edge);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.cert-card img{width:100%;height:96px;object-fit:contain;padding:8px;background:#fff}
.cert-card .cert-name{
  font-size:9.5px;
  text-align:center;
  padding:5px 4px 8px;
  color:var(--ink-58);
  font-weight:600;
  line-height:1.4;
}

/* "In practice" QC photo strip beneath the certificate grid — keeps
   the page from reading as a bare wall of logos and shows the actual
   testing/curing process the certificates represent. */
.qc-strip{display:flex;gap:10px;margin-top:14px}
.qc-strip figure{
  flex:1;margin:0;position:relative;border-radius:12px;overflow:hidden;
  height:118px;box-shadow:0 10px 20px -12px rgba(18,32,76,.35);
}
.qc-strip img{width:100%;height:100%;object-fit:cover;display:block}
.qc-strip figcaption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:16px 10px 7px;
  font-size:9.5px;font-weight:600;color:#fff;text-align:center;line-height:1.4;
  background:linear-gradient(0deg, rgba(9,17,42,.82), transparent);
}

/* Bottom-of-page factory photo — used on pages whose text/stat content
   doesn't reach the footer, so the page never ends in bare paper. */
.pg-photo-strip{
  position:relative;flex:1;min-height:0;margin-top:16px;
  border-radius:16px;overflow:hidden;
  box-shadow:0 16px 30px -16px rgba(18,32,76,.4);
}
.pg-photo-strip img{width:100%;height:100%;object-fit:cover;display:block}
.pg-photo-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(9,17,42,.75), transparent 55%)}
.pg-photo-strip .cap{position:absolute;right:16px;bottom:12px;left:16px;z-index:2;color:#fff;font-size:11px;font-weight:600;line-height:1.5}

/* ===========================================================
   Projects page
   =========================================================== */
.proj-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.proj-row{
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom:1px dashed var(--paper-edge);
  padding-bottom:9px;
}
.proj-row img{
  width:64px;height:64px;object-fit:cover;border-radius:9px;flex:none;
}
.proj-row .p-title{font-size:12px;font-weight:700;color:var(--navy)}
.proj-row .p-meta{font-family:var(--label);font-weight:600;font-size:9.5px;color:var(--bronze);margin-top:2px}
.proj-row .p-desc{font-size:10.5px;color:var(--ink-58);line-height:1.6;margin-top:3px}

/* Province ledger */
.prov-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:10px}
.prov-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px dotted var(--paper-edge);
  font-size:12px;color:var(--navy);
}
.prov-row b{font-family:var(--mono);font-size:10px;color:var(--bronze);font-weight:600}

/* ===========================================================
   Contact page
   =========================================================== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.contact-card{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:12px 14px;
}
.contact-card .ic{
  width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff;
  display:grid;place-items:center;flex:none;
}
.contact-card .ic svg{width:16px;height:16px}
.contact-card b{display:block;font-size:12px;color:var(--navy)}
.contact-card span{display:block;font-size:11.5px;color:var(--ink-58);margin-top:2px;direction:ltr;text-align:right}

/* Quote block */
.pull-quote{
  margin-top:14px;
  padding:14px 16px;
  border-right:3px solid var(--gold);
  background:var(--cream-2);
  border-radius:0 12px 12px 0;
  font-size:12.5px;
  line-height:1.95;
  color:var(--navy);
  font-weight:600;
}
/* Quote/manifesto page (inside-front) — a deliberately spacious,
   centred page, but a large dim factory photo keeps it from reading
   as an accidentally-empty page rather than a considered pause. */
.pg-body-quote{position:relative;overflow:hidden}
.pg-body-bgphoto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 35%;opacity:.16;z-index:0;
  -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image:linear-gradient(0deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.pg-body-quote>*:not(.pg-body-bgphoto){position:relative;z-index:1}

.pull-quote small{
  display:block;margin-top:8px;
  font-family:var(--label);font-size:9.5px;color:var(--ink-40);font-weight:500;
}

/* Loader */
#bap-loader{
  position:fixed;inset:0;z-index:100;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;transition:opacity .5s ease;
}
#bap-loader .spin{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--gold);
  animation:bapspin 1s linear infinite;
}
@keyframes bapspin{to{transform:rotate(360deg)}}
#bap-loader span{font-family:var(--label);font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.6)}

/* Hint (first-time swipe affordance) */
.bap-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(12,24,57,.75);color:#fff;font-family:var(--label);
  font-size:10.5px;padding:7px 14px;border-radius:100px;z-index:16;
  pointer-events:none; opacity:0; transition:opacity .4s;
}
.bap-hint.show{opacity:1}

/* ===========================================================
   Goto-page input (topbar, between the first/last buttons)
   =========================================================== */
.bap-goto{flex:none}
.bap-goto input{
  width:52px;
  height:34px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:0 6px;
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  text-align:center;
  letter-spacing:.02em;
  outline:none;
  transition:.2s;
}
.bap-goto input::placeholder{color:rgba(255,255,255,.4)}
.bap-goto input:focus{border-color:var(--gold);background:rgba(255,255,255,.13)}
.bap-goto input.bap-goto-error{border-color:#e0553d;animation:bapshake .35s}
@keyframes bapshake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

/* ===========================================================
   Pages side panel (thumbnails)
   =========================================================== */
.bap-pages-backdrop{
  position:fixed;inset:0;
  background:rgba(6,12,30,.5);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  z-index:55;
}
.bap-pages-backdrop.show{opacity:1;pointer-events:auto}

.bap-pages-panel{
  position:fixed;top:0;right:0;height:100vh;
  width:min(240px, 78vw);
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow:-18px 0 40px rgba(0,0,0,.45);
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:60;
  display:flex;flex-direction:column;
}
.bap-pages-panel.open{transform:translateX(0)}
.bap-pages-head{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;
  color:#fff;font-weight:800;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.bap-pages-head .bap-icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.bap-pages-scroll{
  flex:1;min-height:0;overflow-y:auto;
  padding:14px 14px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.bap-pages-scroll::-webkit-scrollbar{width:6px}
.bap-pages-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}

.bap-thumb{
  position:relative;flex:none;overflow:hidden;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6);
  background:#fff;
  transition:border-color .18s, transform .18s;
}
.bap-thumb:hover{transform:translateY(-2px)}
.bap-thumb.active{border-color:var(--gold)}
.bap-thumb-inner{
  position:relative;
  transform-origin:top right;
  pointer-events:none;
}
.bap-thumb-num{
  position:absolute;left:6px;bottom:6px;
  background:rgba(12,24,57,.78);
  color:#fff;
  font-family:var(--label);
  font-size:9.5px;
  font-weight:600;
  padding:2px 7px;
  border-radius:100px;
  z-index:2;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:900px){
  :where(html:not(.bap-phone)) .bap-brand-text{display:none}
}
@media (max-width:760px){
  :where(html:not(.bap-phone)) .pg{padding:22px 18px 16px}
  :where(html:not(.bap-phone)) .cover-title h1{font-size:38px}
  :where(html:not(.bap-phone)) .cover-sub{max-width:100%}
  :where(html:not(.bap-phone)) .prod-photo{margin:0 -18px 0;height:190px}
  :where(html:not(.bap-phone)) .prod-photo .prod-tag{right:18px}
  :where(html:not(.bap-phone)) .stat-card .stat-value{font-size:21px}
  :where(html:not(.bap-phone)) .cert-grid{grid-template-columns:repeat(2,1fr)}
  :where(html:not(.bap-phone)) .bap-goto input{width:40px;height:30px;font-size:11px}
  :where(html:not(.bap-phone)) .bap-topbar-actions{gap:5px}
  :where(html:not(.bap-phone)) .bap-pages-panel{width:min(210px, 82vw)}
}

/* ===========================================================
   V6 CATALOG ART-DIRECTION OVERRIDES
   - photographs use practical rectangular frames only
   - narrow/tall thumbnail treatments are replaced by balanced
     editorial grids
   - each product spread gets a distinct composition
   =========================================================== */

.p2-gallery{
  height:172px;
  gap:10px;
  align-items:stretch;
}
.p2-tile,
.p2r-inset-a,
.p2r-inset-b,
.p2r-hero{
  border-radius:10px !important;
}
.p2-tile img,
.p2r-hero img,
.p2r-inset-a img,
.p2r-inset-b img{
  filter:none !important;
  opacity:1 !important;
}
.p2-gallery .t-square{
  height:100% !important;
  border-radius:10px !important;
  border:0 !important;
  flex:.9;
}

/* Balanced, rectangular left-page compositions */
@media (min-width:761px){
  .g-v1{display:grid;grid-template-columns:1.45fr .85fr;gap:10px}
  .g-v1 .t-rect,.g-v1 .t-square{height:100%}

  .g-v2{display:grid;grid-template-columns:1fr 1.15fr;gap:10px}
  .g-v2 .t-rect,.g-v2 .t-square{height:100%;border-radius:10px !important}

  .g-v3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .g-v3 .t-rect,.g-v3 .t-square{height:100%;border-radius:10px !important}

  .g-v4{display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
  .g-v4 .t-rect,.g-v4 .t-square{
    position:relative !important;left:auto !important;bottom:auto !important;
    width:auto !important;height:100% !important;
    border-radius:10px !important;box-shadow:none !important;
  }

  .g-v5{display:grid;grid-template-columns:.85fr 1.45fr;gap:10px}
  .g-v5 .t-rect,.g-v5 .t-square{height:100%;border-radius:10px !important}

  /* Right-side galleries: no circles, no ultra-thin vertical insets. */
  .r-v1 .p2r-hero{width:72%;height:100%;right:0;top:0;clip-path:none;border-radius:10px !important}
  .r-v1 .p2r-inset-a{width:24%;height:46%;left:3%;right:auto;bottom:4%;clip-path:none;border:0;border-radius:10px !important}
  .r-v1 .p2r-inset-b{width:24%;height:42%;left:3%;top:4%;border:0;border-radius:10px !important}

  .r-v2 .p2r-hero{width:60%;height:100%;left:auto;right:0;top:0;clip-path:none;border-radius:10px !important}
  .r-v2 .p2r-inset-a{width:34%;height:44%;left:4%;right:auto;bottom:4%;top:auto;clip-path:none;border:0;border-radius:10px !important}
  .r-v2 .p2r-inset-b{width:34%;height:44%;left:4%;right:auto;top:4%;border:0;border-radius:10px !important}

  .r-v3 .p2r-hero{width:100%;height:62%;right:0;top:0;clip-path:none;border-radius:10px !important}
  .r-v3 .p2r-inset-a{width:47%;height:31%;left:0;right:auto;bottom:2%;top:auto;clip-path:none;border:0;border-radius:10px !important}
  .r-v3 .p2r-inset-b{display:block;width:47%;height:31%;right:0;left:auto;top:auto;bottom:2%;border:0;border-radius:10px !important}

  .r-v4 .p2r-hero{width:100%;height:58%;top:0;right:0;clip-path:none;border-radius:10px !important}
  .r-v4 .p2r-inset-a{width:46%;height:36%;left:0;right:auto;bottom:0;top:auto;clip-path:none;border:0;border-radius:10px !important}
  .r-v4 .p2r-inset-b{width:46%;height:36%;right:0;left:auto;bottom:0;top:auto;border:0;border-radius:10px !important}

  .r-v5 .p2r-hero{width:68%;height:100%;right:0;top:0;clip-path:none;border-radius:10px !important}
  .r-v5 .p2r-inset-a{width:28%;height:42%;left:4%;right:auto;bottom:4%;top:auto;clip-path:none;border:0;border-radius:10px !important}
  .r-v5 .p2r-inset-b{width:28%;height:42%;left:4%;right:auto;top:4%;border:0;border-radius:10px !important}

  /* -- Single-photo left page: for the 4-photo product template, the
     text page carries just ONE photo instead of the usual rect+square
     pair. -- */
  .g-single{display:block}
  .g-single .t-rect{width:100%;height:100%;border-radius:10px !important}
  .g-single .t-square{display:none}

  /* -- Right-side gallery, two-row grid: for the 4-photo product
     template's gallery page (three photos, two rows — no diagonal
     hero/inset composition). r-v4 (above) already gives "one photo on
     top, two side-by-side on the bottom"; r-v6 below is its mirror,
     "two side-by-side on top, one photo on the bottom". -- */
  .r-v6 .p2r-hero{width:49%;height:36%;top:0;left:0;right:auto;clip-path:none;border-radius:10px !important}
  .r-v6 .p2r-inset-a{width:49%;height:36%;top:0;right:0;left:auto;bottom:auto;clip-path:none;border:0;border-radius:10px !important}
  .r-v6 .p2r-inset-b{width:100%;height:58%;bottom:0;top:auto;left:0;right:auto;clip-path:none;border:0;border-radius:10px !important}
}
/* phone-spread copy of the min-width block above */

  :where(html.bap-phone) .g-v1{display:grid;grid-template-columns:1.45fr .85fr;gap:10px}
  :where(html.bap-phone) .g-v1 .t-rect,
:where(html.bap-phone) .g-v1 .t-square{height:100%}

  :where(html.bap-phone) .g-v2{display:grid;grid-template-columns:1fr 1.15fr;gap:10px}
  :where(html.bap-phone) .g-v2 .t-rect,
:where(html.bap-phone) .g-v2 .t-square{height:100%;border-radius:10px !important}

  :where(html.bap-phone) .g-v3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  :where(html.bap-phone) .g-v3 .t-rect,
:where(html.bap-phone) .g-v3 .t-square{height:100%;border-radius:10px !important}

  :where(html.bap-phone) .g-v4{display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
  :where(html.bap-phone) .g-v4 .t-rect,
:where(html.bap-phone) .g-v4 .t-square{
    position:relative !important;left:auto !important;bottom:auto !important;
    width:auto !important;height:100% !important;
    border-radius:10px !important;box-shadow:none !important;
  }

  :where(html.bap-phone) .g-v5{display:grid;grid-template-columns:.85fr 1.45fr;gap:10px}
  :where(html.bap-phone) .g-v5 .t-rect,
:where(html.bap-phone) .g-v5 .t-square{height:100%;border-radius:10px !important}

  /* Right-side galleries: no circles, no ultra-thin vertical insets. */
  :where(html.bap-phone) .r-v1 .p2r-hero{width:72%;height:100%;right:0;top:0;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v1 .p2r-inset-a{width:24%;height:46%;left:3%;right:auto;bottom:4%;clip-path:none;border:0;border-radius:10px !important}
  :where(html.bap-phone) .r-v1 .p2r-inset-b{width:24%;height:42%;left:3%;top:4%;border:0;border-radius:10px !important}

  :where(html.bap-phone) .r-v2 .p2r-hero{width:60%;height:100%;left:auto;right:0;top:0;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v2 .p2r-inset-a{width:34%;height:44%;left:4%;right:auto;bottom:4%;top:auto;clip-path:none;border:0;border-radius:10px !important}
  :where(html.bap-phone) .r-v2 .p2r-inset-b{width:34%;height:44%;left:4%;right:auto;top:4%;border:0;border-radius:10px !important}

  :where(html.bap-phone) .r-v3 .p2r-hero{width:100%;height:62%;right:0;top:0;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v3 .p2r-inset-a{width:47%;height:31%;left:0;right:auto;bottom:2%;top:auto;clip-path:none;border:0;border-radius:10px !important}
  :where(html.bap-phone) .r-v3 .p2r-inset-b{display:block;width:47%;height:31%;right:0;left:auto;top:auto;bottom:2%;border:0;border-radius:10px !important}

  :where(html.bap-phone) .r-v4 .p2r-hero{width:100%;height:58%;top:0;right:0;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v4 .p2r-inset-a{width:46%;height:36%;left:0;right:auto;bottom:0;top:auto;clip-path:none;border:0;border-radius:10px !important}
  :where(html.bap-phone) .r-v4 .p2r-inset-b{width:46%;height:36%;right:0;left:auto;bottom:0;top:auto;border:0;border-radius:10px !important}

  :where(html.bap-phone) .r-v5 .p2r-hero{width:68%;height:100%;right:0;top:0;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v5 .p2r-inset-a{width:28%;height:42%;left:4%;right:auto;bottom:4%;top:auto;clip-path:none;border:0;border-radius:10px !important}
  :where(html.bap-phone) .r-v5 .p2r-inset-b{width:28%;height:42%;left:4%;right:auto;top:4%;border:0;border-radius:10px !important}

  /* -- Single-photo left page: for the 4-photo product template, the
     text page carries just ONE photo instead of the usual rect+square
     pair. -- */
  :where(html.bap-phone) .g-single{display:block}
  :where(html.bap-phone) .g-single .t-rect{width:100%;height:100%;border-radius:10px !important}
  :where(html.bap-phone) .g-single .t-square{display:none}

  /* -- Right-side gallery, two-row grid: for the 4-photo product
     template's gallery page (three photos, two rows — no diagonal
     hero/inset composition). r-v4 (above) already gives "one photo on
     top, two side-by-side on the bottom"; r-v6 below is its mirror,
     "two side-by-side on top, one photo on the bottom". -- */
  :where(html.bap-phone) .r-v6 .p2r-hero{width:49%;height:36%;top:0;left:0;right:auto;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v6 .p2r-inset-a{width:49%;height:36%;top:0;right:0;left:auto;bottom:auto;clip-path:none;border:0;border-radius:10px !important}
  :where(html.bap-phone) .r-v6 .p2r-inset-b{width:100%;height:58%;bottom:0;top:auto;left:0;right:auto;clip-path:none;border:0;border-radius:10px !important}


/* Section openers */
.section-cover{
  position:relative;width:100%;height:100%;overflow:hidden;
  color:#fff;background:var(--navy);
}
.section-cover>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;
}
.section-cover-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,17,39,.82) 0%,rgba(8,17,39,.42) 48%,rgba(8,17,39,.08) 100%);
}
.section-cover-top{
  position:absolute;top:30px;left:34px;right:34px;
  display:flex;align-items:center;justify-content:space-between;z-index:2;
}
.section-cover-eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;direction:ltr;
  background:var(--gold);color:var(--navy-deep);
  padding:6px 14px 6px 16px;border-radius:100px;flex:none;
}
.section-cover-number{
  font-family:var(--mono);font-size:52px;line-height:1;color:rgba(255,255,255,.25);
}
.section-cover-content{
  position:absolute;z-index:2;left:38px;right:38px;bottom:92px;
  max-width:72%;
}
.section-cover-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--gold);margin-bottom:12px;
}
.section-cover-content h1{
  margin:0;font-size:48px;line-height:1.05;font-weight:900;letter-spacing:-.035em;
}
.section-cover-en{
  margin-top:8px;font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:rgba(255,255,255,.78);
}
.section-cover-rule{width:64px;height:3px;background:var(--gold);margin:20px 0 14px}
.section-cover-content p{
  margin:0;max-width:480px;font-size:12px;line-height:2;color:rgba(255,255,255,.82);
}
.section-cover-bottom{
  position:absolute;z-index:2;left:38px;right:38px;bottom:28px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.2);
  display:flex;justify-content:space-between;font-family:var(--label);font-size:9px;color:rgba(255,255,255,.58);
}

/* Facing-page section overview: image mosaic + copy, deliberately
   different from the product spread templates. */
.section-intro{
  position:relative;width:100%;height:100%;background:var(--cream);
  display:grid;grid-template-columns:42% 58%;overflow:hidden;
}
.section-intro-copy{
  padding:54px 32px 44px 34px;display:flex;flex-direction:column;justify-content:center;
}
.section-intro-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--gold);font-weight:600;
}
.section-intro-copy h2{
  margin:12px 0 0;color:var(--navy);font-size:28px;line-height:1.1;font-weight:900;
}
.section-intro-en{
  margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--ink-40);letter-spacing:.04em;
}
.section-intro-copy p{
  margin:18px 0 0;font-size:11.5px;line-height:2;color:var(--ink-70);
}
.section-intro-points{
  list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;
}
.section-intro-points li{
  position:relative;padding-right:16px;font-size:10.5px;color:var(--ink);font-weight:600;
}
.section-intro-points li::before{
  content:"";position:absolute;right:0;top:7px;width:6px;height:6px;background:var(--gold);
}
.section-intro-gallery{
  padding:38px 34px 46px 10px;display:grid;
  grid-template-columns:1.35fr .65fr;grid-template-rows:1fr 1fr;gap:10px;
}
.section-intro-img{
  margin:0;overflow:hidden;border-radius:8px;background:#ddd;min-height:0;
}
.section-intro-img img{width:100%;height:100%;object-fit:cover;display:block}
.section-intro-img.img-1{grid-row:1 / span 2}
.section-intro-img.img-2{grid-column:2;grid-row:1}
.section-intro-img.img-3{grid-column:2;grid-row:2}
.section-intro-folio{
  position:absolute;bottom:18px;right:34px;font-family:var(--mono);font-size:8.5px;color:var(--ink-40);
}

/* Page 2 / inside-front: photograph is a side panel, never a full-page
   background, leaving a clean text field beside it. */
.pg-body-intro-side{
  display:grid !important;
  grid-template-columns:50% 50%;
  align-items:stretch !important;
  height:100% !important;
  gap:0;
  padding:0 !important;
  overflow:hidden;
}
.pg-intro-photo{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:0 18px 18px 0;
  order:1;
}
.pg-intro-copy{
  order:2;display:flex;flex-direction:column;justify-content:center;
  padding:38px 30px 46px 34px;
}
.pg-intro-copy .pg-title{font-size:24px}
.pg-intro-copy .pg-title span{color:var(--gold)}
.pg-intro-copy .pg-tagline{max-width:none}
.pg-intro-copy .pull-quote{
  margin-top:24px;max-width:310px;padding-right:14px;border-right:3px solid var(--gold);
}

/* Keep all catalog photography rectangular. UI dots/nav controls are
   intentionally excluded because they are controls, not photographs. */
.p2-gallery .p2-tile,
.pg2r-stage .p2r-hero,
.pg2r-stage .p2r-inset-a,
.pg2r-stage .p2r-inset-b,
.section-intro-img{
  border-radius:10px !important;
}


/* ---------- Villa product: full-spread photo pages ---------- */
.villa-spread-page{
  background:#0b1734;
}
.villa-spread-page .bap-page-face{
  background:#0b1734;
}
.villa-spread-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0b1734;
}
.villa-spread-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Split the page54-55 panoramic image across the two facing pages.
   Right page shows the right half; left page shows the left half. */
.villa-spread-photo img.spread-half-right,
.villa-spread-photo img.spread-half-left{
  width:200%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}
.villa-spread-photo img.spread-half-right{
  transform:translateX(-50%);
}
.villa-spread-photo img.spread-half-left{
  transform:translateX(0);
}

/* حذف کامل شماره‌صفحه‌های نشان‌داده‌شده داخل نشان‌های دندانه‌ای صفحات چپ */
.pg2r-badges { display: none !important; }

/* ===========================================================
   MOBILE EDITION — single-page portrait reading
   The desktop two-page editorial spread remains unchanged.
   On phones the book becomes a true portrait page, sized to the
   available viewport so no text, image or control is clipped.
   =========================================================== */
@media (max-width:760px){
  html:where(:not(.bap-phone)),
:where(html:not(.bap-phone)) body{width:100%;height:100%;overflow:hidden}
  :where(html:not(.bap-phone)) body.bap-catalog-body{min-height:100dvh}
  :where(html:not(.bap-phone)) .bap-app{height:100dvh;min-height:0}

  :where(html:not(.bap-phone)) .bap-topbar{
    min-height:52px;
    padding:8px 10px;
    gap:8px;
  }
  :where(html:not(.bap-phone)) .bap-brand{gap:7px}
  :where(html:not(.bap-phone)) .bap-brand-mark{height:30px;padding:4px 8px;border-radius:8px}
  :where(html:not(.bap-phone)) .bap-topbar-actions{gap:4px;flex-wrap:nowrap}
  :where(html:not(.bap-phone)) .bap-icon-btn{width:32px;height:32px;border-radius:9px}
  :where(html:not(.bap-phone)) .bap-goto input{width:38px!important;height:30px!important}

  :where(html:not(.bap-phone)) .bap-stage{
    padding:4px 0 4px;
    min-height:0;
    overflow:hidden;
  }
  :where(html:not(.bap-phone)) .bap-book-mirror{
    width:min(92vw, calc(76dvh * .711009));
    height:min(76dvh, calc(92vw / .711009));
    max-width:620px;
    max-height:872px;
    flex:none;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.42));
  }
  :where(html:not(.bap-phone)) #bap-book{width:100%;height:100%}

  /* Make every mobile page use the same portrait proportions as the
     source artwork instead of stretching the desktop spread ratio. */
  :where(html:not(.bap-phone)) .bap-page-face{width:100%;height:100%}
  :where(html:not(.bap-phone)) .pg{padding:20px 17px 15px}
  :where(html:not(.bap-phone)) .pg-title{line-height:1.2}
  :where(html:not(.bap-phone)) .pg-body{min-height:0}
  :where(html:not(.bap-phone)) .pg-foot{font-size:8px}

  /* Give dense product pages enough vertical room while keeping all
     content inside the phone viewport. */
  :where(html:not(.bap-phone)) .prod2-body{min-height:0;overflow:hidden}
  :where(html:not(.bap-phone)) .p2-gallery{height:104px!important;min-height:104px;flex:none}
  :where(html:not(.bap-phone)) .p2-lists{min-height:0}
  :where(html:not(.bap-phone)) .p2-col{font-size:9px;line-height:1.8}
  :where(html:not(.bap-phone)) .p2-title{font-size:17px;line-height:1.25}
  :where(html:not(.bap-phone)) .p2r-name{font-size:12px}

  :where(html:not(.bap-phone)) .prod-photo{height:145px;margin-left:-17px;margin-right:-17px}
  :where(html:not(.bap-phone)) .prod-copy{font-size:10px;line-height:1.95}
  :where(html:not(.bap-phone)) .stat-grid{gap:6px}
  :where(html:not(.bap-phone)) .stat-card{padding:8px 7px}
  :where(html:not(.bap-phone)) .stat-card .stat-value{font-size:19px}
  :where(html:not(.bap-phone)) .stat-card .stat-label{font-size:8px}

  :where(html:not(.bap-phone)) .pg-body-intro-side{
    grid-template-columns:1fr!important;
    grid-template-rows:43% 57%;
    overflow:hidden;
  }
  :where(html:not(.bap-phone)) .pg-intro-photo{width:100%;height:100%;border-radius:0 0 14px 14px;order:1}
  :where(html:not(.bap-phone)) .pg-intro-copy{order:2;padding:18px 18px 22px;justify-content:center}
  :where(html:not(.bap-phone)) .pg-intro-copy .pg-title{font-size:21px}
  :where(html:not(.bap-phone)) .pg-intro-copy .pg-tagline{max-width:none;font-size:9.5px;line-height:1.9}
  :where(html:not(.bap-phone)) .pg-intro-copy .pull-quote{margin-top:12px;max-width:none;font-size:10px}

  :where(html:not(.bap-phone)) .bap-nav-btn{width:34px;height:34px;opacity:.88}
  :where(html:not(.bap-phone)) .bap-nav-btn.prev{right:3px}
  :where(html:not(.bap-phone)) .bap-nav-btn.next{left:3px}
  :where(html:not(.bap-phone)) .bap-nav-btn svg{width:15px;height:15px}

  :where(html:not(.bap-phone)) .bap-bottombar{
    min-height:34px;
    padding:5px 12px 8px;
    gap:9px;
    font-size:9px;
  }
  :where(html:not(.bap-phone)) .bap-progress-track{width:min(180px,48vw);height:2px}

  :where(html:not(.bap-phone)) .bap-pages-panel{width:min(230px,86vw)}
  :where(html:not(.bap-phone)) .bap-pages-scroll{padding:12px}

  /* Prevent technical sheets and full-bleed photography from being
     accidentally cropped on narrow portrait screens. */
  :where(html:not(.bap-phone)) .is-diagram{padding:5%}
  :where(html:not(.bap-phone)) .is-diagram img{object-fit:contain!important}
  :where(html:not(.bap-phone)) .villa-spread-photo img{object-fit:cover}
}

/* Very narrow phones: reduce controls before reducing catalog content. */
@media (max-width:390px){
  :where(html:not(.bap-phone)) .bap-topbar{padding-left:7px;padding-right:7px}
  :where(html:not(.bap-phone)) .bap-brand-mark{height:28px}
  :where(html:not(.bap-phone)) .bap-icon-btn{width:30px;height:30px}
  :where(html:not(.bap-phone)) .bap-goto input{width:34px!important}
  :where(html:not(.bap-phone)) .pg{padding-left:14px;padding-right:14px}
  :where(html:not(.bap-phone)) .prod-photo{margin-left:-14px;margin-right:-14px}
}

/* ===========================================================
   MOBILE — PRESERVE THE DESKTOP PHOTO COMPOSITIONS
   Product gallery pages must keep all three photos visible.
   The mobile edition changes the page canvas size only; it does
   not remove/rearrange the editorial photo composition.
   =========================================================== */
@media (max-width:760px){
  /* Never hide the third photo on product gallery pages. */
  :where(html:not(.bap-phone)) .pg2r-stage .p2r-inset-b{display:block !important}

  /* Keep the same three-photo compositions used by desktop. */
  :where(html:not(.bap-phone)) .r-v1 .p2r-hero{width:72%;height:100%;right:0;top:0;left:auto;clip-path:none}
  :where(html:not(.bap-phone)) .r-v1 .p2r-inset-a{width:24%;height:46%;left:3%;right:auto;bottom:4%;top:auto;clip-path:none;border:0}
  :where(html:not(.bap-phone)) .r-v1 .p2r-inset-b{width:24%;height:42%;left:3%;right:auto;top:4%;bottom:auto;border:0}

  :where(html:not(.bap-phone)) .r-v2 .p2r-hero{width:60%;height:100%;left:auto;right:0;top:0;clip-path:none}
  :where(html:not(.bap-phone)) .r-v2 .p2r-inset-a{width:34%;height:44%;left:4%;right:auto;bottom:4%;top:auto;clip-path:none;border:0}
  :where(html:not(.bap-phone)) .r-v2 .p2r-inset-b{width:34%;height:44%;left:4%;right:auto;top:4%;bottom:auto;border:0}

  :where(html:not(.bap-phone)) .r-v3 .p2r-hero{width:100%;height:62%;right:0;top:0;clip-path:none}
  :where(html:not(.bap-phone)) .r-v3 .p2r-inset-a{width:47%;height:31%;left:0;right:auto;bottom:2%;top:auto;clip-path:none;border:0}
  :where(html:not(.bap-phone)) .r-v3 .p2r-inset-b{display:block !important;width:47%;height:31%;right:0;left:auto;top:auto;bottom:2%;border:0}

  :where(html:not(.bap-phone)) .r-v4 .p2r-hero{width:100%;height:58%;top:0;right:0;left:auto;clip-path:none}
  :where(html:not(.bap-phone)) .r-v4 .p2r-inset-a{width:46%;height:36%;left:0;right:auto;bottom:0;top:auto;clip-path:none;border:0}
  :where(html:not(.bap-phone)) .r-v4 .p2r-inset-b{width:46%;height:36%;right:0;left:auto;bottom:0;top:auto;border:0}

  :where(html:not(.bap-phone)) .r-v5 .p2r-hero{width:68%;height:100%;right:0;left:auto;top:0;clip-path:none}
  :where(html:not(.bap-phone)) .r-v5 .p2r-inset-a{width:28%;height:42%;left:4%;right:auto;bottom:4%;top:auto;clip-path:none;border:0}
  :where(html:not(.bap-phone)) .r-v5 .p2r-inset-b{display:block !important;width:28%;height:42%;left:4%;right:auto;top:4%;bottom:auto;border:0}

  :where(html:not(.bap-phone)) .r-v6 .p2r-hero{width:49%;height:36%;top:0;left:0;right:auto;clip-path:none}
  :where(html:not(.bap-phone)) .r-v6 .p2r-inset-a{width:49%;height:36%;top:0;right:0;left:auto;bottom:auto;clip-path:none;border:0}
  :where(html:not(.bap-phone)) .r-v6 .p2r-inset-b{display:block !important;width:100%;height:58%;bottom:0;top:auto;left:0;right:auto;clip-path:none;border:0}
}

/* Page 2 — Persian text alignment and management message */
.pg-intro-copy .pg-tagline{
  text-align:justify;
  text-justify:inter-word;
}
.management-message{
  text-align:right;
}
.management-message>b{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:800;
  color:var(--navy);
}
.management-message p{
  margin:0;
  font-size:12.5px;
  line-height:1.95;
  font-weight:500;
  text-align:justify;
  text-justify:inter-word;
}
.management-message small{
  text-align:right;
}
@media (max-width:600px){
  :where(html:not(.bap-phone)) .management-message>b{font-size:12px;margin-bottom:6px}
  :where(html:not(.bap-phone)) .management-message p{font-size:10px;line-height:1.9}
  :where(html:not(.bap-phone)) .management-message small{font-size:8.5px}
}


/* Page 3: horizontal mirror of the existing Page 2 intro layout. */
.pg-body-intro-mirror{direction:rtl;}
.pg-body-intro-mirror .pg-intro-copy{order:1;padding:30px 28px 32px 26px;}
.pg-body-intro-mirror .pg-intro-photo{order:2;border-radius:18px 0 0 18px;}
.pg-body-intro-mirror .intro-mirror-text{max-width:100%;margin-top:12px;color:var(--ink-70);font-size:12px;line-height:1.88;text-align:justify;text-justify:inter-word;}
.pg-body-intro-mirror .intro-mirror-text p{margin:0 0 10px;}
.pg-body-intro-mirror .intro-mirror-text p:last-child{margin-bottom:0;}
@media (max-width:760px){
  :where(html:not(.bap-phone)) .pg-body-intro-mirror .pg-intro-copy{order:2;padding:18px 18px 22px;}
  :where(html:not(.bap-phone)) .pg-body-intro-mirror .pg-intro-photo{order:1;border-radius:0 0 14px 14px;}
  :where(html:not(.bap-phone)) .pg-body-intro-mirror .intro-mirror-text{font-size:9.5px;line-height:1.9;}
  :where(html:not(.bap-phone)) .pg-body-intro-mirror .intro-mirror-text p{margin-bottom:8px;}
}

/* Final fit adjustment — keep the management message fully visible on Page 2. */
.pg-intro-copy .management-message{
  margin-top:18px;
  padding:10px 12px 10px 13px;
  max-width:310px;
}
.pg-intro-copy .management-message>b{
  margin-bottom:5px;
  font-size:12.5px;
  line-height:1.4;
}
.pg-intro-copy .management-message p{
  font-size:10.5px;
  line-height:1.68;
  font-weight:500;
}
.pg-intro-copy .management-message small{
  margin-top:5px;
  font-size:8.5px;
  line-height:1.45;
}

@media (max-width:760px){
  :where(html:not(.bap-phone)) .pg-intro-copy .management-message{
    margin-top:9px;
    padding:8px 10px 8px 11px;
    max-width:none;
  }
  :where(html:not(.bap-phone)) .pg-intro-copy .management-message>b{
    margin-bottom:3px;
    font-size:10.5px;
  }
  :where(html:not(.bap-phone)) .pg-intro-copy .management-message p{
    font-size:8.8px;
    line-height:1.62;
  }
  :where(html:not(.bap-phone)) .pg-intro-copy .management-message small{
    margin-top:4px;
    font-size:7.5px;
    line-height:1.35;
  }
}

/* Intro spread: larger image field (60%) and compact readable text field (40%) on Pages 2–3. */
.pg-body-intro-side{grid-template-columns:40% 60%;}
.pg-body-intro-side .pg-intro-photo{width:100%;}
.pg-body-intro-side .pg-intro-copy{min-width:0;box-sizing:border-box;}
.pg-body-intro-side .intro-mirror-text{max-width:none;font-size:11px;line-height:1.78;margin-top:11px;}
.pg-body-intro-side .intro-mirror-text p{margin:0 0 11px;}
.pg-body-intro-mirror{grid-template-columns:60% 40%;}
@media (max-width:760px){
  :where(html:not(.bap-phone)) .pg-body-intro-side{grid-template-columns:40% 60%;}
  :where(html:not(.bap-phone)) .pg-body-intro-mirror{grid-template-columns:60% 40%;}
  :where(html:not(.bap-phone)) .pg-body-intro-side .intro-mirror-text{font-size:10px;line-height:1.78;}
}

/* Page 3 alignment: lift the entire text column slightly so its kicker aligns with Page 2. */
.pg-body-intro-mirror .pg-intro-copy{position:relative;top:-18px;}
@media (max-width:760px){:where(html:not(.bap-phone)) .pg-body-intro-mirror .pg-intro-copy{top:-8px;}}

.proj-slot{min-height:64px;border:1px dashed var(--paper-edge);border-radius:9px;padding:9px 10px;box-sizing:border-box;opacity:.72;}
.proj-slot-mark{width:64px;height:64px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;border:1px dashed var(--paper-edge);font-size:24px;font-weight:300;color:var(--bronze);}

/* Page 54-55 uses the exact same full-bleed split-photo logic as page 52-53:
   plain .villa-spread-photo / .villa-spread-photo img rules above (object-fit:cover,
   no gutter blur, no inset). No page-specific override needed. */

/* ===========================================================
   Extra villa pages (added later): two stacked photo+copy
   blocks on one page — for pages that need a photo paired
   with its own paragraph, twice, on the same page.
   =========================================================== */
.pg-copy2{display:flex;flex-direction:column;height:100%;gap:14px}
.pg-copy2-block{display:flex;gap:16px;align-items:center;flex:1;min-height:0}
.pg-copy2-block+.pg-copy2-block{padding-top:14px;border-top:1px solid var(--paper-edge)}
.pg-copy2-photo{flex:0 0 40%;height:100%;max-height:100%;border-radius:14px;overflow:hidden;position:relative}
.pg-copy2-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pg-copy2-text{flex:1;min-width:0}
.pg-copy2-text .kicker{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;color:var(--bronze);font-weight:700;margin-bottom:8px}
.pg-copy2-text .kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--bronze);flex:none}
.pg-copy2-text h2{margin:0 0 8px;font-size:17px;line-height:1.3;color:var(--navy)}
.pg-copy2-text p{margin:0;font-size:11px;line-height:1.82;color:var(--ink-70);text-align:justify;text-justify:inter-word}
@media (max-width:760px){
  :where(html:not(.bap-phone)) .pg-copy2-block{flex-direction:column;align-items:stretch}
  :where(html:not(.bap-phone)) .pg-copy2-photo{flex:0 0 auto;height:96px}
  :where(html:not(.bap-phone)) .pg-copy2-text h2{font-size:14px}
  :where(html:not(.bap-phone)) .pg-copy2-text p{font-size:9px;line-height:1.7}
}

/* Right-side gallery, hero + single inset (two photos only) —
   for supplementary gallery pages that only have two source
   photos instead of the usual three. */
@media (min-width:761px){
  .r-v7 .p2r-hero{width:100%;height:66%;top:0;left:0;right:auto;clip-path:none;border-radius:10px !important}
  .r-v7 .p2r-inset-a{width:100%;height:30%;bottom:0;top:auto;left:0;right:auto;clip-path:none;border:0;border-radius:10px !important}
}
/* phone-spread copy of the min-width block above */

  :where(html.bap-phone) .r-v7 .p2r-hero{width:100%;height:66%;top:0;left:0;right:auto;clip-path:none;border-radius:10px !important}
  :where(html.bap-phone) .r-v7 .p2r-inset-a{width:100%;height:30%;bottom:0;top:auto;left:0;right:auto;clip-path:none;border:0;border-radius:10px !important}

.pg-copy2-photo.is-diagram{background:#fff;border:1px solid var(--paper-edge)}
.pg-copy2-photo.is-diagram img{object-fit:contain;padding:10px}

/* Single-column info page: title + paragraph, one large centered
   photo, then a second paragraph — no left/right split. */
.pg-copy1{display:flex;flex-direction:column;height:100%;min-height:0}
.pg-copy1 .kicker{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;color:var(--bronze);font-weight:700;margin-bottom:8px;flex:none}
.pg-copy1 .kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--bronze);flex:none}
.pg-copy1 h2{margin:0 0 10px;font-size:19px;line-height:1.3;color:var(--navy);flex:none}
.pg-copy1>p{margin:0;font-size:11.5px;line-height:1.82;color:var(--ink-70);text-align:justify;text-justify:inter-word;flex:none}
.pg-copy1>p:first-of-type{margin-bottom:14px}
.pg-copy1>p:last-of-type{margin-top:14px}
.pg-copy1-photo{flex:1;min-height:0;border-radius:14px;overflow:hidden;position:relative}
.pg-copy1-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  :where(html:not(.bap-phone)) .pg-copy1 h2{font-size:14px}
  :where(html:not(.bap-phone)) .pg-copy1>p{font-size:9px;line-height:1.7}
  :where(html:not(.bap-phone)) .pg-copy1-photo{min-height:90px}
}

/* .pg-copy1-photo variant that shows the WHOLE image, uncropped
   (object-fit:contain) with only a thin neutral margin — no heavy
   framed/patterned border like .is-diagram. */
.pg-copy1-photo.is-contain{background:var(--offwhite)}
.pg-copy1-photo.is-contain img{object-fit:contain;padding:2%}

/* ===========================================================
   MOBILE / TABLET FIT — use the complete stage height
   The desktop layout is intentionally untouched.
   =========================================================== */
@media (max-width:760px){
  :where(html:not(.bap-phone)) .bap-stage{
    padding:2px 0 2px;
  }

  /* The stage already excludes the top and bottom bars because it is
     the flex:1 region. Let the book consume that entire remaining
     height instead of using a fixed percentage of the viewport. */
  :where(html:not(.bap-phone)) .bap-book-mirror{
    height:100%;
    width:auto;
    aspect-ratio:620 / 872;
    max-height:100%;
    max-width:100%;
    flex:0 1 auto;
  }

  :where(html:not(.bap-phone)) #bap-book{
    width:100%;
    height:100%;
  }

  /* Keep page content inside the now-larger portrait canvas. */
  :where(html:not(.bap-phone)) .bap-page-face,
:where(html:not(.bap-phone)) .pg,
:where(html:not(.bap-phone)) .pg-body,
:where(html:not(.bap-phone)) .pg-prod2-left,
:where(html:not(.bap-phone)) .pg2r{
    min-height:0;
  }

  /* Page 54: preserve the exact desktop two-photo composition on mobile.
     Only the canvas changes to portrait; the photo arrangement does not. */
  :where(html:not(.bap-phone)) .r-v7 .p2r-hero{
    width:100%;
    height:66%;
    top:0;
    left:0;
    right:auto;
    clip-path:none;
    border-radius:10px !important;
  }
  :where(html:not(.bap-phone)) .r-v7 .p2r-inset-a{
    width:100%;
    height:30%;
    bottom:0;
    top:auto;
    left:0;
    right:auto;
    clip-path:none;
    border:0;
    border-radius:10px !important;
  }
}

/* Tablet portrait-fit: when the book has switched to a single page,
   consume the full vertical space available between the two bars. */
@media (min-width:761px) and (max-width:900px){
  :where(html:not(.bap-phone)) .bap-stage{
    padding:2px 0 2px;
  }
  :where(html:not(.bap-phone)) .bap-book-mirror{
    height:100%;
    width:auto;
    aspect-ratio:620 / 872;
    max-height:100%;
    max-width:100%;
    flex:0 1 auto;
  }
  :where(html:not(.bap-phone)) #bap-book{width:100%;height:100%}
}

/* ===========================================================
   MOBILE FULL-SCREEN PAGE (phones only, max-width:760px)
   The single portrait page now fills the whole area between the
   top bar and the bottom bar — edge to edge in width and height.
   The page ratio is matched to this area in catalog-init.js, so
   pages are taller than before and nothing is cut off at the
   bottom. Desktop (>760px) is untouched.
   =========================================================== */
@media (max-width:760px){
  :where(html:not(.bap-phone)) .bap-stage{
    padding:0;
    overflow:hidden;
  }
  :where(html:not(.bap-phone)) .bap-book-mirror{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    aspect-ratio:auto;
    flex:1 1 auto;
    filter:none;
  }
  :where(html:not(.bap-phone)) #bap-book{width:100%;height:100%}
}

/* Product pages (phones): the page is now as tall as the screen, so the
   photo gallery is released from its fixed 104px and takes the free
   height (the same flex:1 behaviour the desktop design uses). The text
   lists keep their natural height and stay fully visible. */
@media (max-width:760px){
  :where(html:not(.bap-phone)) .prod2-body{display:flex;flex-direction:column}
  :where(html:not(.bap-phone)) .prod2-body .p2-gallery{
    flex:1 1 0!important;
    height:auto!important;
    min-height:104px;
    max-height:none;
  }
  :where(html:not(.bap-phone)) .prod2-body .p2-lists{flex:none}
}

/* Phones: let the script handle every swipe on the page (no browser
   scrolling / pull-to-refresh fighting the page turn). Desktop untouched. */
@media (max-width:760px){
  html:where(:not(.bap-phone)),
:where(html:not(.bap-phone)) body{overscroll-behavior:none}
  :where(html:not(.bap-phone)) .bap-book-mirror,
:where(html:not(.bap-phone)) .bap-book-mirror .stf__parent,
:where(html:not(.bap-phone)) .bap-book-mirror .stf__block,
:where(html:not(.bap-phone)) .bap-book-mirror .stf__item{touch-action:none}
}


/* ===========================================================
   PHONE SPREAD MODE  (html.bap-phone)
   -----------------------------------------------------------
   On phones the catalog is shown exactly like the desktop
   two-page spread. In portrait the whole app is rotated 90°
   (the reader simply turns the phone sideways); in landscape
   it is shown as-is. The book is laid out at a fixed "design"
   size and scaled (CSS transform) to use the full screen.
   All single-page mobile rules above are switched off by the
   :where(html:not(.bap-phone)) gate, so desktop layouts apply.
   Variables are written by js/catalog-init.js (layoutPhone).
   =========================================================== */
html.bap-phone,
html.bap-phone body.bap-catalog-body{
  width:100%;height:100%;min-height:0;overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  background:#0c1839;
}
html.bap-phone input{-webkit-user-select:text;user-select:text}

html.bap-phone .bap-app{
  position:fixed;left:0;top:0;
  width:var(--bap-lw,100vw);height:var(--bap-lh,100vh);
  transform-origin:0 0;
  overflow:hidden;
  display:block;
  background:radial-gradient(900px 500px at 50% -10%, #1a2c63 0%, #0c1839 60%, #08122b 100%);
}

/* Stage = the whole safe screen; the book is centred in it. */
html.bap-phone .bap-stage{
  position:absolute;inset:0;
  padding:var(--bap-sa-t,0px) var(--bap-sa-r,0px) var(--bap-sa-b,0px) var(--bap-sa-l,0px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;min-height:0;
}
html.bap-phone .bap-book-mirror{
  flex:none;
  width:var(--bap-bw,1100px);height:var(--bap-bh,600px);
  max-width:none;max-height:none;aspect-ratio:auto;
  transform:scaleX(-1) scale(var(--bap-s,1));
  transform-origin:50% 50%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
html.bap-phone #bap-book{width:100%;height:100%}

/* Controls: hidden until the reader taps the page. */
html.bap-phone .bap-topbar{
  position:absolute;left:0;right:0;top:0;z-index:40;
  min-height:0;gap:8px;
  padding:calc(var(--bap-sa-t,0px) + 5px) calc(var(--bap-sa-r,0px) + 10px) 8px calc(var(--bap-sa-l,0px) + 10px);
  background:linear-gradient(180deg, rgba(12,24,57,.97), rgba(12,24,57,.82));
  transform:translateY(-105%);opacity:0;pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}
html.bap-phone.bap-chrome .bap-topbar{transform:none;opacity:1;pointer-events:auto}
html.bap-phone .bap-brand-text{display:none}
html.bap-phone .bap-brand-mark{height:28px;padding:4px 8px;border-radius:8px}
html.bap-phone .bap-topbar-actions{gap:6px;flex-wrap:nowrap}
html.bap-phone .bap-icon-btn{width:34px;height:34px;border-radius:9px}
html.bap-phone .bap-goto input{width:42px;height:34px}
html.bap-phone .bap-icon-btn[hidden]{display:none}

/* Slim reading-progress line + counter (counter only with controls). */
html.bap-phone .bap-bottombar{
  position:absolute;left:0;right:0;bottom:0;z-index:35;
  display:block;min-height:0;padding:0;gap:0;
  pointer-events:none;
}
html.bap-phone .bap-bottombar > span{display:none}
html.bap-phone .bap-bottombar > #bap-page-counter{
  position:absolute;left:50%;bottom:calc(var(--bap-sa-b,0px) + 8px);
  transform:translateX(-50%) translateY(6px);
  display:block;opacity:0;white-space:nowrap;
  background:rgba(12,24,57,.85);color:#fff;
  padding:3px 12px;border-radius:100px;font-size:11px;
  transition:opacity .25s ease, transform .25s ease;
}
html.bap-phone.bap-chrome .bap-bottombar > #bap-page-counter{opacity:1;transform:translateX(-50%)}
html.bap-phone .bap-progress-track{
  position:absolute;left:0;right:0;bottom:0;
  width:auto;height:3px;border-radius:0;
  background:rgba(255,255,255,.10);
}

/* Page-turn arrows: small, tucked against the screen edges. */
html.bap-phone .bap-nav-btn{
  width:30px;height:30px;opacity:.5;z-index:30;
  background:rgba(12,24,57,.6);
}
html.bap-phone .bap-nav-btn:active{opacity:1}
html.bap-phone .bap-nav-btn svg{width:15px;height:15px}
html.bap-phone .bap-nav-btn.prev{right:calc(var(--bap-sa-r,0px) + 2px)}
html.bap-phone .bap-nav-btn.next{left:calc(var(--bap-sa-l,0px) + 2px)}

html.bap-phone .bap-hint{
  bottom:calc(var(--bap-sa-b,0px) + 12px);
  font-size:11px;padding:6px 14px;max-width:80%;text-align:center;white-space:nowrap;
  z-index:38;
}

/* Thumbnail drawer lives inside the (rotated) app. */
html.bap-phone .bap-pages-backdrop{position:absolute;inset:0}
html.bap-phone .bap-pages-panel{
  position:absolute;top:0;right:0;height:100%;
  width:min(210px,42%);
  padding:var(--bap-sa-t,0px) var(--bap-sa-r,0px) var(--bap-sa-b,0px) 0;
}
html.bap-phone .bap-pages-scroll{touch-action:pan-y;overscroll-behavior:contain}
html.bap-phone.bap-rotated .bap-pages-scroll{touch-action:none}  /* scrolled by JS in logical space */

/* Phone spread: the quality page (certificates + QC photo strip) is the
   tallest page; trim it slightly so it fits the shorter phone page. */
html.bap-phone .bap-page[data-index="65"] .cert-card img{height:86px;padding:6px}
html.bap-phone .bap-page[data-index="65"] .qc-strip{margin-top:10px}
html.bap-phone .bap-page[data-index="65"] .qc-strip figure{height:100px}

/* The two-page toggle / rotate buttons use the `hidden` attribute (touch phones only). */
.bap-icon-btn[hidden]{display:none!important}