/* Transcending Personal Training
   Shared by every page except the homepage. */


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

.page-service h1.svc-name {
  min-height: 1.15em;
}

body.page-about {
  --bg:#ffffff;
  --off:#fff1f2;
  --paper:#ffffff;
  --ink:#17171a;
  --mid:#3d3d42;
  --light:#6b6b72;
  --red:#ED1C24;
  --red-d:#c4141b;
  --border:#f0d9db;
  --shadow:0 16px 42px rgba(23,23,26,.13);
  --nav-ink:#ffffff;
  --nav-mid:#f0eeec;
}

body.page-about {
  background:var(--bg);
  color:var(--ink);
  font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

.page-about .sec-kicker {
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red-dark);
  margin-bottom:10px;
  display:block;
}

.page-about .xlinks .sec-kicker {
  color:var(--red-ink);
}

.page-about h1,
.page-about h2,
.page-about h3 {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  line-height:.96;
  color:var(--ink);
}

.page-about .ital {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  color:var(--red);
}

.page-about .btn-red {
  background:var(--red-dark);
  color:#fff;
  padding:16px 34px;
  border-radius:8px;
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  transition:all .25s;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.page-about .btn-red:hover {
  background:var(--red-d);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(237,28,36,.35);
}

.page-about .btn-border {
  color:var(--ink);
  padding:16px 34px;
  border-radius:8px;
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  border:1.5px solid var(--border);
  transition:all .2s;
  display:inline-flex;
  align-items:center;
}

.page-about .btn-border:hover {
  border-color:var(--red);
  color:var(--red);
}

.page-about .ses {
  background:linear-gradient(135deg,#ED1C24 0%,#b40f16 60%,#7c0a10 100%);
  padding:100px 5vw;
  position:relative;
  overflow:hidden;
}

.page-about .ses::before {
  content:"GO BEYOND";
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:clamp(4rem,12vw,10rem);
  letter-spacing:.1em;
  color:rgba(255,255,255,.08);
  white-space:nowrap;
  pointer-events:none;
}

.page-about .ses-inner {
  max-width:1180px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.page-about .ses-head {
  text-align:center;
  margin-bottom:56px;
}

.page-about .ses-head h2 {
  color:#fff;
  font-size:clamp(2.4rem,4.6vw,4rem);
}

.page-about .ses .sec-kicker {
  color:#ffd9db;
}

.page-about .ses .ital {
  color:#ffd9db;
}

.page-about .ses-head p {
  color:rgba(255,255,255,.85);
  max-width:52ch;
  margin:10px auto 0;
}

.page-about .ses-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.page-about .ses-step {
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(4px);
  border-radius:16px;
  padding:28px 24px;
  position:relative;
  transition:all .25s;
}

.page-about .ses-step:hover {
  transform:translateY(-5px);
  border-color:#fff;
  background:rgba(0,0,0,.34);
}

.page-about .ses-num {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:3rem;
  color:#ffd9db;
  line-height:1;
  display:block;
  margin-bottom:12px;
}

.page-about .ses-step h3 {
  color:#fff;
  font-size:1.4rem;
  margin-bottom:8px;
}

.page-about .ses-step p {
  color:rgba(255,255,255,.8);
  font-size:.86rem;
  line-height:1.6;
}

.page-about .ses-step .tag {
  display:inline-block;
  margin-top:14px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  border-radius:100px;
  padding:5px 12px;
}

.page-about .faq {
  border-top:1px solid rgba(237,28,36,.35);
}

.page-about .faq {
  padding:100px 5vw;
}

.page-about .faq-inner {
  max-width:820px;
  margin:0 auto;
}

.page-about .faq-head {
  text-align:center;
  margin-bottom:44px;
}

.page-about .faq-head h2 {
  font-size:clamp(2.4rem,4.6vw,4rem);
}

.page-about .faq .faq-item {
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:12px;
}

.page-about .faq .faq-q {
  padding:20px 24px 10px;
  font-family:inherit;
  font-weight:700;
  font-size:.98rem;
  letter-spacing:normal;
  line-height:1.4;
  color:var(--ink);
}

.page-about .faq .faq-a {
  padding:0 24px 22px;
  color:var(--mid);
  font-size:.92rem;
  line-height:1.7;
}

.page-about .faq .faq-a a {
  color:var(--red-dark);
  font-weight:700;
  text-decoration:none;
}

.page-about .f4 {
  background:repeating-linear-gradient(-45deg,#0a0a0a 0 14px,#070707 14px 28px);
  border-top:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

.page-about .f4-body {
  max-width:980px;
  margin:0 auto;
  padding:60px 5vw 28px;
  text-align:center;
  position:relative;
  z-index:2;
}

.page-about .f4-brand {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:2.1rem;
  letter-spacing:.06em;
  color:var(--ink);
  line-height:1;
}

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

.page-about .f4-tag {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  font-size:.95rem;
  color:var(--light);
  margin-top:10px;
}

.page-about .f4-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:34px auto 30px;
  max-width:420px;
}

.page-about .f4-bar .rod {
  flex:1;
  height:5px;
  background:#3a3a3a;
  border-radius:0;
  position:relative;
}

.page-about .f4-bar .rod::before,
.page-about .f4-bar .rod::after {
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:13px;
  background:#4a4a4a;
  border-radius:2px;
}

.page-about .f4-bar .rod::before {
  left:6px;
}

.page-about .f4-bar .rod::after {
  right:6px;
}

.page-about .f4-plates {
  display:flex;
  align-items:center;
  gap:2px;
}

.page-about .f4-plates i {
  display:block;
  border-radius:5px;
  background:var(--red);
  transition:transform .25s,box-shadow .25s;
}

.page-about .f4-plates i:nth-child(1) {
  width:13px;
  height:38px;
  background:#7a1216;
}

.page-about .f4-plates i:nth-child(2) {
  width:15px;
  height:54px;
  background:var(--red-d);
}

.page-about .f4-plates i:nth-child(3) {
  width:17px;
  height:70px;
}

.page-about .f4-plates.r {
  flex-direction:row-reverse;
}

.page-about .f4:hover .f4-plates i {
  box-shadow:0 0 18px rgba(237,28,36,.55);
}

.page-about .f4-nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 28px;
  margin-bottom:26px;
}

.page-about .f4-nav a {
  display:inline-block;
  padding:6px 0;
  color:var(--mid);
  font-size:.84rem;
  font-weight:600;
  text-decoration:none;
  transition:color .2s;
}

.page-about .f4-nav a:hover {
  color:var(--red);
}

.page-about .f4-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--red-dark);
  color:#fff;
  padding:13px 28px;
  border-radius:100px;
  font-weight:800;
  font-size:.84rem;
  text-decoration:none;
  transition:background .2s,transform .2s,box-shadow .2s;
  margin-bottom:30px;
}

.page-about .f4-cta:hover {
  background:var(--red-d);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(237,28,36,.35);
}

.page-about .f4-meta {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 22px;
  font-size:.78rem;
  color:var(--light);
  margin-bottom:26px;
}

.page-about .f4-meta a {
  color:var(--mid);
  text-decoration:none;
  font-weight:600;
}

.page-about .f4-meta a:hover {
  color:var(--red);
}

.page-about .f4-meta b {
  color:var(--red);
  font-weight:700;
}

.page-about .f4-legal {
  border-top:1px solid var(--border);
  padding-top:20px;
  font-size:.72rem;
  color:var(--light);
  line-height:1.9;
}

@media (max-width:640px) {
  .page-about .f4-body {
    padding:46px 16px 24px;
  }

  .page-about .f4-bar {
    max-width:320px;
  }

  .page-about .f4-plates i:nth-child(3) {
    height:54px;
  }

  .page-about .f4-plates i:nth-child(2) {
    height:42px;
  }

  .page-about .f4-plates i:nth-child(1) {
    height:30px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .page-about .f4-plates i,
  .page-about .f4-cta {
    transition:none;
  }
}

.page-about .abm-cta {
  background:var(--off);
  border-top:1px solid var(--border);
  padding:96px 5vw;
  text-align:center;
}

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

.page-about .abm-cta p {
  color:var(--light);
  max-width:48ch;
  margin:0 auto 30px;
}

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

  .page-about .ses-grid {
    grid-template-columns:1fr 1fr;
  }

  .page-about .btn-red,
  .page-about .btn-border {
    justify-content:center;
  }
}

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

.page-about .crumbs {
  max-width:1180px;
  margin:0 auto;
  padding:18px 5vw 0;
  font-size:.78rem;
  color:var(--light);
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  position:relative;
  z-index:2;
}

.page-about .crumbs a {
  color:var(--light);
  text-decoration:none;
  font-weight:600;
  transition:color .2s;
}

.page-about .crumbs a:hover {
  color:var(--red);
}

.page-about .crumbs .sep {
  color:var(--border);
  user-select:none;
}

.page-about .crumbs .here {
  color:var(--ink);
  font-weight:700;
}

.page-about .svc-quote {
  padding:90px 5vw;
  background:repeating-linear-gradient(-45deg,#0d0d0d 0 14px,#0a0a0a 14px 28px);
  border-top:3px solid var(--red);
  border-bottom:1px solid #1e1e1e;
}

.page-about .svc-quote-inner {
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.page-about .svc-quote .stars {
  color:var(--red);
  letter-spacing:3px;
  font-size:1.05rem;
}

.page-about .svc-quote blockquote {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.55;
  color:#f0eeec;
  margin:18px 0 22px;
}

.page-about .svc-quote figcaption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.page-about .svc-quote .q-av {
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--red-dark);
  color:#fff;
  font-weight:800;
  font-size:.9rem;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.page-about .svc-quote .q-who {
  text-align:left;
}

.page-about .svc-quote .q-name {
  font-weight:800;
  font-size:.92rem;
  color:#fff;
  display:block;
}

.page-about .svc-quote .q-role {
  font-size:.78rem;
  color:#9a9792;
}

.page-about .xlinks {
  padding:84px 5vw;
  background:#101010;
}

.page-about .xlinks-inner {
  max-width:1180px;
  margin:0 auto;
  text-align:center;
}

.page-about .xlinks h2 {
  font-size:clamp(2rem,4vw,3.2rem);
  margin-bottom:8px;
  color:#fff;
}

.page-about .xlinks > .xlinks-inner > p {
  color:#b8b5b1;
  max-width:56ch;
  margin:0 auto 30px;
}

.page-about .pill-grid {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:34px;
}

.page-about .pill-grid a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1.5px solid #2a2a2a;
  border-radius:99px;
  padding:11px 20px;
  color:#f0eeec;
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
  transition:all .2s;
  background:#1a1a1a;
}

.page-about .pill-grid a:hover,
.page-about .pill-grid a:focus-visible {
  border-color:var(--red);
  color:#fff;
  background:#221315;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(237,28,36,.25);
  outline:none;
}

.page-about .xlinks .xl-label {
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8a8782;
  display:block;
  margin:34px 0 14px;
}

.page-about .gmap {
  padding:96px 5vw;
  background:#101010;
  border-top:1px solid #1e1e1e;
}

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

.page-about .gmap-head {
  text-align:center;
  margin-bottom:40px;
}

.page-about .gmap-head h2 {
  font-size:clamp(2.4rem,4.6vw,4rem);
  color:#fff;
}

.page-about .gmap-head .sec-kicker {
  color:#ff7176;
}

.page-about .gmap-head p {
  color:#b8b5b1;
  max-width:58ch;
  margin:12px auto 0;
}

.page-about .gmap-frame {
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #262626;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  background:#1a1a1a;
}

.page-about .gmap-frame::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(237,28,36,.25);
  z-index:2;
}

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

.page-about .gmap-badge {
  position:absolute;
  top:16px;
  left:16px;
  z-index:3;
  background:rgba(16,16,16,.92);
  backdrop-filter:blur(8px);
  border:1px solid rgba(237,28,36,.4);
  border-radius:12px;
  padding:12px 18px;
  color:#fff;
}

.page-about .gmap-badge b {
  display:block;
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:1.25rem;
  letter-spacing:.04em;
  line-height:1;
}

.page-about .gmap-badge span {
  font-size:.72rem;
  color:#b8b5b1;
}

.page-about .gmap-pins {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:22px;
}

.page-about .gmap-pins a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  border-radius:99px;
  padding:8px 15px;
  color:#d9d6d2;
  font-size:.78rem;
  font-weight:600;
  text-decoration:none;
  transition:all .2s;
}

.page-about .gmap-pins a svg {
  color:var(--red);
}

.page-about .gmap-pins a:hover {
  border-color:var(--red);
  color:#fff;
}

@media (max-width:700px) {
  .page-about .gmap-frame iframe {
    height:340px;
  }

  .page-about .gmap {
    padding:70px 20px;
  }
}

.page-about .f4-brand {
  color:#ffffff !important;
}

.page-about .f4-tag {
  color:#d9d6d2 !important;
}

.page-about .f4-nav a {
  color:#f0eeec !important;
}

.page-about .f4-nav a:hover {
  color:var(--red) !important;
}

.page-about .f4-meta {
  color:#d9d6d2 !important;
}

.page-about .f4-meta a {
  color:#f0eeec !important;
}

.page-about .f4-meta a:hover {
  color:var(--red) !important;
}

.page-about .f4-legal {
  color:#d9d6d2 !important;
  border-top-color:#262626 !important;
}

.page-about .f4 {
  border-top-color:#262626 !important;
}

.page-service .svc-hero {
  padding:52px 5vw 84px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

.page-service .svc-hero-inner {
  max-width:1180px;
  margin:0 auto;
  position:relative;
}

.page-service .svc-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-service .svc-topline .red {
  color:var(--red-dark);
}

.page-service h1.svc-name {
  font-size:clamp(2.6rem,8.2vw,9.5rem);
  line-height:.94;
  letter-spacing:.01em;
  color:var(--ink);
  margin:0;
  white-space:nowrap;
}

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

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

.page-service .svc-name .red {
  color:var(--red);
}

.page-service .svc-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;
}

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

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

/* Phones: location always on its own line under the tagline (it only just fit at 412px, so the
   stand-in font wrapped it and the page jumped when the real font loaded). */
@media (max-width:480px) {
  .page-service .svc-sub {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}

.page-service .svc-desc {
  font-size:1.02rem;
  line-height:1.8;
  color:var(--mid);
  max-width:64ch;
  margin:22px 0 30px;
}

.page-service .svc-desc strong {
  color:var(--ink);
}

.page-service .svc-desc a {
  color:var(--red-dark);
  font-weight:700;
  text-decoration:none;
  border-bottom:1.5px solid rgba(237,28,36,.35);
  transition:all .2s;
}

.page-service .svc-desc a:hover {
  color:var(--red-d);
  border-color:var(--red-d);
}

.page-service .svc-photo-wrap {
  position:relative;
}

.page-service .svc-photo {
  display:block;
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:center 30%;
  border-radius:4px;
  box-shadow:var(--shadow);
}

.page-service .svc-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-service .svc-cap b {
  color:var(--ink);
}

.page-service .svc-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  border-top:2px solid var(--ink);
  margin-top:26px;
  padding-top:22px;
}

.page-service .svc-stats {
  display:flex;
  gap:38px;
  flex-wrap:wrap;
}

.page-service .svc-stat .num {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:2.7rem;
  line-height:1;
  color:var(--ink);
  letter-spacing:.02em;
  display:block;
}

.page-service .svc-stat .num em {
  font-style:normal;
  color:var(--red-dark);
  font-size:.55em;
  margin-left:2px;
}

.page-service .svc-stat .l {
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-dark);
  margin-top:4px;
  display:block;
}

.page-service .svc-btns {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

@media (max-width:900px) {
  .page-service .svc-stats {
    gap:26px;
  }

  .page-service .svc-stat .num {
    font-size:2.2rem;
  }
}

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

  .page-service h1.svc-name {
    white-space:normal;
    line-height:.96;
  }

  .page-service .svc-topline span:first-child {
    display:none;
  }

  .page-service .svc-photo {
    aspect-ratio:16/9;
  }

  .page-service .svc-row {
    flex-direction:column;
    align-items:stretch;
  }

  .page-service .svc-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .page-service .svc-btns {
    flex-direction:column;
  }

  .page-service .svc-btns .btn-red,
  .page-service .svc-btns .btn-border {
    justify-content:center;
  }
}

.page-service .svc-stamps {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.page-service .svc-stamp {
  border:1.5px dashed rgba(237,28,36,.45);
  border-radius:6px;
  padding:10px 16px;
  text-align:center;
}

.page-service .svc-stamp .num {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:1.9rem;
  line-height:1;
  color:var(--ink);
  display:block;
}

.page-service .svc-stamp .num em {
  font-style:normal;
  color:var(--red-dark);
  font-size:.6em;
  margin-left:2px;
}

.page-service .svc-stamp .l {
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--light);
  margin-top:4px;
  display:block;
}

@media (max-width:640px) {
  .page-service .svc-stamps {
    justify-content:center;
    width:100%;
  }
}

.page-service .svc-score {
  max-width:1180px;
  margin:16px auto 0;
  border:2px solid var(--ink);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}

.page-service .sc-head {
  display:grid;
  grid-template-columns:1.6fr .8fr .8fr .6fr;
  gap:8px;
  background:var(--ink);
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 16px;
}

.page-service .sc-head span:nth-child(2),
.page-service .sc-head span:nth-child(3) {
  text-align:center;
}

.page-service .sc-head span:last-child {
  text-align:right;
}

.page-service .sc-row {
  display:grid;
  grid-template-columns:1.6fr .8fr .8fr .6fr;
  gap:8px;
  align-items:center;
  font-size:.92rem;
  padding:11px 16px;
  border-bottom:1px solid var(--border);
}

.page-service .sc-row:last-child {
  border-bottom:none;
}

.page-service .sc-row span:first-child {
  font-weight:700;
  color:var(--ink);
}

.page-service .sc-row .ck {
  text-align:center;
  color:var(--red);
  font-weight:800;
  font-size:1rem;
}

.page-service .sc-row span:nth-child(2),
.page-service .sc-row span:nth-child(3) {
  text-align:center;
  color:var(--light);
}

.page-service .sc-row .res {
  text-align:right;
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-size:1.4rem;
  line-height:1;
  color:var(--ink);
}

.page-service .sc-row.loss {
  background:#fdeeee;
}

.page-service .sc-row.loss span:first-child {
  color:var(--red-d,#c4141b);
}

.page-service .sc-row.loss .res {
  color:var(--red);
}

@media (max-width:640px) {
  .page-service .sc-head {
    grid-template-columns:1.6fr .6fr .6fr .5fr;
    font-size:.54rem;
    padding:8px 12px;
  }

  .page-service .sc-head span:first-child {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .page-service .sc-row {
    grid-template-columns:1.6fr .6fr .6fr .5fr;
    font-size:.8rem;
    padding:9px 12px;
  }

  .page-service .sc-row .res {
    font-size:1.15rem;
  }
}

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

/* Phones/tablets: hero photos follow the screen width at their natural shape.
   The HTML height="686" was forcing a fixed height, so on narrow screens a thin slice of the
   photo was zoomed ~3x (the blur). height:auto lets the box shrink with the width instead. */
@media (max-width:1020px) {
  .page-service .svc-photo,
  .page-service .svc-count-photo img,
  .page-service .svc-eq-photo img,
  .page-service .svc-list-photo img,
  .page-service .svc-card-photo img {
    height:auto;
    max-height:70svh;
    object-fit:cover;
  }
}

/* Online coaching photo card: the HTML height="1000" stretched the card to twice its designed
   4:4.4 shape on every screen size. height:auto restores the intended card shape. */
.page-service .svc-card-photo img {
  height:auto;
}

/* Two photos side by side in one photo slot: a competition photo and a studio photo (2026-10-19) */
.photo-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  aspect-ratio:16/7.5;
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.photo-split figure {
  position:relative;
  margin:0;
  min-height:0;
  background:#101010;
}

.photo-split img,
.page-service .svc-count-photo .photo-split img {
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:50% 22%;
  border-radius:0;
  box-shadow:none;
}

.photo-split figcaption {
  position:absolute;
  left:12px;
  bottom:12px;
  padding:5px 10px;
  border-radius:6px;
  background:rgba(11,11,11,.78);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media (max-width:700px) {
  .photo-split {
    aspect-ratio:4/3;
    gap:4px;
  }

  .photo-split figcaption {
    left:8px;
    bottom:8px;
    font-size:.62rem;
    padding:4px 7px;
  }
}

/* Wider right photo (40/60) when the right shot needs room, e.g. a double-bicep pose */
.photo-split.wide-right {
  grid-template-columns:40fr 60fr;
}

.photo-split.wide-right figure + figure img {
  object-position:50% 50%;
}

/* Same shape as the old single banner photo (1180x686 on laptops) */
.photo-split.banner {
  aspect-ratio:1180/686;
  border-radius:4px;
}

@media (max-width:700px) {
  .photo-split.banner {
    aspect-ratio:4/3;
  }
}

/* Split inside the tilted Online Coaching photo card: keeps the card's 4:4.4 shape */
.page-service .svc-card-photo .photo-split {
  aspect-ratio:4/4.4;
  border-radius:8px;
  box-shadow:none;
}

.page-service .svc-card-photo .photo-split img {
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  object-position:50% 0%;
  border-radius:0;
}