/* From Office View to Superyacht Crew: the sales page. Stands on its own (no shared stylesheet), but uses the same
   colours and type as the class sign-up page (/masterclass), which come from Hugo's own old pages: white, black,
   orange #EF552E (hover #E74C3C), green #127059, light grey #F8F8F8. Headlines in Anton, body in Titillium Web.
   Order (6 Nov 2026, Jev section-order test): the outcome, the hard truth, why most fail, the method, people like you,
   the coach, the offer, the call, the commitment, more proof, questions. One button label all the way down.
   Colour pairs computed (WCAG): white on orange 3.49:1, so button words are 19px+ bold (large text, needs 3:1) ·
   orange text only at headline sizes (3.49:1 on white) · black on orange 6.0:1 · green on white 6.0:1, on grey 5.7:1 ·
   muted on white 8.9:1, on grey 8.3:1 · white on the black photo tab 21:1 · white on the video length chip 15:1. */
:root {
  --white: #FFFFFF;
  --black: #000000;
  --grey: #F8F8F8;
  --muted: #4A4A4A;
  --line: #E6E1DC;
  --orange: #EF552E;
  --red: #E74C3C;
  --green: #127059;
  --radius: 12px;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.07);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--black); font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.55; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--black); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.06; color: var(--black); text-wrap: balance; }
h3 { font-weight: 700; font-size: 1.14rem; line-height: 1.25; color: var(--black); }
mark { background: none; color: var(--orange); padding: 0; }
.punch { margin: 28px 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 6.4vw, 2.4rem); line-height: 1.1; color: var(--black); text-wrap: balance; }

/* 1. banner line */
.bar { background: var(--orange); color: var(--black); text-align: center; font-weight: 700; font-size: 0.88rem; line-height: 1.3; padding: 8px 16px; }

/* top strip: wordmark only, no menu */
.top { padding: 14px 0 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--black); font-weight: 700; font-size: 15px; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.kicker { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); font-weight: 700; }

/* the button: one look, one label, everywhere */
.btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; padding: 14px 18px; border-radius: 10px; background: var(--orange); color: var(--white); font: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); transition: background-color 120ms ease-out; }
.btn:hover { background: var(--red); }
.under { margin-top: 12px; font-size: 0.95rem; color: var(--muted); }

/* 2. top of the page. Phone: the photo, then the headline, then the button. Wide: words left, photo right.
   The crop is 6:5 from near the top so the yacht on the lift and every face stay in frame (Hugo's rule: the boat stays in). */
.hero { padding: 16px 0 44px; }
.hero-shot { margin: 0 20px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 6 / 5; background: var(--grey); }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hero-shot figcaption { display: none; }
.hero-copy { padding: 22px 20px 0; }
h1 { margin-top: 10px; font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1.05; letter-spacing: 0.005em; color: var(--black); text-wrap: balance; }
/* the headline test: A shows unless the page was opened as B */
.hl-b { display: none; }
[data-hl="b"] .hl-a { display: none; }
[data-hl="b"] .hl-b { display: inline; }
.lede { margin-top: 14px; max-width: 34rem; font-size: 1.12rem; line-height: 1.5; color: var(--black); }
.hero .btn { margin-top: 20px; }
.star { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 18px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.star img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.stars { color: var(--orange); letter-spacing: 3px; font-size: 0.95rem; }
.star blockquote { margin-top: 2px; color: var(--black); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.star figcaption { margin-top: 3px; font-size: 0.9rem; color: var(--muted); }

/* 3. what this gets you: three photos, each line in a white tab so the boat in it stays clear */
.life { background: var(--grey); padding: 50px 0 46px; }
.life-lede { margin-top: 14px; max-width: 40rem; font-size: 1.14rem; }
.trio { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.trio figure { position: relative; border-radius: var(--radius); overflow: hidden; }
.trio img { width: 100%; height: clamp(200px, 54vw, 320px); object-fit: cover; }
.trio .low img { object-position: 50% 85%; }
.trio figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 16px 8px; background: var(--white); font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1; text-transform: uppercase; border-top-right-radius: var(--radius); }
.trio .low figcaption { top: 0; bottom: auto; border-radius: 0 0 var(--radius) 0; }

/* 4. the hard truth: the competition, set big */
.truth { padding: 56px 0 52px; }
.truth h2 { font-size: clamp(2.3rem, 9vw, 3.4rem); }
.truth p { margin-top: 16px; font-size: 1.12rem; }
.truth h2 + p { margin-top: 22px; }
.truth .punch { margin: 26px 0 0; font-size: clamp(1.7rem, 6.4vw, 2.4rem); }
.truth .turn { margin-top: 26px; padding: 18px 20px; border-radius: var(--radius); background: var(--grey); font-size: 1.14rem; }
.truth .turn b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.1; color: var(--green); }

/* 5. why most people fail, and 8. the coach. Short lines, the lines that hit set big. */
.story { background: var(--grey); padding: 54px 0 50px; }
.story p { margin-top: 16px; font-size: 1.1rem; }
.story h2 + p { margin-top: 22px; }
.story .open { font-size: 1.16rem; }
.story .reframe { font-weight: 700; }
.story .punch { margin: 26px 0; font-size: clamp(1.7rem, 6.4vw, 2.4rem); }
.story .cost, .truth .cost { padding: 18px 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.story .cost b, .truth .cost b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--orange); }
.story.coach { background: var(--white); }
.portrait { margin: 30px 0 8px; }
.portrait img { width: 100%; border-radius: var(--radius); }
.portrait figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }

/* 9. you get: four plain blocks, ruled */
.get { padding: 54px 0; border-top: 1px solid var(--line); }
.get-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
.get-grid article { padding: 20px 0; border-top: 2px solid var(--black); }
.get-grid h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.get-grid p { margin-top: 8px; max-width: 34rem; }
.get-close { margin-top: 20px; font-size: 1.16rem; font-weight: 700; }

/* 5 / 10 / 14. the offer box: a white card on light grey, like the sign-up form on /masterclass */
.offer { background: var(--grey); padding: 40px 0 46px; text-align: center; }
.offer .narrow { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 22px 26px; width: calc(100% - 40px); }
.offer .offer-name { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--green); }
.offer h2 { margin-top: 10px; color: var(--black); }
.offer p { margin-top: 12px; font-size: 1.08rem; }
.offer .btn { margin-top: 22px; }
.offer .under { font-size: 0.95rem; }
/* the last one is the single loud block on the page */
.offer.last { background: var(--orange); }
.offer.last .narrow { background: none; box-shadow: none; padding: 10px 0 4px; width: 100%; }
.offer.last .offer-name { color: var(--black); }
.offer.last p, .offer.last .under { color: var(--black); font-weight: 600; }
.offer.last .btn { background: var(--black); box-shadow: none; }
.offer.last .btn:hover { background: #222222; }

/* 6. five steps */
.steps { padding: 56px 0 50px; }
.steps ol { margin-top: 24px; }
.steps ol > li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 2px solid var(--black); }
.steps ol > li:last-child { border-bottom: 2px solid var(--black); }
.num { font-family: var(--display); font-size: 3rem; line-height: 0.9; color: var(--orange); }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.method { display: block; margin-top: 4px; font-family: 'Titillium Web', system-ui, sans-serif; font-size: 0.98rem; font-weight: 700; color: var(--green); }
.steps p { margin-top: 8px; max-width: 40rem; }
.steps p + p { margin-top: 10px; }
.nb { white-space: nowrap; }
.buckets { margin-top: 14px; max-width: 40rem; }
.buckets li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.buckets li:last-child { border-bottom: 1px solid var(--line); }
.buckets b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; text-transform: uppercase; color: var(--black); }
.buckets b.maybe { color: var(--muted); }
.buckets b.never { color: var(--orange); }
.buckets span { font-size: 0.98rem; }

/* 7. bonuses: white cards on light grey */
.bonus { background: var(--grey); padding: 50px 0 44px; }
.bonus .kicker { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--orange); }
.bonus h2 { margin-top: 4px; max-width: 22ch; }
.bonus-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bonus-grid li { position: relative; padding: 16px 18px 16px 50px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.bonus-grid li::before { content: '+'; position: absolute; left: 18px; top: 10px; font-family: var(--display); font-size: 1.7rem; line-height: 1.2; color: var(--orange); }
.bonus-grid p { margin-top: 4px; color: var(--muted); font-size: 0.98rem; }
.bonus-more { margin-top: 18px; font-weight: 700; }

/* 7. people like you: one story per background, then the faces of the rest */
.people { background: var(--grey); padding: 56px 0 50px; }
.people-lede { margin-top: 12px; max-width: 40rem; font-size: 1.14rem; font-weight: 600; }
.arch { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.arch article { padding: 18px 18px 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.arch-q { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--orange); }
.arch img { margin-top: 12px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); background: var(--grey); }
.arch h3 { margin-top: 12px; font-size: 1.2rem; }
.arch h3 span { font-weight: 600; font-size: 0.95rem; color: var(--muted); }
.arch-was, .arch-now { margin-top: 6px; font-size: 1rem; }
.arch-now b { color: var(--green); }
.arch blockquote { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.none-title { margin-top: 46px; font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 6.6vw, 2.4rem); line-height: 1.08; }
.none-lede { margin-top: 12px; max-width: 42rem; font-size: 1.1rem; }
.crew-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
.crew-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--white); }
.crew-grid b { display: block; margin-top: 10px; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.crew-grid span { display: block; margin-top: 2px; font-size: 0.9rem; line-height: 1.3; color: var(--muted); }
.crew-grid em { display: block; margin-top: 5px; font-style: normal; font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: var(--green); }
.crew-note { margin-top: 22px; font-size: 0.88rem; color: var(--muted); }
.people-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.more-link { font-weight: 700; font-size: 1.05rem; color: var(--black); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* 14. the long quotes sit with the videos now */
.quotes { margin-top: 44px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.quotes blockquote { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 20px 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.quotes p { font-size: 1.04rem; }
.quotes footer { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 0.92rem; color: var(--muted); }
.quotes footer img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.quotes footer b, .more figcaption b { display: block; color: var(--black); font-weight: 700; font-size: 1rem; }

/* 9. the stack, set like a receipt */
.stack { background: var(--grey); padding: 54px 0 50px; }
.receipt { margin-top: 14px; }
.receipt li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed #CFC8C0; }
.receipt .group { display: block; margin-top: 18px; padding: 0 0 8px; border-bottom: 2px solid var(--black); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--green); }
.receipt span { font-weight: 600; }
.receipt b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 4px; padding-top: 18px; border-top: 3px solid var(--black); }
.total span { font-family: var(--display); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; }
.total b { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.total-note { margin-top: 14px; color: var(--muted); }

/* 11. got your back */
.back { padding: 60px 0 56px; }
.back p { margin-top: 16px; font-size: 1.08rem; }
.back .punch { margin: 28px 0 0; }

/* 12. more success stories: video posters that load the player only when pressed, then real messages */
.more { background: var(--grey); padding: 54px 0 50px; }
.more-grid { margin-top: 26px; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
.vid, .player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #111111; cursor: pointer; }
.vid img { width: 100%; height: 100%; object-fit: cover; }
/* the play button sits bottom left so it never covers the face or the name on the poster */
.play { position: absolute; left: 12px; bottom: 12px; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); transition: background-color 120ms ease-out; }
.play::before { content: ''; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.vid:hover .play { background: var(--red); }
.len { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.more blockquote { margin-top: 14px; font-size: 1.04rem; }
.more figcaption { margin-top: 12px; font-size: 0.92rem; color: var(--muted); }
.msgs-title { margin-top: 48px; font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.msgs { margin-top: 16px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.msgs li { align-self: start; max-width: 34rem; padding: 14px 16px 12px; border-radius: 18px 18px 18px 4px; background: var(--white); box-shadow: var(--shadow); }
.msgs p { font-size: 1rem; line-height: 1.45; }
.msgs span { display: block; margin-top: 8px; font-size: 0.86rem; font-weight: 700; color: var(--green); }

/* 13. questions */
.faq { padding: 56px 0 52px; }
.faq details { border-top: 1px solid var(--line); }
.faq h2 + details { margin-top: 24px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 36px 18px 0; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font-family: var(--display); font-size: 1.7rem; line-height: 1.2; color: var(--orange); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 18px; max-width: 40rem; }
.faq details p + p { margin-top: -6px; }

.foot { padding: 22px 0 96px; font-size: 13px; color: var(--muted); }
.foot a { color: var(--muted); }

/* booking bar: phones only, between the first button and the last. White, so it never reads as a black block. */
.stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); color: var(--black); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12); }
.stick span { font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
.stick .btn { width: auto; min-height: 46px; padding: 10px 16px; font-size: 1.2rem; flex: none; }

@media (min-width: 720px) {
  .wrap { padding: 0 32px; }
  .bar { font-size: 0.95rem; padding: 10px 16px; }
  .btn { width: auto; min-width: 360px; padding: 14px 28px; }
  .crew-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trio img { height: auto; aspect-ratio: 4 / 5; }
  .arch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch img { aspect-ratio: 1; }
  .people-cta { flex-direction: row; align-items: center; gap: 28px; }
  .portrait { float: right; width: 44%; max-width: 300px; margin: 8px 0 18px 32px; }
  .story .wrap::after { content: ''; display: block; clear: both; }
  .get-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps ol > li { grid-template-columns: 84px minmax(0, 1fr); padding: 26px 0; }
  .num { font-size: 4.2rem; }
  .buckets li { grid-template-columns: 96px minmax(0, 1fr); }
  .offer .narrow { padding: 40px 40px 34px; }
  .stick { display: none; }
  .foot { padding-bottom: 34px; }
}
@media (min-width: 760px) {
  .hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1180px; margin: 0 auto; padding: 24px 32px 20px; }
  .hero-copy { order: 1; padding: 0; }
  .hero-shot { order: 2; margin: 0; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
  .hero-shot img { height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .hero-shot figcaption { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
  h1 { font-size: clamp(2.5rem, 4.8vw, 4rem); }
  .lede { margin-top: 18px; font-size: 1.16rem; }
  .hero .btn { margin-top: 26px; }
}
@media (min-width: 1020px) {
  .steps, .people, .truth, .faq { padding-top: 76px; padding-bottom: 70px; }
  .story { padding-top: 72px; padding-bottom: 68px; }
  .back { padding-top: 84px; padding-bottom: 78px; }
  .bonus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones: the call card runs edge to edge, so its button is as wide as the top button and stays on one line at 375px */
@media (max-width: 719px) {
  .offer:not(.last) { padding: 14px 0; }
  .offer:not(.last) .narrow { width: 100%; border-radius: 0; padding: 32px 20px 30px; }
}
/* small phones (under 400px): a long button label wraps instead of being clipped (only when it does not fit) */
@media (max-width: 399px) {
  .btn { white-space: normal; text-wrap: balance; line-height: 1.2; }
  .offer .narrow { padding: 26px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .play { transition: none; } }