/* AthletiGo, /personal-training/
   Warm treatment. The page darkens downwards from a warm near-black into the
   void, and one light source enters from the top corner. Information sits in
   full width bars with an orange edge, which is what tells this page apart
   from the online one at a glance.
   Nothing here is brighter than about six percent above the void. */

:root{
  --void:#050506;--ink:#0b0b0d;--ink-2:#101013;
  --orange:#FF6F20;--orange-2:#C9541F;--ember:#ff9450;--deep:#2b1004;
  --cream:#FBF3EA;--muted:#8d8880;--line:rgba(251,243,234,.10);
  --maxw:1180px;--gutter:clamp(20px,5vw,54px);
  /* the warm end of the page: a near-black with a trace of the ember in it */
  --warm:#0e0c0b;--warm-2:#0a0908;
}

/* This stylesheet loads on this one page only, so the bare element rules
   below cannot reach anything else. */
html{background:var(--void)}
body.athletigo-personal{background-color:var(--void);
  background-image:linear-gradient(180deg,var(--warm) 0%,var(--warm-2) 30%,var(--void) 68%)}

.pt{
  color:var(--cream);direction:rtl;
  font-family:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  background-color:var(--void);
  background-image:linear-gradient(180deg,var(--warm) 0%,var(--warm-2) 34%,var(--void) 72%);
}
.pt .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pt a{color:inherit;text-decoration:none}
.pt :focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* the single light source, entering from the top corner */
#glow{
  position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(760px 520px at 88% -6%,rgba(255,111,32,.06),transparent 68%)}

.pt .num{font-family:"Barlow Condensed","Heebo",sans-serif;font-weight:700}
.pt .eyebrow{font-size:clamp(13px,1.5vw,16px);letter-spacing:.22em;color:var(--orange-2);
  margin:0 0 14px}
.pt .h1{font-size:clamp(30px,5.4vw,62px);line-height:1.04;font-weight:900;
  letter-spacing:-.03em;margin:0 0 18px;color:#FBF3EA}
.pt .h2{font-size:clamp(23px,3.2vw,40px);line-height:1.12;font-weight:900;
  letter-spacing:-.02em;margin:0 0 18px;color:#FBF3EA}
.pt h3{margin:0}
.pt-p{color:#c7c1b9;font-weight:200;font-size:clamp(16px,1.85vw,19px);line-height:1.68;
  margin:0 0 20px;max-width:60ch}
.pt-lead{color:#cdc7bf;font-weight:200;font-size:clamp(17px,2.1vw,22px);line-height:1.6;
  margin:0 0 26px;max-width:46ch}

.pt .btn{display:inline-block;background:var(--orange);color:var(--deep);font-weight:700;
  font-size:clamp(15px,1.5vw,17px);padding:clamp(12px,1.5vw,16px) clamp(24px,3vw,36px);
  border-radius:999px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.pt .btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,111,32,.35)}
.pt-cta{margin:0}

/* head */
.pt-head{padding:clamp(46px,8vh,104px) 0 clamp(26px,4vw,52px)}
.pt-crumbs{font-size:13px;color:var(--muted);font-weight:200;margin:0 0 22px}
.pt-crumbs a:hover{color:var(--orange)}
.pt-crumbs span[aria-hidden]{margin:0 8px;opacity:.6}

.pt-sec{padding:clamp(34px,5.5vh,72px) 0;position:relative;z-index:1}
.pt-after{margin:22px 0 0;color:#b8b2aa}

/* the bars: full width, warm gradient, orange edge on the right, and rounded
   only on the side that stays open */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bar{
  display:grid;grid-template-columns:auto 1fr;gap:4px clamp(14px,2vw,24px);
  align-items:baseline;
  padding:clamp(16px,2.2vw,24px) clamp(18px,2.4vw,30px);
  border-right:2px solid var(--orange);
  border-radius:16px 0 0 16px;
  background-image:linear-gradient(270deg,rgba(255,111,32,.07) 0%,rgba(43,16,4,.30) 26%,rgba(11,10,9,.55) 72%,rgba(5,5,6,0) 100%);
  transition:background-position .35s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}
.bar:hover{transform:translateX(-4px)}
.bar-n{grid-column:1;grid-row:1 / span 2;color:var(--orange);font-size:clamp(19px,2.4vw,26px);
  letter-spacing:.06em;line-height:1.1;opacity:.9}
.bar-t{grid-column:2;font-size:clamp(17px,2vw,21px);font-weight:700;color:#FBF3EA;line-height:1.3}
.bar-d{grid-column:2;color:#b5afa7;font-weight:200;font-size:clamp(15px,1.7vw,17px);
  line-height:1.6;max-width:66ch}

/* chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:15px;
  color:#e8e1d8;background-image:linear-gradient(180deg,rgba(43,16,4,.34),rgba(5,5,6,0))}

/* the cutout, straight onto the page with the same warm glow it has elsewhere */
.cutout{position:relative;margin:0;padding:0;line-height:0}
.cutout::before{content:"";position:absolute;inset:6% -8% -6% -8%;
  background:radial-gradient(closest-side,rgba(255,111,32,.18),transparent 72%);
  pointer-events:none}
.cutout img{position:relative;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 54px rgba(0,0,0,.6))}
.pt-cut{max-width:260px;margin:26px auto 0}
@media (min-width:1025px){
  .pt-photo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
    gap:clamp(24px,3.4vw,56px);align-items:center}
  .pt-cut{max-width:380px;margin:0}
}

/* faq */
.pt-faq details{border-top:1px solid var(--line);padding:16px 0}
.pt-faq details:last-of-type{border-bottom:1px solid var(--line)}
.pt-faq summary{cursor:pointer;list-style:none;font-size:clamp(16px,1.9vw,19px);
  font-weight:500;color:#FBF3EA;position:relative;padding-left:28px}
.pt-faq summary::-webkit-details-marker{display:none}
.pt-faq summary::after{content:"+";position:absolute;left:0;top:-2px;color:var(--orange);
  font-size:20px;line-height:1;transition:transform .25s ease}
.pt-faq details[open] summary::after{transform:rotate(45deg)}
.pt-faq details p{color:#b5afa7;font-weight:200;font-size:clamp(15px,1.7vw,17px);
  line-height:1.7;margin:12px 0 0;max-width:70ch}

/* close */
.pt-close{padding-bottom:clamp(56px,9vh,120px)}
.pt-back{margin:22px 0 0;font-size:15px;color:var(--muted);font-weight:200}
.pt-back a{border-bottom:1px solid rgba(255,111,32,.5)}
.pt-back a:hover{color:var(--orange)}

@media (max-width:600px){
  .bar{grid-template-columns:1fr;gap:6px;border-radius:14px 0 0 14px}
  .bar-n{grid-row:auto;grid-column:1}
  .bar-t,.bar-d{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  .pt *{transition:none !important;animation:none !important}
}