/* Rise Ultra — sales page (/). Ported from rise-ultra-full-page.html. */

.stickybar{position:sticky;top:0;z-index:50;background:var(--charcoal);border-bottom:1px solid rgba(245,241,232,.12)}
.stickybar a{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 16px;text-decoration:none;color:var(--cream);font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
.stickybar .dot{width:6px;height:6px;border-radius:50%;background:var(--light-clay);flex:none}
.stickybar .sep{color:rgba(245,241,232,.35)}
.stickybar .go{color:var(--light-clay)}

.wrap{max-width:640px;margin:0 auto;padding:0 20px}
.section{padding:44px 0}
.dark{background:var(--charcoal);color:var(--cream)}
.eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);text-align:center;margin:0 0 8px}
.dark .eyebrow{color:var(--light-clay)}
h2.h{font-family:var(--display);font-weight:800;font-size:clamp(26px,6vw,30px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;text-align:center;margin:0 0 18px;color:var(--charcoal)}
.dark h2.h{color:var(--cream)}
.lede{text-align:center;max-width:460px;margin:0 auto 26px;font-size:15px;line-height:1.65;color:var(--muted)}
.dark .lede{color:rgba(245,241,232,.72)}
.ph{background:#fff;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8d8478;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:12px}

/* hero
   The hero gets its own wider container than the 640px body column so the
   headline sits on two lines at desktop widths instead of four. Mobile is
   unchanged — 900px never binds below 900px viewport. */
.hero{background:var(--charcoal);color:var(--cream);padding:34px 0 40px;text-align:center}
.hero .wrap{max-width:900px}
.hero .date{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,232,.6);margin:0 0 12px}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(30px,8.4vw,44px);line-height:1.02;text-transform:uppercase;margin:0;letter-spacing:-.02em}
/* From 640px up the headline scales off the 900px hero container so both
   halves stay on one line each — two lines total. 5.4vw is the largest ratio
   that still fits "Morocco's epic 60km ultra." at every width in the range;
   50px is where it stops growing. Below 640px the clamp above is untouched. */
@media (min-width:640px){.hero h1{font-size:min(5.4vw,50px)}}
.hero h1 .alt{color:var(--light-clay);display:block}
.hero .sub{margin:16px auto 22px;max-width:400px;font-size:15px;color:rgba(245,241,232,.78)}
/* The VSL keeps its old 600px effective width — widening the hero shouldn't
   push the pillars and CTA below the fold on desktop. */
.hero .vsl{border-radius:8px;background:rgba(245,241,232,.06);max-width:600px;margin-left:auto;margin-right:auto}
.pillars{list-style:none;margin:24px 0 0;padding:0;text-align:left;max-width:420px;margin-left:auto;margin-right:auto}
.pillars li{display:flex;gap:11px;padding:10px 0;font-size:15px;color:rgba(245,241,232,.86);line-height:1.5}
.pillars .tick{color:var(--light-clay);font-weight:700;flex:none}
.pillars b{color:var(--cream);font-weight:700}

/* buttons */
.btn{display:block;width:100%;text-align:center;cursor:pointer;font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase;padding:19px 14px;border-radius:6px;line-height:1.2;text-decoration:none;transition:background .18s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--light-clay);outline-offset:3px}
.btn-primary{background:var(--clay);color:var(--cream);border:2px solid var(--clay)}
.btn-primary:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
.btn-secondary{background:transparent;color:var(--clay);border:2px solid var(--clay)}
.btn-secondary:hover{background:rgba(181,83,46,.07)}
.dark .btn-secondary{color:var(--light-clay);border-color:var(--light-clay)}
.ctablock{margin-top:26px}
.ctablock .sub{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted);line-height:1.55}
.dark .ctablock .sub{color:rgba(245,241,232,.6)}

/* quotes */
.qcard{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin-bottom:12px}
.qcard .stars{color:var(--clay);font-size:11.5px;letter-spacing:.14em;margin:0 0 7px}
.qcard p.q{margin:0;font-size:14.5px;line-height:1.6}
.qcard p.a{margin:9px 0 0;font-size:13px;color:var(--muted)}
.qcard p.a b{color:var(--ink);font-weight:600}

/* adventure blocks */
.blk{margin-bottom:30px}
.blk .num{font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;text-align:center;margin:0 0 12px;color:var(--charcoal)}
.blk .num i{color:var(--clay);font-style:normal}
/* Photos are pre-cropped to 3:2 at 1200w and 700w, so they fill the frame
   exactly — object-fit is belt-and-braces for any future replacement. */
.blk .ph{aspect-ratio:3/2;border-radius:8px}
.blk img.ph{width:100%;height:auto;object-fit:cover;border:0;padding:0;background:none}
.blk p.cap{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);text-align:center}

/* itinerary timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl:before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:var(--border)}
.tl li{position:relative;padding:0 0 22px 56px;min-height:44px}
.tl li:last-child{padding-bottom:0}
.tl .pip{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--clay);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:16px}
.tl li:last-child .pip{background:var(--charcoal)}
.tl h4{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;margin:8px 0 4px;color:var(--charcoal);letter-spacing:.01em}
.tl p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* included — two-tone bullets: bold lead-in in light clay, remainder in cream */
.incl{background:var(--charcoal);color:var(--cream);border-radius:10px;padding:20px 20px}
.incl ul{list-style:none;margin:0;padding:0}
.incl li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(245,241,232,.1);font-size:14.5px;line-height:1.5;color:rgba(245,241,232,.9)}
.incl li:last-child{border-bottom:0;padding-bottom:0}
.incl li:first-child{padding-top:0}
.incl .tick{color:var(--light-clay);font-weight:700;flex:none}
.incl b{color:var(--light-clay);font-weight:700}
.incl em{color:rgba(245,241,232,.6);font-style:normal;font-size:12.5px}

/* Mini CTA under the package list — jumps to the price block. Mobile only:
   on desktop the pricing is already in view and it would just be noise. */
.minicta{display:none}
.notincl{margin:13px 4px 0;font-size:13.5px;line-height:1.55;color:var(--muted);text-align:center}
@media (max-width:639px){
  .minicta{display:block;width:100%;margin:8px 0 0;text-align:center;text-decoration:none;cursor:pointer;
    background:var(--clay);color:var(--cream);border:2px solid var(--clay);border-radius:6px;
    padding:13px 12px;font-family:var(--display);font-weight:800;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
  .minicta:active{transform:translateY(1px)}
  .minicta:focus-visible{outline:3px solid var(--light-clay);outline-offset:3px}
  .notincl{margin:12px 2px 0;font-size:11.5px;line-height:1.5}
}

/* money */
.quake{border-left:3px solid var(--clay);padding:2px 0 2px 16px;margin:0 0 26px}
.quake p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}
.quake b{font-weight:700}
.pill3{display:grid;gap:12px}
.pill3 .c{background:#fff;border:1px solid var(--border);border-top:3px solid var(--clay);border-radius:6px;padding:16px 16px 15px}
.pill3 h4{font-family:var(--display);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px;color:var(--charcoal)}
.pill3 p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* currency + price */
.curr{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.curr button{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.06em;padding:7px 15px;border-radius:100px;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--border);transition:.15s}
.curr button:hover{border-color:var(--clay);color:var(--clay)}
.curr button[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:var(--cream)}
.price{background:var(--charcoal);color:var(--cream);border-radius:10px;padding:26px 22px 22px;text-align:center}
.price .meta{margin:0 0 14px;font-size:13px;color:rgba(245,241,232,.82);line-height:1.5}
.price .metasub{color:rgba(245,241,232,.5);font-size:12.5px}
.price .figure{font-family:var(--display);font-weight:900;font-size:clamp(48px,13vw,64px);line-height:.95;margin:0;letter-spacing:-.02em}
.price .per{margin:10px 0 0;font-weight:600;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--light-clay)}
.price .fxline{margin:14px 0 0;font-size:12px;color:rgba(245,241,232,.45);line-height:1.4}
.price .rule{border:0;border-top:1px solid rgba(245,241,232,.16);margin:16px 0 15px}
.price .instal{margin:0;font-size:15px;font-weight:600;color:var(--cream);line-height:1.5}
.price .instal .sub{display:block;font-weight:400;font-size:13.5px;color:rgba(245,241,232,.65);margin-top:3px}
.apx{font-family:var(--body);font-weight:400;opacity:.55;margin-right:.08em}

/* decision */
.decision{margin-top:30px}
.refer{margin-top:16px;background:rgba(181,83,46,.07);border:1px solid rgba(181,83,46,.3);border-radius:8px;padding:14px 16px}
.refer p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);text-align:center}
.refer b{color:var(--ink);font-weight:600}
.decision h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,6vw,29px);line-height:1.1;text-transform:uppercase;margin:0 0 20px;color:var(--charcoal);text-align:center;letter-spacing:-.01em}
.doors{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:620px){.doors{grid-template-columns:1fr 1fr}}
.door{display:flex;flex-direction:column}
.door .note{margin:10px 2px 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.door .note b{color:var(--ink);font-weight:600}
.waicon{width:17px;height:17px;fill:#25D366;vertical-align:-2px;margin-right:6px}
.wa{margin:14px 0 0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted)}
.wa a{color:var(--clay);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(181,83,46,.4)}
.wa a:hover{border-bottom-color:var(--clay)}
.trust{margin:0 0 12px;text-align:center;font-size:11.5px;color:#8d8478}

.founder{margin:16px 0 0;display:flex;gap:15px;align-items:flex-start;padding:18px;border:1px solid var(--border);border-radius:8px}
.founder img{width:76px;height:76px;border-radius:8px;object-fit:cover;flex:none}
.founder .fname{margin:0;font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;color:var(--charcoal)}
.founder .frole{margin:2px 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600}
.founder .fbody{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* iClosed booking slot — lazy-loaded on first tap of "Book a 15-min call".
   The widget ships with a hard-coded height:620px inline style, which is what
   makes it clunky on mobile; app.js rewrites that inline height and these rules
   keep the container itself free of nested scrollbars. */
.calendar-slot{margin-top:18px}
.iclosed-shell{border:1px solid var(--border);border-radius:8px;background:#fff;overflow:hidden}
.iclosed-widget{width:100%!important;height:620px}
.iclosed-widget iframe{width:100%!important;height:100%!important;border:0;display:block}
@media (max-width:599px){.iclosed-widget{height:760px}}
.iclosed-loading{padding:26px 18px;text-align:center;color:#8d8478;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* FAQ */
.faq details{background:var(--charcoal);border-radius:6px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 18px;color:var(--cream);font-weight:600;font-size:14.5px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;font-family:var(--display);font-weight:600;font-size:19px;color:var(--light-clay);transition:transform .2s}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .answer{padding:0 18px 18px;color:rgba(245,241,232,.76);font-size:14.5px;line-height:1.6}
.faq .answer p{margin:0 0 10px}
.faq .answer p:last-child{margin:0}

.footmark{margin-top:34px;padding-top:24px;border-top:1px solid var(--border);text-align:center}
.marklogo{width:120px;height:auto;margin:0 auto 4px;display:block}
.footmark .mark{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);margin:0}
.footmark .sub{margin:8px 0 0;font-size:13px;color:var(--muted)}

/* No-JS fallback: native anchor jumps clear the sticky bar. When JS is on,
   app.js measures the bar's live height instead. */
#package,#pricing{scroll-margin-top:44px}

/* ==========================================================================
   MOBILE SCROLL SPEC — see rise-ultra-scroll-check.html
   Screen 1 (hero CTA lands here): package list, mini CTA, "not included",
   then the pricing section breaking the fold.
   Screen 2 (mini CTA lands here): value strip, price, instalments, referral,
   decision heading and the deposit button all above the fold, with the call
   button, its microcopy, the WhatsApp line and the testimonial running past it.
   Every value below exists to hit those two folds — measure before changing.
   ========================================================================== */
@media (max-width:639px){
  #package{padding-top:22px}
  .incl{padding:16px}
  .incl li{font-size:13px;line-height:1.45;padding:9px 0;gap:9px}
  .incl em{font-size:12px}

  #pricing{margin-top:0!important}
  .curr{margin:14px 0 9px}
  .price{padding:16px 16px 14px}
  .price .meta{margin:0 0 10px;font-size:11.5px;line-height:1.45}
  .price .metasub{font-size:11px}
  .price .figure{font-size:46px}
  .price .per{margin:8px 0 0;font-size:10.5px}
  .price .fxline{margin:10px 0 0;font-size:11px}
  .price .rule{margin:13px 0 11px}
  .price .instal{font-size:13.5px;line-height:1.4}
  .price .instal .sub{font-size:12px;margin-top:2px}

  .refer{margin-top:12px;padding:9px 12px}
  .refer p{font-size:12px;line-height:1.45}

  .decision{margin-top:14px}
  .decision .eyebrow{margin-bottom:4px}
  .decision h3{margin:0 0 10px}
  .doors{gap:11px}
  .btn{padding:15px 12px;font-size:14px}
  .door .note{margin:6px 2px 0;font-size:11.5px}
  .wa{margin:10px 0 0;font-size:12px;line-height:1.45}
  .qcard{padding:13px 14px;margin-top:14px!important}
  .qcard p.q{font-size:12.5px;line-height:1.5}

  /* Item 2: the portrait testimonial shouldn't dominate the sales page. */
  .vid-portrait{max-width:300px}
}