/* Option B — Desert Modern: the ascent. Dusk hero, a trail line with camps, mesa shapes, slab type. */
:root {
  --sand: #EFE4D2;
  --cream: #F7F0E4;
  --clay: #A3461F;
  --clay-2: #B5552F;
  --rust-deep: #7A3A1F;
  --olive: #4E5330;
  --navy: #1F2A38;
  --dusk: #1B222C;
  --gold: #C99A45;
  --ink: #221E1A;
  --muted: #5E5348;
  --on-dark: #F3EBDD;
  --on-dark-dim: rgba(243, 235, 221, .72);
  --slab: "Zilla Slab", Rockwell, Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --mesa: polygon(12% 0, 88% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}

body { background: var(--sand); color: var(--ink); font: 400 17px/1.65 var(--sans); position: relative; }
/* paper grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
h1, h2, h3 { font-family: var(--slab); font-weight: 700; letter-spacing: -.01em; line-height: 1.02; }
h2 { font-size: clamp(34px, 4.4vw, 54px); }
h1 em, h2 em { color: var(--clay-2); }
cite { font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 2px;
  background: var(--clay); color: var(--cream); border: 0; text-decoration: none; cursor: pointer;
  font: 800 15px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--navy); }
.btn--cta { padding: 24px 56px; font-size: 18px; box-shadow: 6px 6px 0 var(--gold); }
.btn--cta:hover { box-shadow: 3px 3px 0 var(--gold); transform: translate(3px, 3px); }
.btn--olive { background: var(--olive); }
.btn--sand { background: var(--cream); color: var(--clay); box-shadow: 6px 6px 0 var(--ink); }
.btn--sand:hover { background: var(--ink); color: var(--cream); }
.dock .btn { padding: 18px 40px; font-size: 15px; box-shadow: 5px 5px 0 var(--ink); }

/* The juxtaposition device: slab line answered by a hard sans line */
.pair { display: grid; line-height: 1; }
.pair span { font: 600 clamp(28px, 3vw, 40px)/1.05 var(--slab); color: var(--olive); }
.pair strong { font: 800 clamp(28px, 3vw, 40px)/1.05 var(--sans); letter-spacing: -.02em; text-transform: uppercase; color: var(--clay); }
.pair--small { margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--ink); }
.pair--small span, .pair--small strong { font-size: 22px; }
.pair--light span { color: var(--sand); }
.pair--light strong { color: var(--ink); }

/* Masthead */
.masthead { background: var(--dusk); color: var(--on-dark); }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__word { display: grid; font: 700 19px/1 var(--slab); letter-spacing: .02em; text-transform: uppercase; }
.brand__word span { font: 800 11px/1.4 var(--sans); letter-spacing: .32em; color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.site-nav a { text-decoration: none; color: var(--on-dark-dim); }
.site-nav a:hover { color: var(--gold); }
.site-nav__cta { white-space: nowrap; padding: 10px 16px; border: 2px solid var(--gold); color: var(--gold) !important; }

/* Hero: dusk */
.hero { position: relative; color: var(--on-dark); background: linear-gradient(180deg, var(--dusk) 0%, #2A2830 55%, #4B2D20 100%); padding-top: 64px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(50px, 7vw, 100px); text-transform: uppercase; line-height: .96; }
.hero h1 em { color: var(--gold); }
.hero__q { margin-top: 26px; font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--slab); color: #E6A07A; }
.lede { margin-top: 16px; font-size: 19px; color: var(--on-dark-dim); max-width: 40ch; }
.hero__photo { position: relative; aspect-ratio: 4 / 5; background: var(--clay-2); box-shadow: 14px 14px 0 var(--gold); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.25); mix-blend-mode: luminosity; }
.pair--float { position: absolute; left: -28px; bottom: 28px; background: var(--sand); padding: 16px 20px; box-shadow: 6px 6px 0 var(--ink); }
.pair--float span, .pair--float strong { font-size: 26px; }
.hero-cta { padding-top: 56px; }
.creds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin-top: 32px; font: 700 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-dim); }
.creds li { padding: 0 16px; }
.creds li + li { border-left: 2px solid var(--gold); }
.mesa { display: block; width: 100%; height: 150px; margin-top: 40px; }

/* Bands */
.band { padding: 104px 0; }
.band--olive { background: var(--olive); color: var(--cream); margin-top: -1px; }
.band--olive h2 em { color: var(--gold); }
.band--clay { background: var(--clay); color: var(--cream); }
.band--clay h2 em { color: var(--ink); }

/* Approach */
.approach__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.approach__body { display: grid; gap: 18px; color: rgba(247, 240, 228, .86); }

/* The climb */
.trail { padding: 112px 0 64px; }
.trail__title { margin-bottom: 64px; padding-left: 152px; }
.camp { position: relative; display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; margin-left: 152px; padding-bottom: 96px; }
/* the trail line runs down the left gutter, one dot per camp */
.camp::before { content: ""; position: absolute; left: -96px; top: 10px; bottom: -10px; border-left: 3px dashed var(--clay); }
.camp:last-child::before { display: none; }
.camp::after { content: ""; position: absolute; left: -106px; top: 0; width: 23px; height: 23px; background: var(--sand); border: 4px solid var(--clay); border-radius: 50%; }
.camp:last-child::after { background: var(--gold); border-color: var(--ink); }
.camp__marker {
  position: absolute; left: -136px; top: 40px; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 800 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--clay); white-space: nowrap;
}
.camp--start, .camp--view { grid-template-columns: 1fr; }
.camp__frame { box-shadow: 0 4px 10px rgba(34, 30, 26, .18); transition: transform .35s ease, box-shadow .35s ease; background: var(--rust-deep); overflow: hidden; }
.camp__frame:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 14px 22px 34px rgba(34, 30, 26, .45); }
.camp__frame img { display: block; width: 100%; height: auto; }
.camp h3 { font-size: clamp(32px, 3.4vw, 44px); }
.camp__book { margin-top: 6px; font-size: 15px; color: var(--muted); }
.camp__lead { margin-top: 16px; font: 600 22px/1.3 var(--slab); }
.camp__body > ul:not(.chips):not(.start) { margin-top: 14px; display: grid; gap: 8px; color: var(--muted); }
.camp__body > ul:not(.chips):not(.start) li { padding-left: 18px; position: relative; }
.camp__body > ul:not(.chips):not(.start) li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--clay); }
.start { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.start li { padding: 20px 22px; background: var(--cream); border-left: 4px solid var(--clay); font: 600 19px/1.3 var(--slab); }
.start__not { margin-top: 18px; color: var(--muted); font-size: 15px; }
.camp--view .camp__body > p { margin-top: 14px; max-width: 54ch; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chips li { padding: 10px 16px; border: 2px solid var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Video + quote */
.video { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; padding-top: 32px; padding-bottom: 112px; }
.video .video-ph { background: var(--navy); color: var(--sand); border-radius: 10px; }
.video .video-ph__play { background: var(--clay); border-color: var(--clay); color: var(--cream); }
.video__cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font: 600 20px/1 var(--slab); }
.video__cap span { font: 500 13px/1 var(--sans); opacity: .7; }
.quote blockquote { font: 600 clamp(26px, 2.8vw, 36px)/1.2 var(--slab); }
.quote figcaption { margin-top: 18px; font: 800 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }

/* Section heads */
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head > p { margin-top: 14px; color: var(--muted); font-size: 18px; }

/* Outcomes */
.outcomes h2 em { font: 800 1.1em/1 var(--sans); font-style: normal; letter-spacing: -.03em; text-transform: uppercase; }
.outcomes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.outcomes figure { background: rgba(0, 0, 0, .12); border-top: 4px solid var(--gold); padding: 30px; display: grid; gap: 10px; align-content: start; }
.stat { font: 700 clamp(48px, 5vw, 68px)/1 var(--slab); color: var(--cream); }
.stat__label { font: 800 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #F2C98A; }
.outcomes blockquote { margin-top: 10px; font-size: 16px; color: rgba(247, 240, 228, .9); }
.outcomes figcaption { margin-top: 6px; font-size: 14px; font-weight: 800; }

/* About */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; padding-top: 120px; padding-bottom: 120px; }
.about__photo { aspect-ratio: 4 / 5; background: var(--navy); box-shadow: -14px 14px 0 var(--clay-2); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 37% 40%; filter: grayscale(1) contrast(1.25); mix-blend-mode: luminosity; }
.about__body { display: grid; gap: 18px; }
.about__body p { color: var(--muted); }

/* How it works */
.how { background: var(--dusk); color: var(--on-dark); padding: 112px 0; }
.how .section-head > p { color: var(--on-dark-dim); }
.how__steps { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 24px; align-items: end; }
.how__steps li { clip-path: var(--mesa); background: #2C3442; padding: 64px 32px 36px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.how__steps .how__main { background: var(--clay); padding-top: 84px; padding-bottom: 48px; }
.how__steps h3 { font-size: 30px; }
.how__cost { font: 700 44px/1 var(--slab); color: var(--gold); }
.how__main .how__cost { color: var(--cream); }
.how__cost small { font: 600 15px/1 var(--sans); color: var(--on-dark-dim); }
.how__steps p:last-child { color: var(--on-dark-dim); font-size: 15px; max-width: 30ch; }
.how__main p:last-child { color: rgba(247, 240, 228, .9); }
.how__cta { margin-top: 64px; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; padding-top: 112px; padding-bottom: 96px; }
.faq__list { display: grid; gap: 10px; }
.faq details { background: var(--cream); border-left: 4px solid var(--clay); }
.faq summary { padding: 20px 24px; font: 700 21px/1.3 var(--slab); }
.faq summary::after { font: 700 26px/1 var(--sans); color: var(--clay); }
.faq details p { padding: 0 24px 22px; color: var(--muted); max-width: 60ch; }

/* Signup */
.signup-band { padding-bottom: 112px; }
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; align-items: end; border-top: 4px solid var(--ink); padding-top: 48px; }
.signup h2 { font-size: clamp(30px, 3.4vw, 44px); }
.signup > div p { margin-top: 12px; color: var(--muted); max-width: 40ch; }
.signup__action { justify-self: end; }

/* Closing */
.closing { background: var(--clay-2); color: var(--cream); }
.horizon--top { display: block; width: 100%; background: var(--sand); height: 90px; }
.closing__inner { display: grid; justify-items: center; text-align: center; gap: 22px; padding-top: 48px; padding-bottom: 112px; }
.closing .pair span, .closing .pair strong { font-size: clamp(44px, 6vw, 84px); }
.closing__inner > p:not(.pair) { font-size: 19px; max-width: 34ch; }

/* Footer */
.site-foot { background: var(--ink); color: var(--sand); padding: 48px 0 28px; }
.site-foot__legal { font-size: 14px; opacity: .72; }

/* Responsive */
@media (max-width: 960px) {
  .site-nav a:not(.site-nav__cta) { display: none; }
  .hero__grid, .approach__inner, .video, .about, .faq, .signup { grid-template-columns: 1fr; gap: 40px; }
  .signup__action { justify-self: start; }
  .hero__photo { max-width: 460px; width: calc(100% - 14px); }
  .outcomes__grid, .how__steps { grid-template-columns: 1fr; }
  .how__steps { max-width: 440px; margin: 0 auto; }
  .about__photo { max-width: 420px; width: calc(100% - 14px); justify-self: end; }
  .trail__title { padding-left: 56px; }
  .camp { margin-left: 56px; grid-template-columns: 1fr; gap: 28px; }
  .camp::before { left: -42px; }
  .camp::after { left: -52px; }
  .camp__marker { left: -26px; }
  .camp__frame { max-width: 320px; }
}
@media (max-width: 560px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand__word { font-size: 16px; }
  .band { padding: 80px 0; }
  .btn--cta { width: 100%; padding-left: 20px; padding-right: 20px; }
  .creds { flex-direction: column; align-items: center; }
  .creds li + li { border-left: 0; }
  .pair--float { left: -8px; padding: 12px 14px; }
  .pair--float span, .pair--float strong { font-size: 20px; }
  .mesa { height: 90px; }
  .start { grid-template-columns: 1fr; }
}