/* Sections borrowed from the reference sites. */
.price-panel { position: relative; z-index: 1; }
.price-panel .line-icon { color: #c5ebfb; }
main > :is(.how-section, .engagements, .pricing-section, .faq-section, .closing) { margin-top: 120px; }
.site-footer :focus-visible { outline-color: #96ebd8; }

.line-reveal { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.line-reveal-inner { display: block; }

.bridge { padding: clamp(80px, 9vw, 128px) 24px; text-align: center; }
.bridge p {
  max-width: 24em;
  margin-inline: auto;
  font-family: var(--heading);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.bridge p > span + span { color: var(--sky-deep); }

.story { height: 170vh; height: 170svh; }
.story-pin {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  margin-inline: 16px;
  border-radius: 8px;
  overflow: clip;
  background: #1c2a3a;
}
.story-pin picture, .story-pin img { position: absolute; inset: -16px; }
.story-pin img { object-position: 50% 30%; transform: scaleX(-1); }
.story-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(9 27 51 / .78), rgb(9 27 51 / .38) 52%, rgb(9 27 51 / .16));
}
.story-shade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(7 18 36 / .5);
  opacity: var(--story-progress, 0);
}
.story-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 34vh;
  max-width: 760px;
  margin-top: -100vh;
  margin-top: -100svh;
  padding: 22vh clamp(28px, 7vw, 96px) 24vh;
  color: #fff;
}
.story-copy h2, .story-copy p {
  max-width: 12em;
  font-family: var(--heading);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-shadow: 0 2px 18px rgb(6 16 32 / .28);
}
.story-kicker {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: 32px;
  margin: 0;
  color: #fff;
  font-family: var(--heading);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.has-label { position: relative; overflow: hidden; }
.side-label {
  position: absolute;
  z-index: 2;
  top: 56px;
  left: 14px;
  margin: 0;
  color: var(--sky-deep);
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.watermark {
  position: absolute;
  z-index: 0;
  right: -0.06em;
  bottom: -0.16em;
  margin: 0;
  color: transparent;
  font-family: var(--heading);
  font-size: clamp(78px, 15vw, 210px);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-text-stroke: 1px rgb(31 127 196 / 18%);
}
.engagements-copy, .promise-list, .faq-heading, .faq-list, .faq-contact { position: relative; z-index: 1; }
.engagements {
  position: relative;
  width: calc(100% - 20px);
  max-width: none;
  margin-inline: auto;
  padding: 88px clamp(36px, 6vw, 88px) 80px 72px;
  overflow: hidden;
  background: #f7fbfe;
  border-radius: 28px;
}
.engagements h2 { max-width: 10em; }
.promise-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin: 56px 0 0; padding: 0; list-style: none; }
.promise-list h3 { margin-top: 14px; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; }
.promise-list li > p:not(.figure-value) { margin-top: 6px; color: #4a5675; font-size: 16px; }
.figure-value {
  display: flex;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(52px, 5.4vw, 88px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.05em;
}
.figure-unit { margin-left: .16em; color: var(--sky-deep); font-size: .46em; font-weight: 550; letter-spacing: 0; }
.figure-footnote { color: var(--muted) !important; font-size: 13px !important; }
.closing {
  display: grid;
  justify-items: start;
  gap: 22px;
  padding: 72px clamp(28px, 6vw, 88px);
  background: var(--sky-soft);
  border-radius: 28px;
}
.closing .brand-symbol { width: 72px; height: 72px; }
.closing h2 { max-width: 11em; }
.closing .button-white { border: 1px solid #d5e6f2; }
.closing p { color: var(--muted); font-size: 14px; }

.mobile-book { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .line-reveal-inner { transform: translateY(110%); }
  [data-line-reveal].is-in .line-reveal-inner {
    animation: line-rise 1100ms var(--ease) both;
    animation-delay: var(--line-delay, 0ms);
  }
}
@keyframes line-rise { from { transform: translateY(110%); } to { transform: none; } }

@media (max-width: 1050px) {
  main > :is(.how-section, .engagements, .pricing-section, .faq-section, .closing) { margin-top: 72px; }
  .story { height: auto; }
  .story-pin { position: relative; height: min(62vw, 560px); min-height: 320px; margin-inline: 8px; }
  .story-copy { margin-top: 0; gap: 16px; padding: 32px 28px 8px; color: var(--ink); }
  .story-copy h2, .story-copy p { max-width: 16em; color: var(--ink); text-shadow: none; }
  .story-shade { display: none; }
  .engagements { padding: 64px 36px 56px; }
  .promise-list { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
}
@media (max-width: 760px) {
  main > :is(.how-section, .engagements, .pricing-section, .faq-section, .closing) { margin-top: 56px; }
  .bridge { padding: 64px 20px; }
  .bridge p { font-size: clamp(26px, 7vw, 34px); }
  .story-pin { height: min(78vw, 520px); min-height: 280px; }
  .story-copy { padding: 28px 22px 8px; }
  .story-copy h2, .story-copy p { font-size: clamp(30px, 8vw, 40px); }
  .story-kicker { top: 18px; left: 18px; }
  .side-label { position: static; writing-mode: horizontal-tb; transform: none; margin-bottom: 14px; letter-spacing: .16em; }
  .engagements { width: auto; margin-inline: 8px; padding: 32px 22px 40px; border-radius: 20px; }
  .figure-value { font-size: 58px; }
  .watermark { font-size: 84px; }
  .closing { margin-inline: 8px; padding: 40px 22px; border-radius: 20px; }
  body:has(.mobile-book) { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .mobile-book {
    display: block;
    position: fixed;
    z-index: 23;
    right: 10px;
    bottom: 10px;
    left: 10px;
    transition: transform 520ms var(--ease);
  }
  .mobile-book .button { width: 100%; justify-content: space-between; box-shadow: 0 10px 28px rgb(21 37 90 / 18%); }
  .mobile-book-price { font-variant-numeric: tabular-nums; }
  .mobile-book.is-hidden, body:has(dialog[open]) .mobile-book { visibility: hidden; transform: translateY(150%); pointer-events: none; }
  body:has(dialog[open]) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .line-reveal-inner, .mobile-book { transform: none !important; animation: none !important; }
}