/* Trainer's Gym — landing / routing page (/). One viewport, no scrolling.
   Logo leads; BRICK and PERSONAL TRAINING as hollow words above and below it. Hovering a word fills it
   and fades that location's photo in behind (pointer devices); on touch both photos sit faintly
   behind their halves. Same tokens as v2.css, but standalone so this page stays small. */
:root {
  --bg: #111316; --fg: #f2f2f0; --fg-2: #c9c9cf; --mute: #9a9aa3; --line-2: #3f434b;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --gutter: 20px; --stroke: 1.5px;
  /* type + logo scale: bounded by the viewport's height as well as its width so the stack always fits one screen */
  --w1: clamp(60px, min(18vw, 9.5vh), 150px);
  --w2: clamp(40px, min(11vw, 6vh), 100px);
  --logo: clamp(150px, 28vh, 200px);
  --midw: 600px;
  --gap: clamp(28px, 6.5vh, 84px);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 18px; line-height: 1.35; -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.land { position: fixed; inset: 0; }
.bgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; filter: grayscale(0.55) brightness(0.5) contrast(1.05); }
.bgs .-b { object-position: 50% 70%; }
.bgs .-p { object-position: 50% 45%; }
.land.hov-b .bgs .-b, .land.hov-p .bgs .-p { opacity: 1; }

.col { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gap); padding: 32px var(--gutter); }
.pick { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pick h1, .pick h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.88; margin: 0;
  color: transparent; -webkit-text-stroke: var(--stroke) var(--fg); transition: color 0.3s ease; }
.pick.-brick h2 { font-size: var(--w1); }
.pick.-pt h2 { font-size: var(--w2); line-height: 1.02; } /* two lines: a little air between them */
.pick p { margin: 0; font-size: 17px; color: var(--fg-2); transition: color 0.3s ease; }
.pick small { margin-top: 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }

.mid { display: flex; align-items: center; gap: 24px; width: 100%; max-width: var(--midw); }
.mid::before, .mid::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.mid img { width: var(--logo); height: auto; }
.mid h1 { margin: 0; font-size: 0; } /* the lockup image is the h1 */

.foot { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.foot a { padding: 0 8px; }

@media (hover: hover) {
  .pick:hover h2 { color: var(--fg); }
  .pick:hover p { color: var(--fg); }
}
@media (hover: none) {
  .bgs img { opacity: 0.45; height: 50%; }
  .bgs .-p { top: auto; bottom: 0; }
  .bgs .-b { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .bgs .-p { -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
}
/* short phones (SE / landscape): tighten so nothing is cut */
@media (max-height: 640px) {
  :root { --logo: clamp(110px, 22vh, 150px); --gap: clamp(18px, 4.5vh, 40px); }
  .foot { display: none; }
}
@media (min-width: 720px) {
  :root { --gutter: 32px; --stroke: 2px;
    --w1: clamp(96px, min(15vw, 16vh), 240px);
    --w2: clamp(60px, min(8.5vw, 8.5vh), 140px);
    --logo: clamp(200px, 27vh, 280px); --midw: 820px; --gap: clamp(32px, 6vh, 84px); }
  .col { padding-bottom: 56px; } /* room for the foot links */
  .pick p { font-size: 20px; }
  .pick small { font-size: 12px; }
  .foot { font-size: 12px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bgs img, .pick h2, .pick p { transition: none; } }