/* 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)}
/* Section tab: hangs under the bar (the bar is positioned, so it anchors it),
   so nothing in the bar moves and nothing on the page jumps when it changes. */
.stickybar .where{position:absolute;top:100%;left:50%;display:flex;align-items:center;gap:7px;padding:4px 12px 6px;
  border:1px solid rgba(245,241,232,.12);border-top:0;border-radius:0 0 10px 10px;background:var(--charcoal);color:var(--cream);
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.05em;white-space:nowrap;
  opacity:0;transform:translate(-50%,-6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.stickybar .where.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.stickybar .where{transition:none}}

.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:#6F675D;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:700;font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin:0 0 12px}
/* Floor is 27px, not 30px. The .ln spans below force "MOROCCO'S EPIC" onto its
   own line, so it can no longer reflow to absorb a narrow viewport: at 320px and
   a 30px floor it cleared its container by 2px, and any wider fallback face
   (Archivo failing to load) would split it as "MOROCCO'S / EPIC". 27px gives it
   ~30px of headroom there and is indistinguishable at 360px and up. */
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(27px,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. */
/* ==========================================================================
   DESKTOP TYPE SCALE (640px up). Mobile is deliberately untouched by all of
   this — the 390×700 fold spec at the bottom of this file depends on the
   mobile sizes staying exactly as they are.
   ========================================================================== */
@media (min-width:640px){
  .hero h1{font-size:min(5.4vw,50px)}
  .hero .date{font-size:17.5px;margin-bottom:14px}

  /* Hero subline. Must stay on ONE line: at 17.5px it needs ~471px, so the
     max-width carries real headroom for font-rendering differences across
     platforms. Scoped to the hero's own direct child so the CTA subline
     lower down keeps its 400px. If you raise the size, raise the width too
     or it silently folds to two lines. */
  .hero .wrap>.sub{font-size:17.5px;max-width:600px}

  /* Section headings — "Part adventure, part purpose" and its siblings.
     Safe here because the base h2.h rule is declared ABOVE this block.
     The pillar and block-title overrides are NOT — see the end of the file. */
  h2.h{font-size:33px}
}
/* MOBILE ONLY. Desktop (>=640px) must render exactly as it did before the
   shared-CSS work: "MOROCCO'S EPIC 60KM ULTRA." on one line over "UPLIFT LOCAL
   COMMUNITIES." Forcing the break at all widths added a third line and pushed
   every block below the hero down 51px. Below 640px the headline already wrapped
   to these same two lines naturally, so this only pins that break in place. */
@media (max-width:639.98px){.hero h1 .ln{display:block}}
.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}
/* Name and role are one line at one size — they always were. What made the role
   read smaller was weight and colour, so the fix is a marginal size lift plus a
   darker role colour, not two different font-sizes. Keep them equal. */
.qcard p.a{margin:9px 0 0;font-size:14px;color:#42392F}
.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 */
/* A second h2 inside the package section, so it needs its own top gap —
   the first one gets spacing from the section padding. */
h2.h.pricing-h{margin-top:40px}
@media (max-width:620px){h2.h.pricing-h{margin-top:30px}}
.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}

/* --- consolidated price card (/2027) -------------------------------------
   Price, plan, the rise dates and both CTAs now live in one charcoal card
   instead of three stacked blocks. Everything below recolours the pieces that
   were written for a cream background and are now sitting on charcoal. */
.price .pnow{margin:0 0 5px;font-family:var(--display);font-weight:800;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.55)}
/* The monthly option was buried in .instal's small print. It is the thing most
   people actually choose, so it sits directly under the headline figure at a
   size that reads as a real alternative, not a footnote. */
.price .planline{margin:8px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,4.6vw,24px);line-height:1.15;color:var(--cream)}
.price .planline b{color:var(--light-clay);font-weight:900}
.price .planfine{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:rgba(245,241,232,.55)}
.price .ladder{margin:0 0 20px;font-size:13.5px;line-height:1.6;
  color:rgba(245,241,232,.7);text-wrap:balance}
.price .ladder b{color:var(--cream);font-weight:700}
.price .ladder span{color:var(--light-clay);font-weight:700}
/* one CTA in a two-column grid sits in the left cell. Cap the track and
   centre it so it reads as the button for the whole card. */
.price .doors{margin:0;grid-template-columns:minmax(0,330px);justify-content:center}
.doors--solo,
.doors:has(> .door:only-child){grid-template-columns:minmax(0,330px);justify-content:center}
/* .door .note is muted brown for the cream page; unreadable on charcoal */
.price .door .note{color:rgba(245,241,232,.62)}
.price .door .note b{color:var(--cream)}
.price .btn-secondary{color:var(--light-clay);border-color:var(--light-clay);background:transparent}
.price .btn-secondary:hover{background:rgba(224,138,92,.12)}
@media (max-width:620px){
  .price .ladder{font-size:12.5px;margin-bottom:16px}
  .price .pnow{font-size:9.5px}
}
.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}
.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:19px;height:19px;fill:#25D366;vertical-align:-3px;margin-right:7px}
.wa{margin:14px 0 0;text-align:center;font-size:15.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:#6F675D}

.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}
/* Companion trust box: the Rise Ultra mark in a tile the same 76px square as
   the founder photo, so the two blocks read as a matched pair. The wordmark is
   letterboxed inside it rather than cropped — object-fit:cover would cut it. */
.founder .fmark{width:76px;height:76px;border-radius:8px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--charcoal);
  border:1px solid var(--charcoal);padding:6px;box-sizing:border-box}
.founder .fmark img{width:100%;height:auto;max-height:100%;object-fit:contain;
  border-radius:0}
.founder + .founder{margin-top:10px}
/* Instagram sits immediately after the toggle, not pinned to the far right.
   The panel is a SIBLING of this row, not a child of <details> — as a child it
   grew the details' flex-basis and pushed Instagram onto its own line. */
.founder .frow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:11px 0 0}
.founder .frow .codetails{flex:0 0 auto}
.founder .frow .iglink{flex:0 0 auto}
.founder .copanel{display:none;margin:8px 0 0;font-size:11.5px;line-height:1.55;color:#6F675D}

/* Secondary WhatsApp action: a real tap target rather than a text link, but
   deliberately lighter and narrower than "Join us" so it never competes with
   the primary CTA. Sits under whichever .doors block it follows. */
.wabtn-wrap{margin:12px 0 0;text-align:center}
.wabtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;padding:10px 17px;border-radius:6px;
  border:2px solid var(--border);color:var(--muted);background:transparent;
  transition:border-color .15s,color .15s}
.wabtn:hover{border-color:#25D366;color:var(--ink)}
.wabtn:focus-visible{outline:3px solid #25D366;outline-offset:2px}
.wabtn .waicon{width:15px;height:15px;margin:0;flex:none}
/* on the charcoal price card the default border and text are invisible */
.price .wabtn{border-color:rgba(245,241,232,.3);color:rgba(245,241,232,.88)}
.price .wabtn:hover{border-color:#25D366;color:var(--cream)}
@media (max-width:620px){
  .wabtn{font-size:10.5px;padding:9px 13px;letter-spacing:.02em}
  .wabtn .waicon{width:14px;height:14px}
}
.founder .frow:has(.codetails[open]) + .copanel{display:block}
.founder .iglink{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--clay);text-decoration:none;border-bottom:1px solid rgba(181,83,46,.35);
  padding-bottom:1px}
.founder .iglink:hover{border-bottom-color:var(--clay)}
.founder .iglink svg{width:15px;height:15px;fill:currentColor;flex:none}
/* Company details as a disclosure inside the box, rather than a jump to the
   footer. The jump landed among the FAQs and the legal line is small — this
   answers the question where it is asked, without navigating. */
.founder .codetails{margin:0}
.founder .codetails summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--clay);list-style:none;
  border-bottom:1px solid rgba(181,83,46,.35);padding-bottom:1px}
.founder .codetails summary::-webkit-details-marker{display:none}
.founder .codetails summary::after{content:"+";font-weight:700;font-size:13px}
.founder .codetails[open] summary::after{content:"\2013"}
.founder .codetails summary:hover{border-bottom-color:var(--clay)}
/* the legal line is a jump target now — keep it clear of the viewport edge */
.legal{scroll-margin-bottom:24px}
.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}
/* First line of the company body: the tagline. Charcoal and bold so it leads
   the two sentences, without introducing a third colour into the box. */
.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:#6F675D;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}
/* Company details — quiet legal line at the very bottom of every page.
   Lighter than --muted on purpose: present and legible, never competing
   with the wordmark above it. */
.legal{margin:14px auto 0;max-width:520px;font-size:11.5px;line-height:1.55;color:#6F675D;letter-spacing:.01em}
.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}
  .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}
}

/* ==========================================================================
   DESKTOP TYPE BUMPS — must stay at the END of this file.
   These selectors have the same specificity as their base rules further up
   (.pillars li, .blk .num), so source order is the only thing deciding the
   winner. Put them in the min-width block near the hero instead and they are
   silently overridden by the base rules that follow it.
   ========================================================================== */
@media (min-width:640px){
  /* The three hero pillars. The BLOCK is centred on the page (max-width plus
     auto margins on .pillars itself), but the rows stay left-aligned so the
     three ticks line up in a column. Do not add justify-content:center here —
     it centres each row independently, which put the ticks at 471/441/419px
     instead of all three at 405px. */
  .pillars{max-width:470px}
  .pillars li{font-size:16.5px}

  /* The three numbered titles in the adventure section */
  .blk .num{font-size:17px}
}

/* ==========================================================================
   EARLY-BOOKING TIERS — /2027 only. Nothing on / uses these classes.
   ========================================================================== */
.tiers{margin:16px 0 14px}
.tiers-h{margin:0 0 10px;text-align:center;font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay)}
.tierlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:640px){.tierlist{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.tierlist--2{grid-template-columns:repeat(2,1fr)}}
.tier{display:flex;flex-direction:column;gap:2px;background:#fff;
  border:1px solid var(--border);border-radius:8px;padding:12px 14px;text-align:center;justify-content:flex-start}
/* The window that is open today. Green rather than clay: clay is every CTA on
   the page, and this is a state, not a thing to click. */
.tier.is-live{background:#F1F6EE;border-color:#CBDDC0}
/* Windows that have not opened yet. These are <li>s, never links, so they were
   already unclickable — this just makes that obvious rather than implied. */
.tier.is-later{background:#FBF8F3;border-color:#E4DDCE;opacity:.95}
.tier.is-later .tp{color:var(--ink)}
.tier.is-later .tlabel{color:#6F675D}
.tier .tmo{font-size:11.5px;line-height:1.35;color:var(--muted);margin-top:1px}
.tier .tmo b{font-weight:700;color:var(--charcoal)}
.tier.is-later .tmo b{color:var(--ink)}
.tier .tw{font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}
/* the window's NAME is the thing a first-time reader anchors on */
.tier .tlabel{font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.tier.is-live .tlabel{color:#2f4a24}
.tier .tnow{margin-top:auto;padding-top:7px;font-family:var(--display);font-weight:800;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#2f4a24;
  border-radius:100px;padding:4px 10px;align-self:center}
.tier.is-live{box-shadow:0 0 0 2px #CBDDC0}
.tier .tn{font-family:var(--display);font-weight:800;margin-top:auto;padding-top:7px}
.tier .tp{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.15;
  color:var(--charcoal)}
.tier.is-live .tp{color:#2f4a24}
.tier .tn{font-size:12px;line-height:1.4;color:var(--muted)}
.tier.is-live .tn{color:#4d6b40;font-weight:600}
.tiers-note{margin:11px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted);
  text-align:center;text-wrap:balance}


/* ============================================================================
   TRUST PANEL — the founder + vision pair fused into one charcoal object.
   Before this, both .founder blocks had NO background at all (transparent on
   cream) behind the same hairline border as .qcard, which made the two blocks
   we most want read the FAINTEST things in the section — fainter than the
   testimonial, which at least had white. This re-tiers the stack:
       price card (charcoal) -> Join us (clay) -> quote (quiet) -> trust panel.
   The clay left edge is deliberate: without it a second charcoal slab in the
   same section reads as another pricing box.

   MUST STAY AT THE END OF THIS FILE. Every selector here is a plain override
   of a rule defined above at equal-or-lower specificity, so it wins on source
   order. Moving it up will silently revert the panel to cream.
   ========================================================================= */
/* ---- TIER 2: the two .founder blocks fused into ONE charcoal trust panel ---- */
/* Charcoal, same as the price card. What keeps the two from competing is not
   a lighter panel (tried it, the washed-out brown was worse) but the clay
   testimonial band now sitting between them. */
.decision .founder{background:var(--charcoal);border:0;border-left:3px solid var(--clay);border-radius:0;padding:20px 22px;margin:22px 0 0;gap:16px;box-shadow:0 10px 22px -18px rgba(22,19,15,.4)}
.decision .qcard + .founder{border-radius:12px 12px 0 0}
.decision .founder + .founder{margin-top:0;border-radius:0 0 12px 12px;box-shadow:inset 0 1px 0 rgba(245,241,232,.13),0 10px 22px -18px rgba(22,19,15,.4)}

/* photo + logo tile made legible on the dark ground */
.decision .founder > img{box-shadow:0 0 0 1px rgba(245,241,232,.18)}
.decision .founder .fmark{background:rgba(245,241,232,.08);border:1px solid rgba(245,241,232,.22)}

/* type re-keyed to the price-card's dark scale */
.decision .founder .fname{color:var(--cream)}
.decision .founder .frole{color:var(--light-clay)}
.decision .founder .fbody{color:rgba(245,241,232,.82)}
.decision .founder .copanel{color:rgba(245,241,232,.58)}
.decision .founder .iglink,
.decision .founder .codetails summary{color:var(--light-clay);
  border-bottom-color:rgba(224,138,92,.42)}
.decision .founder .iglink:hover,
.decision .founder .codetails summary:hover{border-bottom-color:currentColor}
.decision .founder .frow{margin-top:13px}

/* ---- TIER 3: testimonial as a light pull-quote ---- */
/* Its job is still to break up the two charcoal blocks either side of it, but
   it does that by being the one LIGHT object between them rather than a second
   filled slab — a solid clay band competed with the Join us button for
   attention and read as a third heavyweight in a row.
   Clay survives as the star rating only, and as --clay-dark rather than
   --clay: at 11px the stars are small text, and clay on this card is 4.39:1
   where clay-dark is 5.73:1. */
.decision .qcard{background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 22px -20px rgba(22,19,15,.45);padding:18px 20px;margin:18px 0 0;max-width:none}
.decision .qcard .stars{font-size:11px;color:var(--clay-dark);opacity:1;margin:0 0 7px;letter-spacing:.14em}
.decision .qcard p.q{font-size:14.5px;line-height:1.6;color:var(--ink)}
.decision .qcard p.a{font-size:13px;margin-top:9px;color:var(--muted)}
.decision .qcard p.a b{color:var(--ink);font-weight:700}

@media (max-width:639px){
  .decision .founder{padding:16px 15px;gap:12px;margin-top:20px;box-shadow:0 12px 24px -18px rgba(22,19,15,.5)}
  .decision .founder + .founder{box-shadow:inset 0 1px 0 rgba(245,241,232,.13),0 12px 24px -18px rgba(22,19,15,.5)}
  .decision .founder > img,
  .decision .founder .fmark{width:60px;height:60px}
  .decision .qcard{margin-top:14px;padding:14px 15px}
  .decision .qcard p.q{font-size:13.5px}
}

/* Thin clay outline on the price card — ties it to the Join us button below
   and stops the charcoal block reading as a plain slab. Scoped to #pricing:
   .price only exists on / and /2027, but be explicit. */
#pricing .price{border:1px solid var(--clay)}


/* ------------------------------------------------------------------ CTA SIZE
   The top CTA ran the full 618px of the wrap while Join us was capped at
   330px, so the least important button on the page was nearly twice the width
   of the one that takes the money. Both now sit at 420px, and Join us carries
   slightly larger type and more height so it still reads as the primary act.
   Kept at the end of the file: several of these override rules that appear
   earlier at equal specificity. */
.ctablock .btn{max-width:420px;margin-left:auto;margin-right:auto}
.doors--solo,
.doors:has(> .door:only-child),
.price .doors{grid-template-columns:minmax(0,420px);justify-content:center}
.door .btn-primary{font-size:17px;padding:22px 16px;letter-spacing:.04em}
@media (max-width:639px){
  .ctablock .btn{max-width:none}
  .doors--solo,
  .doors:has(> .door:only-child),
  .price .doors{grid-template-columns:minmax(0,1fr)}
  .door .btn-primary{font-size:15px;padding:17px 12px}
}

/* .ctablock .sub is --muted brown, which is right on the cream section but
   sits on the charcoal hero in the first CTA block — 2.27:1, effectively
   invisible. Scoped so the cream one is untouched. */
.hero .ctablock .sub{color:rgba(245,241,232,.72)}

/* Route to next year's event for anyone who cannot make this one. Deliberately
   quiet — it sits directly under the primary CTA and must not compete with it. */
.door .note.alt2027{margin-top:6px;font-size:12.5px;color:var(--muted)}
.door .note.alt2027 a{color:var(--clay-dark);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(154,69,38,.42)}
.door .note.alt2027 a:hover{border-bottom-color:var(--clay-dark)}
.price .door .note.alt2027{color:rgba(245,241,232,.72)}
.price .door .note.alt2027 a{color:var(--cream);border-bottom-color:rgba(245,241,232,.5)}

/* ---------------------------------------------------------- NEXT YEAR BOX
   The 2027 route was a one-line link under the CTA and read as fine print.
   It is now a bordered block with its own button. Deliberately outlined
   rather than filled: on the cream sections it must be findable without
   competing with the clay Join us directly above it, and inside the charcoal
   price card the same markup inverts to cream-on-dark. */
.nextyear{margin:18px 0 0;padding:16px 18px 18px;border:1px solid var(--border);
  border-radius:10px;background:var(--card);text-align:center}
.ny-k{margin:0;font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay-dark)}
.ny-h{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:17px;
  line-height:1.2;text-transform:uppercase;letter-spacing:.01em;color:var(--charcoal)}
.ny-d{margin:7px auto 0;max-width:36ch;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ny-btn{display:inline-block;margin:13px 0 0;padding:12px 22px;border-radius:6px;
  border:2px solid var(--clay);color:var(--clay-dark);background:transparent;
  font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;cursor:pointer}
.ny-btn:hover{background:var(--clay);color:#fff;border-color:var(--clay)}
.ny-btn:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

/* inside the charcoal price card */
.price .nextyear{background:rgba(245,241,232,.06);border-color:rgba(245,241,232,.22)}
.price .ny-k{color:var(--light-clay)}
.price .ny-h{color:var(--cream)}
.price .ny-d{color:rgba(245,241,232,.72)}
.price .ny-btn{border-color:var(--cream);color:var(--cream)}
.price .ny-btn:hover{background:var(--cream);color:var(--charcoal);border-color:var(--cream)}

@media (max-width:639px){
  .nextyear{padding:14px 14px 16px;margin-top:14px}
  .ny-h{font-size:15.5px}
  .ny-d{font-size:12.5px}
  .ny-btn{display:block;padding:13px 12px}
}

/* the refund note now points at /cancellation rather than ending in a claim
   the reader cannot check */
.door .note .c-link{display:inline-block;margin-left:2px;color:var(--clay-dark);
  font-weight:600;text-decoration:none;border-bottom:1px solid rgba(154,69,38,.4)}
.door .note .c-link:hover{border-bottom-color:var(--clay-dark)}
.price .door .note .c-link{color:var(--cream);border-bottom-color:rgba(245,241,232,.5)}