/* ==========================================================================
   THE LINK — FOREVER YOUNG · phone layout
   Loaded with media="(max-width: 820px)" (see index.html).

   The desktop deck is a fixed 1920×1080 canvas scaled to fit the window. Here the canvas is
   dropped: the stage fills the screen and every slide becomes a page that scrolls vertically.
   Columns stack, grids reflow, type is sized for reading at arm's length.
   Swipe left / right (or use the bottom arrows) to change slide; tap an image to enlarge it.
   Several desktop rules are set inline in index.html, hence the !important flags below.
   ========================================================================== */

:root {
  --pad-x: 20px;
  --radius: 14px;
  --bar-t: 52px;                                    /* room for the top bar */
  --bar-b: calc(82px + env(safe-area-inset-bottom)); /* room for the bottom bar */
  --top-safe: env(safe-area-inset-top);
}

html, body { overscroll-behavior: none; touch-action: manipulation; }

/* blur compositing and long zoom animations are expensive on phone GPUs */
.cap, .badge360, .plan-inset, .navbtn, .tour .hintpill, .tour .toolbtn, .chrome .dl, .lightbox .lb-close, .menu .m-close { backdrop-filter: none; -webkit-backdrop-filter: none; }
.cap { background: rgba(10, 12, 17, .84); }
.plan-inset { background: rgba(10, 12, 17, .9); }
.slide.is-active .kb img { animation: none; }
.fig.zoom:active img { transform: none; }

/* ---------- shell: no canvas, no scaling ---------- */
.stage {
  position: fixed;
  inset: 0;
  left: 0; top: 0;
  width: 100%; height: 100%;
  height: 100dvh;   /* follows the phone's address bar as it shows and hides */
  transform: none;
}
.slide {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-padding-top: calc(var(--bar-t) + var(--top-safe) + 16px);
  scroll-padding-bottom: calc(var(--bar-b) + 16px);
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slide::-webkit-scrollbar { display: none; }
.pad {
  position: relative;
  inset: auto;
  min-height: 100%;
  padding: calc(var(--bar-t) + var(--top-safe) + 22px) var(--pad-x) calc(var(--bar-b) + 26px);
}
.slide.tour, .slide.cover { overflow: hidden; }

/* ---------- chrome: slim top bar, thumb-reach bottom bar ---------- */
.chrome::before, .chrome::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.chrome::before { top: 0; height: calc(var(--bar-t) + var(--top-safe) + 24px); background: linear-gradient(180deg, rgba(10, 12, 17, .94) 38%, rgba(10, 12, 17, 0)); }
.chrome::after { bottom: 0; height: calc(var(--bar-b) + 34px); background: linear-gradient(0deg, rgba(10, 12, 17, .97) 42%, rgba(10, 12, 17, 0)); }
.stage[data-chrome="off"] .chrome::before { opacity: 0; }

.chrome .top { left: 16px; right: 66px; top: calc(16px + var(--top-safe)); z-index: 1; font-size: 10px; letter-spacing: .1em; gap: 10px; }
.chrome .top .mark { font-size: 0; gap: 0; flex: none; }          /* only the gradient dash: the section name is what helps here */
.chrome .top .mark i { width: 26px; height: 3px; }
.chrome .top .section { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.chrome .top .section b { font-weight: 700; }
.chrome .dl { top: calc(7px + var(--top-safe)); right: 10px; width: 44px; height: 44px; z-index: 1; opacity: 1 !important; }
.chrome .dl svg { width: 21px; height: 21px; }
.chrome .brandline { display: none; }
.chrome .progress { height: 3px; z-index: 2; }

.stage .chrome .navbtn, .stage.is-idle .chrome .navbtn {
  opacity: 1 !important;
  width: 50px; height: 50px;
  margin: 0;
  top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(20, 23, 31, .86);
  border-color: rgba(255, 255, 255, .22);
  z-index: 1;
}
.chrome .navbtn.prev { left: 16px; }
.chrome .navbtn.next { right: 16px; }
.chrome .counter,
.stage[data-chrome="off"] .chrome .counter {
  left: 50%; right: auto;
  transform: translateX(-50%);
  bottom: calc(26px + env(safe-area-inset-bottom));
  padding: 12px 22px;
  font-size: 14px;
  opacity: 1;
  z-index: 1;
}

/* ---------- type ---------- */
.eyebrow { font-size: 12px; gap: 10px; margin: 0 0 16px; letter-spacing: .16em; }
.eyebrow::before { width: 26px; height: 2px; }
.h2 { font-size: 32px; line-height: 1.12; letter-spacing: -.02em; }
.h2.md { font-size: 29px; }
.h2.sm { font-size: 25px; }
.lead { font-size: 19px; line-height: 1.45; }
.body { font-size: 16px; line-height: 1.55; }
.body + .body, .lead + .body, .body + .lead { margin-top: 12px; }
.small { font-size: 14.5px; }
.key { font-size: 20px !important; margin-top: 22px; padding-left: 16px; border-left-width: 3px; }
.key.grad { padding-left: 0; }
.list { gap: 11px; }
.list li { font-size: 16px !important; padding-left: 30px; line-height: 1.45; }
.list li::before { top: 8px; width: 11px; height: 11px; }
.list.check li::before { top: 2px; width: 22px; height: 22px; font-size: 13px; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 28px; }
.w-780, .w-900, .w-1100, .w-1400 { max-width: none; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px !important; margin: 22px 0 0; }
.stat .n { font-size: 40px; }
.stat .l { font-size: 13px; margin-top: 6px; max-width: none; line-height: 1.3; }
.chips { gap: 8px; }
.chip { font-size: 14px; padding: 9px 14px; }
.cap { font-size: 11px; padding: 6px 11px 6px 10px; left: 10px; bottom: 10px; gap: 7px; max-width: calc(100% - 20px); line-height: 1.25; }
.cap::before { width: 6px; height: 6px; flex: none; }
.gal.g13 > .fig:not(:first-child) .cap, .pair.tf .cap, .pair.strm .cap, .gal.bento5 > .fig:nth-child(n+4) .cap { display: none; }  /* too small to carry a label; tap the picture for it */

/* ---------- layout primitives ---------- */
.split, .split.l35, .split.l40, .split.l45, .split.l55, .split.roof {
  display: flex;
  flex-direction: column;
  gap: 26px !important;
  height: auto;
  align-items: stretch;
}
.col, .col.fill, .fill { height: auto; min-width: 0; }
.stack { display: block; height: auto; }
.stack > .grow { flex: none; }
.head-row { display: block; margin-bottom: 20px; }
.head-row .aside { max-width: none; width: auto !important; margin-top: 14px; }
.head-row .h2 { max-width: none; }
.fig { box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line); }
.fig.fill, .col.fill > .fig { height: auto; aspect-ratio: 4 / 3; width: 100%; }

/* galleries: a hero picture, then the rest in a grid */
.gal {
  display: grid;
  height: auto;
  gap: 10px;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto;
}
.gal > * { grid-column: auto !important; grid-row: auto !important; min-height: 0; }
.gal > :first-child { grid-column: 1 / -1 !important; }
.gal > .fig { aspect-ratio: 4 / 3; height: auto; }
.gal > .fig:first-child { aspect-ratio: 16 / 10; }
.gal > .ccard { height: auto; aspect-ratio: 3 / 4.3; }
.gal.g13 { grid-template-columns: repeat(3, 1fr) !important; }
.gal.g13 > :first-child { grid-column: 1 / -1 !important; }
.gal.g13 > .fig:not(:first-child) { aspect-ratio: 1 / 1; }
.gal.g12 > .fig:first-child { aspect-ratio: 16 / 10; }
.gal.g22 > .fig:first-child { grid-column: auto !important; aspect-ratio: 4 / 3; }
.fig.zoom:hover img { transform: none; }

/* ---------- cover and closing ---------- */
.cover .pano-bg { pointer-events: none; }                         /* swipes change slide here, the room turns by itself */
.cover .lockup { left: var(--pad-x); right: var(--pad-x); width: auto; top: 44%; }
.cover .presents { font-size: 12px; gap: 12px; letter-spacing: .24em; }
.cover .presents img { height: 54px; }
.cover .logo { width: min(66%, 270px); margin: 20px 0 16px -8px; }
.cover .tag { font-size: 24px; }
.cover .since { font-size: 15px; margin-top: 12px; }
.cover .hint { left: var(--pad-x); right: var(--pad-x); bottom: calc(var(--bar-b) + 12px); font-size: 12px; gap: 12px; }
.cover .hint span:first-child { font-size: 0; }
.cover .hint span:first-child::after { content: "Swipe or tap › to begin"; font-size: 12px; }
.cover .hint span:last-child { display: none; }
.cover .badge360 { right: auto; left: var(--pad-x); bottom: calc(var(--bar-b) + 54px); font-size: 11px; padding: 9px 14px; }
.closing .lockup { display: flex !important; flex-direction: column; align-items: flex-start; gap: 24px !important; width: auto !important; top: 46%; }
.closing .lockup > img { width: 56% !important; max-width: 230px; border-radius: 22px !important; }
.closing .tag { font-size: 24px !important; }
.closing .since { font-size: 17px !important; }
.closing .presents { margin-top: 26px !important; font-size: 12px; }
.closing .presents img { height: 54px !important; }

/* ---------- floor openers ---------- */
.slide.opener { display: flex; flex-direction: column; padding: 0 var(--pad-x) calc(var(--bar-b) + 22px); }
.opener .bleed { left: 0; right: 0; top: 0; bottom: auto; height: 100%; }
.scrim-l::after {
  background:
    linear-gradient(0deg, rgba(10, 12, 17, .97) 0%, rgba(10, 12, 17, .86) 46%, rgba(10, 12, 17, .25) 72%, rgba(10, 12, 17, .45) 100%),
    linear-gradient(180deg, rgba(10, 12, 17, .6) 0%, transparent 16%);
}
.floorlock { --fl: clamp(28px, 9.4vw, 44px); gap: .24em; flex-wrap: wrap; }
.opener .floorlock { position: relative; left: auto; top: auto; margin-top: auto; padding-top: calc(var(--bar-t) + 250px); z-index: 3; }
.opener .content { position: relative; left: auto; bottom: auto; width: auto; margin-top: 18px; z-index: 3; }
.opener .h2 { font-size: 29px; }
.opener .body { font-size: 16px; }
.plan-inset { position: relative; right: auto; bottom: auto; width: 100%; max-width: 380px; height: auto; aspect-ratio: 400 / 474; margin-top: 26px; align-self: flex-start; padding: 14px 14px 48px; }
.plan-inset span { left: 16px; right: 16px; bottom: 14px; font-size: 12px; }
.arz-mark { top: calc(var(--bar-t) + var(--top-safe) + 14px); right: var(--pad-x); width: 104px; transform-origin: 100% 50%; }   /* the entrance animation grows leftwards, never past the screen edge */
.arz-sweep { display: none; }   /* desktop-only light sweep: it travels off-screen and would widen the page */
.slide.opener .rv { will-change: auto; }

/* ---------- 360° tours ---------- */
.tour .tour-head { left: var(--pad-x); right: var(--pad-x); top: calc(var(--bar-t) + var(--top-safe) + 8px); }
.tour .tour-head .eyebrow { font-size: 11px; margin-bottom: 10px; }
.tour .tour-head .h2 { font-size: 26px; }
.tour .tour-head .now { font-size: 14px; margin-top: 8px; }
.tour .scrim-top { height: 250px; background: linear-gradient(180deg, rgba(10, 12, 17, .92), rgba(10, 12, 17, .55) 55%, transparent); }
.tour .scrim-bottom { height: 290px; }
.tour .tour-tools { left: var(--pad-x); right: var(--pad-x); top: auto; bottom: calc(var(--bar-b) + 92px); justify-content: flex-start; gap: 8px; }
.tour .hintpill { font-size: 0; padding: 9px; gap: 0; }
.tour .hintpill svg { width: 22px; height: 22px; }
.tour .toolbtn { font-size: 12.5px; padding: 0 16px; min-height: 42px; }
.tour .hintpill { min-height: 42px; min-width: 42px; justify-content: center; }
.switcher { left: 0; right: 0; bottom: calc(var(--bar-b) + 4px); padding: 0 var(--pad-x) 4px; gap: 10px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.switcher::-webkit-scrollbar { display: none; }
.switcher button, .switcher.many button { width: 106px; flex: none; }
.switcher .th, .switcher.many .th { height: 60px; border-radius: 10px; }
.switcher .lb { font-size: 11px; margin-top: 6px; }

/* ---------- the journey (slide 3) ---------- */
.agenda { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 158px; gap: 10px; height: auto; }
.agenda .ag .t { font-size: 15px; left: 14px; right: 14px; bottom: 12px; }
.agenda .ag .no { font-size: 28px; left: 14px; top: 10px; }
.agenda .ag.app .t { right: 14px !important; }
.agenda .ag .peek { right: 14px; top: 34px; width: 78px; height: 170px; padding: 4px; border-radius: 14px; }
.agenda .ag .peek img { border-radius: 11px; }
.agenda .intro-card { padding: 16px; }
.agenda .intro-card img { height: 40px !important; width: auto; margin: 0 0 auto !important; }
.agenda .intro-card p { font-size: 20px; }
.agenda .intro-card span { font-size: 11px; margin-top: 6px; line-height: 1.3; }

/* ---------- brand and characters ---------- */
.swatches { gap: 8px; }
.sw i { height: 38px; }
.sw span { font-size: 10.5px; padding: 6px 4px 8px; letter-spacing: -.02em; text-align: center; }
.fig.contain { background: #000; }
#s-identity .grow .fig { aspect-ratio: 16 / 11; }
.tilt-wrap { display: flex; gap: 12px; height: auto; }
.tilt-wrap .ccard { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; flex: 1; aspect-ratio: 3 / 4.7; transform: none !important; }
.cards7 { grid-template-columns: repeat(3, 1fr); gap: 10px; height: auto; }
.cards7 .ccard { aspect-ratio: 3 / 4.5; }
.cards7 .ccard:last-child { grid-column: 2; }
.ccard { border-radius: 16px; }
.ccard .nm { font-size: 13.5px; padding: 9px 10px 11px; border-top-width: 3px; }
.ccard .nm small { font-size: 10.5px; margin-top: 3px; letter-spacing: .04em; white-space: normal; }
.ccard .im { padding: 12px 6px 0; }
.roles { grid-template-columns: 1fr; gap: 18px; }
.role h3 { font-size: 18px; }
.role p { font-size: 15px; }
#s-bots .gal > .fig:first-child { aspect-ratio: 16 / 11; }
#s-kids .gal > .fig:first-child { aspect-ratio: 16 / 12; }
#s-kids .gal > .fig:not(:first-child) { aspect-ratio: 1 / 1; }
#s-storyworld .gal > :nth-child(2) { grid-column: 1 / -1 !important; aspect-ratio: 1 / 1; }

/* ---------- building stack (slide 11) ---------- */
.building { display: block; }
.building .tower { gap: 9px; }
.floor-row { flex: none; height: 82px; grid-template-columns: 56px 1fr 96px; gap: 12px; padding-right: 8px; border-radius: 14px; }
.floor-row:hover { transform: none; }
.floor-row .lv { font-size: 21px; }
.floor-row .nm { font-size: 18px; }
.floor-row .ro { font-size: 12.5px; margin-top: 3px; }
.floor-row .th { height: calc(100% - 16px); border-radius: 8px; }
.building .outdoor { width: auto; padding-bottom: 0; margin-top: 16px; gap: 10px; }
.building .outdoor .floor-row { height: 196px; }
.building .outdoor .floor-row .meta { padding: 12px 16px 14px; }
.building .bridge { height: 34px; font-size: 11px; }
.building .bridge::before { display: none; }

/* ---------- construction site (slide 12) ---------- */
.site, .site.has-photos { display: flex; flex-direction: column; gap: 22px; height: auto; align-items: stretch; }
.site .txt .h2 { font-size: 29px !important; }
.hazard { margin-top: 24px; width: 190px; }
.site .dia { margin: 4px calc(-1 * var(--pad-x)) 0; }
.site svg .lvl text { font-size: 39px; }
.site svg .tag { font-size: 25px; letter-spacing: .1em; stroke-width: 8px; }
.site svg .tag.st, .site svg .tag.br { display: none; }
.site svg .tag.g { transform: translateX(-34px); }
.site-photos { gap: 10px; align-self: stretch; }
.sp-row { flex-direction: column; gap: 10px; }
.sp-row:last-child { flex-direction: row; }
.sp-row .fig, .sp-row:first-child .fig, .sp-row:last-child .fig { width: 100%; height: auto; flex: 1 1 0; min-width: 0; }
/* rooftop gallery (slide 35) and the Arzzon mascot inset (slide 28) */
.roof-gal { display: flex; flex-direction: column; gap: 10px; }
.roof-gal .fig { aspect-ratio: 16 / 9; }
.roof-gal .fig:nth-child(3) { aspect-ratio: 4 / 3; }
.mascots-inset { right: auto !important; max-width: 380px; }

/* ---------- GF signature experiences (slide 14): the plan follows the text ---------- */
.pad.plan-text { right: auto; min-height: 0; padding-bottom: 6px; }
.plan-hero { position: relative; right: auto; top: auto; width: calc(100% - 28px); height: auto; aspect-ratio: 935 / 1000; margin: 0 14px calc(var(--bar-b) + 22px); }

/* ---------- learning (slide 30) ---------- */
.pair { grid-template-columns: 1fr !important; gap: 14px !important; }
.pair.tf { grid-template-columns: 112px 1fr !important; gap: 14px !important; align-items: center; margin-top: 26px !important; }
.pair.tf > p:last-child { grid-column: 1 / -1; }
.pair.tf .fig { width: 112px; }
.flow { grid-template-columns: repeat(3, 1fr); row-gap: 20px; margin-top: 24px; }
.flow::before { display: none; }
.flow .st .dot { width: 64px; height: 64px; }
.flow .st .dot svg { width: 28px; height: 28px; }
.flow .st .k { font-size: 14.5px; margin-top: 10px; }
#s-learning .split > .col.fill .ccard { aspect-ratio: 3 / 3.8; max-width: 250px; margin: 0 auto; width: 100%; height: auto; }

/* ---------- attractions (slide 31) ---------- */
.tiles4 { grid-template-columns: 1fr 1fr; gap: 10px; height: auto; }
.tile .fig { aspect-ratio: 4 / 3; flex: none; }
.tiles4 .tx, .tile .tx { min-height: 0; padding: 12px 14px 15px; }
.tile .big { font-size: clamp(22px, 6vw, 30px) !important; }
.tile .big small { font-size: .5em; }
.tile .d { font-size: 13.5px; margin-top: 7px; }
.pair.strm { grid-template-columns: 1fr !important; margin-top: 22px !important; }
.pair.strm .fig { width: 100%; aspect-ratio: 16 / 9; }
.pair.strm .key { margin-top: 6px !important; }

/* ---------- training stats (slide 29) ---------- */
#s-arzzon-train .stats { margin: 0 0 20px !important; }
#s-arzzon-train .gal { flex: none !important; }

/* ---------- playable worlds (slide 33) ---------- */
.cars { grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; gap: 10px; }
.cars .fig { aspect-ratio: 4 / 3 !important; height: auto; }
.cars > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10 !important; }
.cars > div.fig { padding: 12px 8px 36px !important; grid-column: 1 / -1; aspect-ratio: 16 / 7 !important; }
.cars .cap { font-size: 11px; }

/* ---------- story → screen → space (slide 34) ---------- */
.sflow { display: flex; flex-direction: column; height: auto; gap: 6px; }
.sflow .stepc { gap: 12px; }
.sflow .stepc .fig { flex: none; aspect-ratio: 16 / 10; }
.sflow .stepc .lbl { font-size: 19px; }
.sflow .arrow { height: 34px; }
.sflow .arrow svg { transform: rotate(90deg); width: 26px; height: 26px; }

/* ---------- rooftop (slide 35) ---------- */
.roof-vis { gap: 18px; }
.roof-vis .floorlock { --fl: clamp(28px, 9.4vw, 40px) !important; }

/* ---------- outdoors (slide 36) ---------- */
#s-outdoor .col.fill > .fig { flex: none !important; aspect-ratio: 1.757 / 1; height: auto; }
#s-outdoor .col.fill > div:last-child { display: grid; grid-template-columns: 1fr !important; gap: 14px !important; height: auto !important; margin-top: 14px !important; }
#s-outdoor .col.fill > div:last-child .fig { aspect-ratio: 16 / 10; }
#s-outdoor .stat .n { font-size: 44px; }
#s-outdoor .stat .l { max-width: none !important; }

/* ---------- the app (slides 37-38) ---------- */
#s-app .list { grid-template-columns: 1fr !important; }
.phones { display: flex; gap: 14px; height: auto; justify-content: center; align-items: flex-start; padding-bottom: 22px; flex-wrap: wrap; }
.phones .phone { position: relative; left: auto !important; top: auto !important; width: calc(50% - 7px); height: auto; aspect-ratio: 380 / 780; padding: 7px; border-radius: 28px; transform: none !important; }
.phones .phone .scr { border-radius: 21px; }
.phones .rv[style*="position:absolute"] { position: static !important; width: 100%; text-align: center; font-size: 12px !important; }
.phone .notch { width: 50px; height: 14px; top: 7px; }
.phone .scr > img { object-fit: contain; }
.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
  padding: 6px 0 0;
  overflow: visible;
}
.shot { min-width: 0; max-width: none; width: 100%; }
#s-app-screens .head-row .aside::after { content: " · tap a screen to enlarge"; color: var(--accent); }
.shot .ph { width: min(100%, 220px, max(150px, calc((100svh - 430px) * .4872))); height: auto; aspect-ratio: 380 / 780; margin: 0 auto; }
.shot .ph .phone { width: 100%; height: 100%; padding: 7px; border-radius: 28px; transform: none; }
.shot .ph .scr { border-radius: 21px; }
.shot figcaption { margin: 16px auto 0; max-width: 280px; font-size: 15px; text-align: center; }
.shot figcaption b { font-size: 11.5px; letter-spacing: .12em; margin-bottom: 6px; }

/* ---------- one world, beyond, products, franchise, direction ---------- */
#s-oneworld .gal > :first-child { grid-column: auto !important; aspect-ratio: 4 / 5; }
#s-oneworld .gal > .fig { aspect-ratio: 4 / 5; }
.paths { grid-template-columns: 1fr; gap: 14px; height: auto; }
.path .fig { flex: none; aspect-ratio: 16 / 10; }
.path .tx { padding: 18px 18px 22px; border-top-width: 3px; }
.path h3 { font-size: 20px; margin-bottom: 8px; }
.path p { font-size: 15px; }
#s-products .gal { grid-template-columns: repeat(6, 1fr) !important; }
#s-products .gal > .fig { aspect-ratio: 3 / 4; }
#s-products .gal > :nth-child(-n+3) { grid-column: 1 / -1 !important; aspect-ratio: 16 / 10; }
#s-products .gal > :nth-child(n+4):nth-child(-n+6) { grid-column: span 2 !important; }
#s-products .gal > :nth-child(n+7) { grid-column: span 3 !important; }
.rounds { display: flex; gap: 10px; height: auto; align-items: center; justify-content: center; padding-top: 6px; }
.rounds img { position: static !important; width: 31% !important; left: auto !important; top: auto !important; flex: 1 1 0; min-width: 0; height: auto; }
.marks { margin-top: 18px; gap: 18px; }
.marks img { height: 64px !important; }
.prios { grid-template-columns: 1fr; gap: 12px; }
.prio { padding: 24px 22px 26px; border-radius: 18px; }
.prio .no { font-size: 58px; }
.prio h3 { font-size: 22px; margin-top: 16px; white-space: normal; }
.prio p { font-size: 15.5px; margin-top: 8px; }
#s-direction .lead { margin-bottom: 18px !important; }

/* ---------- conclusion (slide 44): picture on top, text underneath ---------- */
#s-conclusion .bleed { left: 0 !important; right: 0; top: 0; bottom: auto; height: 84vw; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent); mask-image: linear-gradient(180deg, #000 52%, transparent); }
#s-conclusion .pad { width: auto !important; right: auto; padding-top: calc(84vw - 40px); }
#s-conclusion .key { font-size: 22px !important; }

/* ---------- overlays ---------- */
.lightbox img { max-width: 100vw; max-height: 80vh; border-radius: 6px; }
.lightbox .lb-cap { bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 12px; padding: 0 20px; }
.lightbox .lb-close, .menu .m-close { width: 44px; height: 44px; right: 14px; top: calc(14px + env(safe-area-inset-top)); }
.menu { padding: calc(20px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
.menu h2 { font-size: 15px; margin-bottom: 16px; padding-right: 54px; gap: 12px; }
.menu .m-close { position: fixed; z-index: 2; }
.menu .m-dl { position: static; margin: 0 0 14px; height: 46px; }
.menu .m-grid { grid-template-columns: 1fr; gap: 2px; }
.menu a { font-size: 15.5px; padding: 12px 10px; }
.menu .m-sec { margin-top: 16px; }
.help { display: none; }

/* ==========================================================================
   Tablets in portrait (600-820px): same single-column flow, more generous type and denser grids
   ========================================================================== */
@media (max-width: 359px) {
  .agenda { grid-template-columns: 1fr; grid-auto-rows: 180px; }
}

@media (min-width: 600px) {
  :root { --pad-x: 40px; --bar-t: 56px; }
  .pad { max-width: 780px; margin: 0 auto; }
  .eyebrow { font-size: 13.5px; }
  .h2 { font-size: 46px; }
  .h2.md { font-size: 41px; }
  .h2.sm { font-size: 34px; }
  .lead { font-size: 23px; }
  .body { font-size: 19px; }
  .small { font-size: 16.5px; }
  .key { font-size: 25px !important; }
  .list li { font-size: 18.5px !important; }
  .stat .n { font-size: 54px; }
  .stat .l { font-size: 15px; }
  .chip { font-size: 15.5px; }
  .cap { font-size: 11.5px; }

  .cards7 { grid-template-columns: repeat(4, 1fr); }
  .cards7 .ccard:last-child { grid-column: auto; }
  .ccard .nm { font-size: 15px; }
  .roles { grid-template-columns: 1fr 1fr; gap: 24px; }
  .agenda { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
  .agenda .ag .t { font-size: 17px; }
  .agenda .ag .no { font-size: 34px; }
  .agenda .ag .peek { right: 18px; top: 40px; width: 88px; height: 190px; }
  .agenda .ag.app .t { right: 14px !important; }
  .paths, .prios { grid-template-columns: repeat(3, 1fr); }
  .prio { padding: 22px 18px 24px; }
  .prio .no { font-size: 50px; }
  .prio h3 { font-size: 19px; }
  .prio p { font-size: 14.5px; }
  .path .tx { padding: 16px 16px 20px; }
  .path h3 { font-size: 18px; }
  .path p { font-size: 14px; }
  .tiles4 .tx, .tile .tx { padding: 14px 16px 18px; }
  .tile .big { font-size: 36px !important; }
  .tile .d { font-size: 15px; }

  .floorlock { --fl: clamp(40px, 8.2vw, 66px); }
  .opener .floorlock { padding-top: calc(var(--bar-t) + 360px); }
  .opener .h2 { font-size: 40px; }
  .plan-inset { max-width: 440px; }
  .arz-mark { width: 150px; }

  .tour .tour-head .h2 { font-size: 40px; }
  .tour .tour-head .now { font-size: 17px; }
  .switcher button, .switcher.many button { width: 150px; }
  .switcher .th, .switcher.many .th { height: 84px; }
  .switcher .lb { font-size: 12px; }
  .tour .tour-tools { bottom: calc(var(--bar-b) + 132px); }

  .cover .logo { width: min(46%, 340px); }
  .cover .tag { font-size: 34px; }
  .cover .since { font-size: 18px; }
  .cover .presents img { height: 64px; }

  .phones .phone { width: min(calc(50% - 7px), 270px); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .shot .ph { width: min(100%, 240px); }
  .shot figcaption { font-size: 16px; }
  .site .txt .h2 { font-size: 40px !important; }
  .site svg .lvl text { font-size: 37px; }
  .floor-row { height: 96px; grid-template-columns: 70px 1fr 130px; }
  .floor-row .nm { font-size: 22px; }
  .floor-row .lv { font-size: 26px; }
  .floor-row .ro { font-size: 14.5px; }
  .building .outdoor .floor-row { height: 240px; }
  .menu .m-grid { grid-template-columns: 1fr 1fr; gap: 2px 20px; }
}

/* arzzon.gg link on the closing slide */
.cover .url { font-size: 18px; margin-top: 14px; }
.cover .url a { border-bottom-width: 2px; padding: 4px 0; }