@import url("/shared/offer-theme.css");
@font-face { font-family: OfferManrope; src: url("/assets/body.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: OfferManrope; src: url("/assets/display.ttf") format("truetype"); font-weight: 600; font-display: swap; }
/* Section / container / component classes and CMS attributes carry the Webflow mapping. */
.offer-page {
  font-family: OfferManrope, sans-serif;
  --container-large: 1000px;
  --section-space: clamp(56px, 7vw, 88px);
  --color-sales-background: var(--offer-background);
  --color-sales-action: var(--offer-action);
  --color-sales-muted: var(--offer-muted);
  background: var(--color-sales-background);
  scrollbar-color: var(--color-sales-action) var(--color-sales-background);
}
.container-large { width: min(var(--container-large), calc(100% - 64px)); margin-inline: auto; }
.offer-announcement { background: #090c14; color: white; text-align: center; padding: 15px 24px; border-top: 1px solid #ff777055; border-bottom: 1px solid #343948; }
.offer-announcement p { margin: 0; font-size: 14px; font-weight: 500; }
.offer-announcement strong { color: var(--color-sales-action); font-weight: 800; }
.offer-header { display: flex; justify-content: center; padding-block: 27px 17px; }
.offer-header .site-brand { color: white; font-size: 27px; }
.offer-header .site-brand svg { fill: var(--color-sales-action); }
.offer-header .site-brand span { color: var(--color-sales-action); }
.section-offer-hero { color: white; text-align: center; padding: 20px 0 64px; }
.hero-layout { display: flex; flex-direction: column; align-items: center; }
.offer-hero-copy { width: 100%; }
.offer-hero-copy h1 { font-size: clamp(35px, 4.8vw, 62px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; margin: 0 auto 28px; max-width: 1000px; }
.offer-hero-copy mark { color: var(--color-sales-action); background: transparent; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.offer-lead { font-size: clamp(18px, 2vw, 23px); line-height: 1.65; max-width: 760px; margin: 0 auto 23px; color: var(--color-sales-muted); }
.offer-lead strong { color: white; font-weight: 600; }
.hero-price { font-size: clamp(19px, 2.4vw, 27px); line-height: 1.6; margin: 0 0 30px; font-weight: 600; }
.hero-price strong { background: var(--color-sales-action); color: #111626; padding: 1px 8px 3px; white-space: nowrap; font-weight: 800; }
.hero-price > span { white-space: nowrap; }
.offer-video { width: 100%; max-width: 760px; margin: 0 0 25px; }
.offer-video-stage { aspect-ratio: 16/9; position: relative; overflow: hidden; text-align: left; background: #173063; border: 1px solid #56617e; }
.offer-video-stage img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; opacity: .3; }
.offer-video-copy { position: relative; padding: 28px 36px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.video-brand { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.offer-video-copy p { font-size: clamp(24px, 3.5vw, 43px); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 20px; }
.offer-video-copy strong { font-weight: 800; }
.video-placeholder-label { position: absolute; top: 25px; right: 25px; padding: 5px 10px; font-size: 11px; background: #111626; color: white; }
.offer-video figcaption { color: var(--color-sales-muted); font-size: 11px; margin-top: 8px; }
.hero-action { width: 100%; max-width: 760px; }
.offer-button { width: 100%;       text-transform: uppercase;  gap: 20px;  }
.offer-button svg { width: 29px; height: 29px; }
.offer-button:hover { background: var(--cta-background-hover); box-shadow: var(--cta-glow-hover); }
.offer-panel-note { color: var(--color-sales-muted); font-size: 13px; margin: 13px 0 23px; }
.offer-inclusions { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 24px; margin: 0; padding: 22px 0 0; }
.offer-inclusions li { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.5; }
.offer-inclusions svg { color: var(--color-sales-action); width: 17px; height: 17px; }
.section-package {
 background: white;
 color: var(--color-sales-background);
 padding-block: var(--section-space);
 scroll-margin-top: 20px;
}
.package-layout { max-width: 760px; }
.offer-page h2 {
 font-size: clamp(28px, 4.3vw, 48px);
 font-weight: 800;
 text-transform: uppercase;
 line-height: 1.25;
 letter-spacing: -.03em;
 margin-bottom: 24px;
 text-wrap: balance;
}
.package-intro { text-align: center; }
.package-intro .text-accent {
 color: var(--color-sales-background);
 background: var(--color-sales-action);
 padding-inline: 6px;
 box-decoration-break: clone;
 -webkit-box-decoration-break: clone;
}
.package-intro > p { color: #4d5363; font-size: 17px; line-height: 1.55; max-width: 52ch; margin: 0 auto 32px; }
.package-row {
 display: grid;
 grid-template-columns: 26px minmax(0, 1fr);
 column-gap: 16px;
 padding-block: 28px;
 border-bottom: 1px solid #d9dce3;
}
.package-row:first-child { border-top: 1px solid #d9dce3; }
.package-check { grid-column: 1; grid-row: 1 / 4; width: 26px; height: 26px; margin-top: 2px; stroke-width: 2.2; }
.package-row h3 { grid-column: 2; margin: 0 0 12px; font-size: clamp(20px, 2.5vw, 25px); font-weight: 800; text-transform: uppercase; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.package-row p { grid-column: 2; margin: 0; font-size: 17px; color: #4d5363; line-height: 1.6; }
.package-row .draft-inline { font-size: 12px; margin-top: 12px; }
.section-inquiry {
 background: var(--color-sales-background);
 color: white;
 padding-block: var(--section-space);
 scroll-margin-top: 24px;
}
.inquiry-layout { max-width: 760px; }
.inquiry-layout > div { text-align: center; }
.inquiry-emphasis { color: var(--color-sales-action); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.inquiry-layout > div > p { font-size: 17px; line-height: 1.55; }
.inquiry-layout > div > p > strong { color: var(--color-sales-action); font-weight: 600; }
.inquiry-note { color: var(--color-sales-muted); max-width: 49ch; margin: 0 auto 30px; }
.offer-form { max-width: 560px; margin-inline: auto; }
.offer-form .field { gap: 8px; margin-bottom: 20px; }
.offer-form .field label { font-size: 14px; font-weight: 600; }
.offer-form .field input {
 font-size: 16px;
 color: white;
 background: #1b2235;
 border: 1px solid #697187;
 border-radius: 8px;
 min-height: 54px;
 padding: 13px 15px;
 caret-color: var(--color-sales-action);
}
.offer-form .field input:focus { border-color: var(--color-sales-action); }
.offer-form .form-preview { margin: 0 0 24px; padding: 14px 0; border-top: 1px solid #ffffff30; border-bottom: 1px solid #ffffff30; border-radius: 0; color: var(--color-sales-muted); font-size: 12px; line-height: 1.5; background: transparent; }
.offer-form button { min-height: 64px; margin-top: 6px; }
.offer-form button:disabled { opacity: .55; cursor: not-allowed; }
.offer-form .form-status { color: var(--color-sales-action); font-size: 14px; }
.section-inquiry :focus-visible { outline-color: var(--color-sales-action); }
.section-package :focus-visible { outline-color: var(--color-sales-background); }
.offer-footer { color: white; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; align-items: center; gap: 20px; padding-block: 28px; border-top: 1px solid #ffffff30; }
.offer-footer-logo { display: block; width: 112px; height: 112px; object-fit: contain; }
.offer-footer p, .offer-footer > a { font-size: 12px; color: var(--color-sales-muted); margin: 0; line-height: 1.5; }
.offer-footer > a { text-decoration: underline; text-underline-offset: 3px; }
.offer-footer > a:hover { color: var(--color-sales-action); }
.offer-conditions-link { text-decoration: underline; text-underline-offset: 3px; }
.offer-footer .offer-disclaimer, .offer-footer .offer-draft-note { flex-basis: 100%; max-width: 100%; }
.offer-header :focus-visible, .section-offer-hero :focus-visible, .offer-footer :focus-visible { outline-color: var(--color-sales-action); }
@media (max-width: 700px) {
 .container-large { width: calc(100% - 40px); }
 .offer-announcement p { font-size: 12px; line-height: 1.6; }
 .offer-announcement strong { display: block; }
 .offer-header { padding-block: 23px 15px; }
 .section-offer-hero { padding-top: 14px; }
 .offer-hero-copy h1 { font-size: clamp(29px, 7.4vw, 48px); line-height: 1.2; margin-bottom: 25px; }
 .offer-hero-copy mark { text-decoration-thickness: 2px; text-underline-offset: 5px; }
 .offer-lead { font-size: 17px; }
 .hero-price { font-size: 19px; }
 .hero-price > span { display: block; font-size: 15px; margin-top: 4px; }
 .offer-video-copy { padding: 18px; }
 .video-brand { font-size: 14px; }
 .offer-video-copy p { font-size: clamp(20px, 5vw, 32px); margin-bottom: 0; }
 .video-placeholder-label { top: 14px; right: 14px; font-size: 9px; }
 .offer-button {   gap: 12px;  }
 .offer-inclusions { column-gap: 15px; }
 .offer-inclusions li { font-size: 11px; }
 .offer-footer { flex-wrap: wrap; }
 .offer-footer p { width: 100%; order: 3; }
 .package-row p { font-size: 16px; }
}

/* First-screen layout: reserve space for the copy and CTA; media takes the remainder.
   svh uses the available height even while mobile browser controls are expanded.
   Intrinsic minimum sizes preserve readability when zoom or extreme sizes need scrolling. */
.section-offer-hero {
  min-height: 100svh;
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.offer-announcement { padding-block: 8px; }
.offer-announcement p { font-size: 12px; line-height: 1.5; }
.offer-header { padding-block: clamp(8px, 1.5svh, 16px); }
.offer-header .site-brand { font-size: 23px; }
.offer-header .site-brand svg { width: 23px; height: 23px; }
.hero-layout {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(100px, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: clamp(8px, 1.5svh, 16px);
}
.offer-hero-copy h1 {
  font-size: clamp(28px, min(4.3vw, 5.6svh), 56px);
  line-height: 1.25;
  margin-bottom: clamp(9px, 1.5svh, 16px);
}
.offer-lead {
  font-size: clamp(16px, min(1.9vw, 2.4svh), 21px);
  line-height: 1.65;
  margin-bottom: clamp(9px, 1.4svh, 15px);
}
.hero-price { font-size: clamp(18px, 2.6svh, 25px); line-height: 1.4; margin: 0; }
.offer-video {
  margin: 0;
  width: min(100%, 760px);
  height: 100%;
  min-height: 100px;
  max-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.offer-video-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  aspect-ratio: auto;
}
.offer-video-copy { padding: clamp(12px, 2svh, 24px); justify-content: center; gap: 8px; }
.offer-video-copy p { font-size: clamp(18px, 3.2svh, 32px); margin: 0; }
.video-brand { font-size: 14px; }
.video-placeholder-label { top: 12px; right: 12px; font-size: 10px; }
.offer-video figcaption { margin-top: 5px; font-size: 10px; line-height: 1.4; }
.offer-panel-note { font-size: 12px; line-height: 1.4; margin: 7px 0 9px; }
.offer-inclusions { padding-top: 9px; gap: 6px 18px; }
.offer-inclusions li { font-size: 11px; line-height: 1.4; }
@media (min-height: 651px) {
 .section-offer-hero { min-height: 100svh; }
}
@media (max-width: 700px) {
 .offer-announcement p { font-size: 11px; }
 .hero-layout { width: calc(100% - 32px); }
 .offer-hero-copy h1 { font-size: clamp(25px, min(7vw, 4.2svh), 42px); }
 .offer-lead { font-size: clamp(14px, min(4vw, 2.1svh), 18px); line-height: 1.65; }
 .hero-price { font-size: 18px; }
 .hero-price > span { display: inline; font-size: 13px; }
 .offer-video { max-height: 260px; }
 .offer-video-copy p { font-size: clamp(16px, 2.6svh, 24px); }
 .offer-button {   gap: 10px; }
 .offer-button svg { width: 23px; height: 23px; }
 .offer-inclusions { gap: 5px 12px; }
 .offer-inclusions li { font-size: 10px; }
}
@media (max-width: 700px) and (max-height: 650px) {
 .section-offer-hero { min-height: 100svh; }
 .offer-announcement { padding-block: 5px; }
 .offer-header { padding-block: 6px; }
 .hero-layout { gap: 7px; grid-template-rows: auto minmax(85px, 1fr) auto; }
 .offer-hero-copy h1 { font-size: 24px; margin-bottom: 8px; }
 .offer-lead { font-size: 14px; margin-bottom: 8px; }
 .offer-video { min-height: 85px; }
 .offer-video-copy { padding: 8px 12px; gap: 4px; }
 .offer-video-copy p { font-size: 15px; }
 .offer-video-copy p br { display: none; }
 .offer-video-copy p strong { display: block; }
 .video-placeholder-label { top: 8px; right: 8px; font-size: 9px; padding: 3px 6px; }
 .offer-panel-note { font-size: 11px; margin-block: 5px 7px; }
}



@media (max-width: 700px) {
 .offer-inclusions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .offer-inclusions li { justify-content: center; align-items: flex-start; }
 .offer-inclusions li span { hyphens: auto; overflow-wrap: anywhere; }
 .offer-inclusions svg { width: 13px; height: 14px; }
}
@media (max-width: 350px) and (max-height: 650px) {
 .offer-announcement { padding-block: 4px; }
 .offer-announcement p { font-size: 10px; line-height: 1.3; }
 .offer-header { padding-block: 2px; }
 .offer-header .site-brand { font-size: 18px; }
 .offer-header .site-brand svg { width: 18px; height: 18px; }
 .offer-hero-copy h1 { font-size: 22px; }
 .hero-layout { gap: 4px; }
 .offer-panel-note { margin-block: 4px; }
}


/* Phone landscape is intentionally scrollable, retaining the centered composition. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
 .section-offer-hero { height: auto; }
 .hero-layout { flex: none; grid-template-rows: auto auto auto; gap: 16px; }
 .offer-video { height: 220px; }
}

@media (max-width: 350px) {
 .offer-inclusions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
 .offer-inclusions li span { hyphens: none; overflow-wrap: normal; }
}

/* Capacity warning stays in normal flow and uses the owner's confirmed September offer. */
.offer-announcement {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 padding: 10px 16px;
 border-bottom-color: #ff777055;
 margin-bottom: clamp(12px, 2svh, 22px);
}
.offer-announcement p { max-width: 850px; font-size: 13px; line-height: 1.4; }
.offer-announcement strong { display: inline; color: #ff7770; }
.urgency-icon { width: 20px; height: 20px; color: #ff7770; }
@media (max-width: 700px) {
 .offer-announcement { padding: 8px 14px; margin-bottom: 12px; gap: 8px; }
 .offer-announcement p { font-size: 11px; }
 .urgency-icon { width: 18px; height: 18px; }
}
@media (max-width: 350px) and (max-height: 650px) {
 .offer-announcement { padding: 6px 12px; margin-bottom: 8px; }
 .offer-announcement p { font-size: 10px; }
}

/* Give the headline room; connect the price directly to the VSL. */
.offer-hero-copy h1 { margin-bottom: clamp(18px, 3svh, 30px); }
.hero-layout { align-items: stretch; }
.offer-video { align-self: start; justify-self: center; }
.hero-action { justify-self: center; }
@media (max-width: 700px) and (max-height: 650px) {
 .offer-hero-copy h1 { margin-bottom: 16px; }
}
.hero-layout { row-gap: clamp(4px, .7svh, 8px); }

.video-direction {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 flex: 0 0 30px;
 color: var(--color-sales-action);
 font-size: 13px;
 font-weight: 600;
 line-height: 1.3;
}
.video-direction svg { width: 52px; height: 28px; stroke-width: 2.5; }
@media (max-width: 700px) {
 .video-direction { flex-basis: 25px; font-size: 11px; }
 .video-direction svg { width: 42px; height: 24px; }
}

@media (max-width: 700px) {
 .package-layout, .inquiry-layout, .offer-footer { width: calc(100% - 32px); }
 .package-intro > p, .inquiry-layout > div > p { font-size: 16px; }
 .package-row { grid-template-columns: 21px minmax(0, 1fr); column-gap: 11px; padding-block: 25px; }
 .package-check { width: 21px; height: 21px; }
 .package-row h3 { font-size: 20px; }
 .offer-footer { justify-content: center; text-align: center; gap: 18px; }
 .offer-footer-logo { width: 96px; height: 96px; }
}

/* Keep video and action together; spend spare viewport height between text levels. */
.hero-layout { grid-template-rows: minmax(min-content, 1fr) auto auto; }
.offer-hero-copy { display: flex; flex-direction: column; justify-content: space-evenly; }
.offer-video { height: clamp(130px, 35svh, 350px); }
@media (max-width: 700px) {
 .offer-video { height: clamp(110px, 28svh, 260px); }
}
@media (max-width: 700px) and (max-height: 650px) {
 .offer-video { height: 105px; }
}
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
 .hero-layout { grid-template-rows: auto auto auto; }
 .offer-video { height: 220px; }
}

/* Fixed type scale; breakpoints change sizes in whole, even pixel steps. */
.offer-page { font-size: 18px; }
.offer-hero-copy h1 { font-size: var(--offer-display-size); font-weight: bold; }
.offer-lead { font-size: var(--offer-lead-size); }
.hero-price { font-size: 24px; }
.hero-price > span { font-size: 16px; }
.offer-announcement p { font-size: 14px; }
.offer-video-copy p { font-size: 28px; }
.video-placeholder-label, .offer-video figcaption { font-size: 10px; }
.video-direction { font-size: 14px; }
.offer-panel-note, .offer-inclusions li { font-size: 12px; }
.offer-page h2 { font-size: 40px; }
.package-row h3 { font-size: 24px; }
.package-intro > p, .package-row p, .inquiry-layout > div > p { font-size: 18px; }
.package-row .draft-inline, .offer-form .form-preview, .offer-footer p, .offer-footer > a { font-size: 12px; }
.offer-form .field label, .offer-form .form-status { font-size: 14px; }
.offer-form .field input { font-size: 16px; }
@media (max-width: 700px) {
 .offer-page { font-size: 16px; }
 .offer-hero-copy h1 { font-size: 28px; }
 .offer-lead { font-size: 18px; }
 .hero-price { font-size: 20px; }
 .offer-announcement p { font-size: 12px; }
 .offer-video-copy p { font-size: 20px; }
 .video-direction { font-size: 12px; }
  .offer-inclusions li { font-size: 10px; }
 .offer-page h2 { font-size: 28px; }
 .package-row h3 { font-size: 20px; }
 .package-intro > p, .package-row p, .inquiry-layout > div > p { font-size: 16px; }
}

/* Bounded text spacing: extra screen height belongs after the hero, not between sentences. */
.hero-layout {
 flex: none;
 grid-template-rows: auto auto auto;
 row-gap: clamp(6px, 1vw, 10px);
}
.offer-hero-copy { display: block; }
.offer-hero-copy h1 { margin-bottom: clamp(18px, 2.4vw, 28px); }
.offer-lead { margin-bottom: clamp(14px, 1.8vw, 20px); }
.hero-price { margin-bottom: 0; }
@media (max-width: 700px) {
 .offer-video { height: clamp(150px, 28svh, 260px); }
}
@media (max-width: 700px) and (max-height: 650px) {
 .offer-video { height: 105px; }
}
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
 .offer-video { height: 220px; }
}

/* Instruction below the VSL follows the fixed subheadline scale. */
.offer-video figcaption {
 font-size: 20px;
 line-height: 1.4;
 margin-top: 10px;
 color: var(--color-sales-muted);
 text-wrap: balance;
}
@media (max-width: 700px) {
 .offer-video figcaption { font-size: 18px; }
}
@media (min-width: 701px) and (max-height: 800px) {
 .offer-video { height: clamp(120px, 29svh, 230px); }
}

.offer-video figcaption { text-align: center; }
.offer-video figcaption > span { flex: 1; min-width: 0; }

/* Give spare portrait height to the video instead of empty space below the action. */
@media (max-width: 700px) and (orientation: portrait) {
 .section-offer-hero { padding-bottom: 12px; }
 .hero-layout { flex: 1; grid-template-rows: auto minmax(min-content, 1fr) auto; }
 .offer-video { height: auto; max-height: none; min-height: 0; align-self: stretch; }
 .offer-video-stage { min-height: 130px; }
 .offer-video figcaption { position: relative; padding-inline: 24px; margin-top: 8px; }
}
@media (max-width: 700px) and (orientation: portrait) and (max-height: 740px) {
 .offer-lead, .offer-video figcaption { font-size: 16px; }
 .offer-hero-copy h1 { margin-bottom: 14px; }
 .offer-lead { margin-bottom: 10px; }
}

/* Wider copy frees vertical space for the video on tablets and desktops. */
@media (min-width: 701px) {
 .hero-layout {
  width: min(1200px, calc(100% - 64px));
  flex: 1;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
 }
 .offer-hero-copy h1 { max-width: 1200px; }
 .offer-lead { max-width: 1060px; }
 .offer-video { height: auto; max-height: none; align-self: stretch; }
 .offer-video-stage { min-height: 200px; }
 .offer-video figcaption { position: relative; padding-inline: 32px; }
}
@media (min-width: 701px) and (max-width: 1024px) {
 .hero-layout { width: calc(100% - 40px); }
 .offer-hero-copy h1 { font-size: 40px; }
}
@media (min-width: 701px) and (min-height: 950px) {
 .section-offer-hero { min-height: 0; }
 .hero-layout { flex: none; grid-template-rows: auto auto auto; }
 .offer-video-stage { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}

/* The frame keeps its ratio; the caption retains its own readable width. */
.hero-layout { flex: none; grid-template-rows: auto auto auto; grid-template-columns: minmax(0, 1fr); }
.hero-layout > * { min-width: 0; }
.offer-video { height: auto; min-height: 0; max-height: none; align-self: start; }
.offer-video-stage {
 flex: none;
 width: 100%;
 max-width: 100%;
 height: auto;
 min-height: 0;
 aspect-ratio: 16 / 9;
}
.offer-video-stage img { object-fit: contain; }
.offer-video figcaption { width: 100%; position: relative; padding-inline: 44px; }

.offer-button { background: var(--cta-background); color: var(--cta-color); border-radius: var(--cta-radius); font-size: var(--cta-font-size); font-weight: var(--cta-font-weight); line-height: var(--cta-line-height); min-height: var(--cta-min-height); padding: var(--cta-padding); box-shadow: var(--cta-glow); }

@media (max-width: 700px) {
 .section-offer-hero { min-height: 0; }
}