/* Transcending Personal Training
   About page only. */


/* ==========================================================================
   Site styles
   ========================================================================== */

.page-about .ob-name {
  min-height: 1.15em;
}

.page-about .abm-hero.ob {
  padding:56px 5vw 84px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

.page-about .ob-inner {
  max-width:1180px;
  margin:0 auto;
  position:relative;
}

.page-about .ob-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--light);
  border-bottom:2px solid var(--ink);
  padding-bottom:12px;
  margin-bottom:10px;
}

.page-about .ob-topline .red {
  color:var(--red-dark);
}

.page-about h1.ob-name {
  font-size:clamp(3.4rem,8.6vw,10rem);
  line-height:.94;
  letter-spacing:.01em;
  color:var(--ink);
  margin:0;
  white-space:nowrap;
}

.page-about .ob-name .out {
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
}

@supports not (-webkit-text-stroke:2px black) {
  .page-about .ob-name .out {
    color:var(--ink);
  }
}

.page-about .ob-name .red {
  color:var(--red);
}

.page-about .ob-sub {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  border-top:1px solid var(--border);
  margin-top:8px;
  padding-top:14px;
  margin-bottom:44px;
}

.page-about .ob-tag {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.35rem);
  color:var(--red-dark);
}

.page-about .ob-loc {
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--light);
}

.page-about .ob-grid {
  display:grid;
  grid-template-columns:5fr 4fr 2.4fr;
  gap:44px;
  align-items:stretch;
}

.page-about .ob-photo-wrap {
  position:relative;
}

.page-about .ob-photo {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  border-radius:4px;
  box-shadow:var(--shadow);
}

.page-about .ob-cap {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--light);
  border-top:2px solid var(--ink);
  margin-top:12px;
  padding-top:8px;
}

.page-about .ob-cap b {
  color:var(--ink);
}

.page-about .ob-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.page-about .ob-copy .sec-kicker {
  margin-bottom:14px;
}

.page-about .ob-desc {
  font-size:1.02rem;
  line-height:1.85;
  color:var(--mid);
  margin-bottom:14px;
}

.page-about .ob-desc strong {
  color:var(--ink);
}

.page-about .ob-desc.drop::first-letter {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:3.2em;
  float:left;
  line-height:.8;
  padding:5px 10px 0 0;
  color:var(--red);
}

.page-about .ob-btns {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.page-about .ob-trust {
  display:flex;
  gap:8px 20px;
  flex-wrap:wrap;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.page-about .ob-rail {
  border-left:2px solid var(--ink);
  padding-left:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.page-about .ob-rail-h {
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

.page-about .ob-rs {
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.page-about .ob-rs:last-child {
  border-bottom:none;
  padding-bottom:0;
}

.page-about .ob-rs .ci-n {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:2.7rem;
  line-height:1;
  color:var(--ink);
  letter-spacing:.02em;
}

.page-about .ob-rs .ci-n em {
  font-style:normal;
  color:var(--red);
  font-size:.58em;
  margin-left:2px;
}

.page-about .ob-rs .l {
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-dark);
  margin-top:4px;
}

.page-about .ob-rs .s {
  font-size:.7rem;
  color:var(--light);
  margin-top:2px;
}

@media (max-width:1020px) {
  .page-about .ob-grid {
    grid-template-columns:1fr 1fr;
  }

  .page-about .ob-rail {
    grid-column:1 / -1;
    border-left:none;
    border-top:2px solid var(--ink);
    padding-left:0;
    padding-top:20px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }

  .page-about .ob-rail-h {
    grid-column:1 / -1;
    border-bottom:none;
    padding-bottom:0;
  }

  .page-about .ob-rs {
    border-bottom:none;
    padding:0;
  }
}

@media (max-width:700px) {
  .page-about .abm-hero.ob {
    padding:40px 5vw 64px;
  }

  /* The full name stays on one line on every phone: the size follows the screen width */
  .page-about h1.ob-name {
    white-space:nowrap;
    font-size:12.8vw;
    line-height:.96;
  }

  .page-about .ob-topline span:nth-child(2) {
    display:none;
  }

  .page-about .ob-grid {
    grid-template-columns:1fr;
    gap:34px;
  }

  .page-about .ob-rail {
    grid-template-columns:repeat(2,1fr);
    gap:20px 14px;
  }
}

.page-about .abm-story {
  padding:90px 5vw;
}

.page-about .abm-story-inner {
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

.page-about .abm-story h2 {
  font-size:clamp(2.4rem,4.6vw,4rem);
  margin-bottom:20px;
}

.page-about .abm-p {
  color:var(--mid);
  font-size:1.04rem;
  line-height:1.8;
  margin-bottom:18px;
}

.page-about .abm-p strong {
  color:var(--ink);
}

.page-about .abm-story .abm-btns {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:28px;
}

@media (max-width:960px) {
  .page-about .abm-story {
    padding:70px 20px;
  }
}

.page-about .map6 {
  background:#ffffff;
  border-top:4px solid var(--red);
  padding:96px 5vw;
  color:#111;
}

.page-about .map6-inner {
  max-width:1180px;
  margin:0 auto;
}

.page-about .map6-head {
  margin-bottom:36px;
}

.page-about .map6-label {
  display:inline-block;
  background:#111;
  color:#fff;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 16px;
  border-radius:6px;
  margin-bottom:16px;
}

.page-about .map6-head h2 {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-weight:400;
  font-size:clamp(2.6rem,4.8vw,4.2rem);
  letter-spacing:.02em;
  line-height:.96;
  color:#111;
}

.page-about .map6-head h2 .ital {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  letter-spacing:0;
  font-size:.94em;
  color:var(--red);
}

.page-about .map6-sub {
  margin-top:12px;
  font-size:.95rem;
  color:#3d3b39;
  max-width:520px;
}

.page-about .map6-frame {
  border:2px solid #111;
  border-radius:14px;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--red);
  background:#eceae5;
}

.page-about .map6-frame iframe {
  display:block;
  width:100%;
  height:440px;
  border:0;
  filter:grayscale(25%);
}

@media (max-width:768px) {
  .page-about .map6 {
    padding:64px 16px;
  }

  .page-about .map6-frame iframe {
    height:320px;
  }
}

.page-about .bt-wrap {
  position:relative;
  height:260vh;
  background:#000;
}

.page-about .bt-pin {
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:100px 5vw 24px;
}

.page-about .bt-pin::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(237,28,36,0.07),transparent 70%);
  pointer-events:none;
}

.page-about .bt-bg {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
  will-change:opacity;
}

.page-about .bt-bg.on {
  opacity:1;
}

.page-about .bt-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  max-width:1280px;
  margin:0 auto;
  width:100%;
  position:relative;
  z-index:2;
  flex-wrap:wrap;
}

.page-about .bt-eyebrow {
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(237,28,36,0.85);
  margin-bottom:10px;
}

.page-about .bt-head h2 {
  color:#ffffff;
}

.page-about .bt-head h2 .ital {
  color:var(--red);
}

.page-about .bt-counter {
  text-align:right;
  flex-shrink:0;
}

.page-about .bt-counter-label {
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffffff;
  margin-bottom:4px;
}

.page-about .bt-day {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:2.2rem;
  color:#ffffff;
  letter-spacing:.03em;
  line-height:1;
}

.page-about .bt-day em {
  font-style:normal;
  color:var(--red);
}

.page-about .bt-phase {
  font-size:.72rem;
  font-weight:700;
  color:rgba(237,28,36,.85);
  margin-top:4px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.page-about .bt-stage {
  position:relative;
  flex:1;
  min-height:0;
  margin-top:8px;
}

.page-about .bt-track {
  position:absolute;
  inset:0;
  will-change:transform;
}

.page-about .bt-svg {
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
}

.page-about .bt-path-bg {
  fill:none;
  stroke:rgba(255,255,255,.1);
  stroke-width:2;
  stroke-dasharray:6 8;
  stroke-linecap:round;
}

.page-about .bt-path-fill {
  fill:none;
  stroke:var(--red);
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(237,28,36,.55));
}

.page-about .bt-cart {
  position:absolute;
  width:18px;
  height:18px;
  background:var(--red);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 20px rgba(237,28,36,.85),0 0 40px rgba(237,28,36,.45);
  z-index:3;
}

.page-about .bt-node {
  position:absolute;
  width:12px;
  height:12px;
  background:#000;
  border:2px solid rgba(237,28,36,.4);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  transition:all .3s;
}

.page-about .bt-node.active {
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 0 16px rgba(237,28,36,.65);
}

.page-about .bt-card {
  position:absolute;
  width:280px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:20px 22px;
  transform:translate(-50%,0);
  opacity:.35;
  transition:opacity .4s,border-color .4s;
  z-index:2;
}

.page-about .bt-card.above {
  transform:translate(-50%,calc(-100% - 26px));
}

.page-about .bt-card.below {
  transform:translate(-50%,26px);
}

.page-about .bt-card.active {
  opacity:1;
  border-color:rgba(237,28,36,.35);
}

.page-about .bt-when {
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:8px;
}

.page-about .bt-card h3 {
  font-size:1rem;
  font-weight:800;
  color:#ffffff;
  margin-bottom:8px;
  letter-spacing:-.02em;
}

.page-about .bt-card p {
  font-size:.78rem;
  line-height:1.7;
  color:rgba(255,255,255,.92);
}

.page-about .bt-tag {
  display:inline-block;
  margin-top:12px;
  background:rgba(237,28,36,0.1);
  border:1px solid rgba(237,28,36,0.2);
  padding:4px 11px;
  border-radius:100px;
  font-size:.64rem;
  font-weight:600;
  color:rgba(237,28,36,.9);
}

.page-about .bt-cta-card {
  background:rgba(237,28,36,.08);
  border-color:rgba(237,28,36,.35);
}

.page-about .bt-cta-btn {
  display:inline-block;
  margin-top:12px;
  background:var(--red);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  font-size:.74rem;
  font-weight:700;
  text-decoration:none;
}

.page-about .bt-hint {
  text-align:center;
  font-size:.72rem;
  font-weight:600;
  color:rgba(255,255,255,.8);
  position:relative;
  z-index:2;
}

.page-about .bt-hint span {
  color:var(--red);
}

.page-about .bt-wrap .deco {
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.page-about .bt-wrap .deco svg {
  display:block;
  width:100%;
  height:100%;
}

.page-about .dc-bt-plate {
  bottom:-160px;
  right:-150px;
  width:min(28vw,370px);
  animation:decoSpin 130s linear infinite;
  z-index:1;
}

.page-about .dc-bt-plate2 {
  top:-150px;
  left:-140px;
  width:min(24vw,320px);
  animation:decoSpinR 150s linear infinite;
  z-index:1;
}

.page-about .dc-bt-db {
  top:8%;
  right:24%;
  width:min(20vw,270px);
  transform:rotate(-10deg);
  z-index:1;
}

.page-about .dc-bt-kb {
  bottom:6%;
  left:16%;
  width:min(11vw,140px);
  transform:rotate(12deg);
  z-index:1;
}

@media (prefers-reduced-motion:reduce) {
  .page-about .bt-wrap {
    height:auto;
  }

  .page-about .bt-pin {
    position:static;
    height:auto;
  }

  .page-about .bt-stage {
    display:none;
  }

  .page-about .bt-hint {
    display:none;
  }
}

@media (max-width:768px) {
  .page-about .bt-card {
    width:min(280px,82vw);
  }
}

.page-about .bt-wrap:not(.bt-ready) {
  height:auto;
}

.page-about .bt-wrap:not(.bt-ready) .bt-pin {
  position:static;
  height:auto;
}

.page-about .bt-wrap:not(.bt-ready) .bt-stage {
  position:static;
  flex:none;
  margin-top:36px;
}

.page-about .bt-wrap:not(.bt-ready) .bt-track {
  position:static;
  width:auto!important;
  transform:none!important;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}

.page-about .bt-wrap:not(.bt-ready) .bt-svg,
.page-about .bt-wrap:not(.bt-ready) .bt-cart,
.page-about .bt-wrap:not(.bt-ready) .bt-node,
.page-about .bt-wrap:not(.bt-ready) .bt-hint {
  display:none;
}

.page-about .bt-wrap:not(.bt-ready) .bt-card {
  position:static;
  transform:none!important;
  opacity:1;
  width:100%;
  max-width:560px;
}

/* ==========================================================================
   Page fixes
   ========================================================================== */

/* Phones/tablets: show the founder photo in its native wide 3:2 shape instead of a tall 4:5 crop.
   No zoom-crop means the file is never stretched (sharp), and the section is far shorter to scroll. */
@media (max-width:1020px) {
  .page-about .ob-photo {
    height:auto;
    aspect-ratio:3/2;
    object-position:center 40%;
  }
}

/* About hero: show photo above, business photo below; same 479x800 box on laptops,
   side by side on phones (2026-10-19) */
.page-about .photo-split.stack {
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
  aspect-ratio:auto;
  height:800px;
  border-radius:4px;
}

.page-about .photo-split.stack figure + figure img {
  object-position:50% 0%;
}

@media (max-width:1020px) {
  .page-about .photo-split.stack {
    height:auto;
    aspect-ratio:4/5;
  }
}

@media (max-width:700px) {
  .page-about .photo-split.stack {
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    aspect-ratio:4/3;
  }
}