@font-face {
  font-family: "Lavishly Yours";
  src: url("assets/fonts/LavishlyYours-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

body.landing {
  /* Landing hero tweak panel. Keep this short and value-focused for manual tuning. */
  /* note to piper: top bar - height - changes the glass navigation bar height */
  --landing-nav-height: 80px;
  /* note to piper: top bar - wash - changes the warm translucent color over the page */
  --landing-nav-wash: rgba(244, 243, 240, 0.68);
  /* note to piper: top bar - logo size - changes the logo image inside the navigation */
  --landing-logo-width: clamp(190px, 20vw, 250px);
  --landing-logo-width-small-screen: 175px;
  --landing-logo-height: 58px;
  /* note to piper: top bar - logo position - pins the logo from the left side of the viewport */
  --landing-logo-left: 50px;
  /* note to piper: hero layout - left offset - moves the hero copy horizontally */
  --landing-hero-left: calc(clamp(24px, 5vw, 76px) + 10px);
  --landing-hero-left-mobile: 44px;
  /* note to piper: hero layout - height - adds extra vertical space below the full-screen hero */
  --landing-hero-min-height: clamp(640px, 94svh, 980px);
  --landing-hero-min-height-mobile: 92svh;
  --landing-hero-height-extra: 100px;
  /* note to piper: hero copy - bottom offset - pushes the headline block upward from the bottom */
  --landing-copy-bottom-anchor: clamp(54px, 10vh, 118px);
  --landing-copy-bottom-anchor-mobile: clamp(42px, 9vh, 72px);
  --landing-copy-up: 100px;
  /* note to piper: hero type - headline size - changes the large serif headline */
  --landing-headline-size: clamp(42px, 4.4vw, 68px);
  --landing-headline-size-mobile: clamp(40px, 11vw, 64px);
  --landing-headline-size-small-screen: clamp(36px, 10.7vw, 48px);
  /* note to piper: hero type - supporting copy size - changes the short paragraph under the headline */
  --landing-supporting-copy-size: clamp(18px, 1.35vw, 22px);
  --landing-supporting-copy-size-mobile: clamp(17px, 4.5vw, 20px);
  /* note to piper: hero image - treatment - tunes photo brightness, contrast, and crop position */
  --landing-image-brightness: 1.34;
  --landing-image-contrast: 0.92;
  --landing-image-position: 55% 48%;
  --landing-image-position-mobile: 52% 50%;
  /* note to piper: hero image - overlay strength - tunes the left and bottom darkening over the photo */
  --landing-overlay-side-start-opacity: 0.2;
  --landing-overlay-side-mid-opacity: 0.08;
  --landing-overlay-side-end-opacity: 0;
  --landing-overlay-bottom-start-opacity: 0.18;
  --landing-overlay-bottom-mid-opacity: 0.02;
  /* note to piper: script line - position - moves the handwritten headline line on X/Y axes */
  --landing-script-line-x: 75px;
  --landing-script-line-y: 10px;
  --landing-script-line-x-mobile: 43px;
  /* note to piper: script line - color - changes the handwritten "Your ring." text */
  --landing-script-line-color: rgba(250, 249, 247, 0.54);
  --landing-script-line-size-boost: 10px;
  /* note to piper: button - padding - changes the pill CTA interior spacing */
  --landing-button-padding-y: 12px;
  --landing-button-padding-x: 21px;
  --landing-button-min-height: 48px;
  --landing-surface: #f4f1ea;
  --landing-surface-bright: #faf9f7;
  --landing-surface-low: #ece7df;
  --landing-ink: #1a1c1c;
  --landing-muted: #4c4546;
  --landing-rule: #cfc4c5;
  margin: 0;
  overflow-x: hidden;
  background: var(--landing-surface);
  color: var(--landing-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.landing * {
  box-sizing: border-box;
}

body.landing a {
  color: inherit;
}

.photo-hero {
  position: relative;
  display: grid;
  min-height: calc(var(--landing-hero-min-height) + var(--landing-hero-height-extra));
  overflow: hidden;
  isolation: isolate;
}

.photo-hero-image,
.photo-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo-hero-image {
  z-index: -2;
  object-fit: cover;
  object-position: var(--landing-image-position);
  filter: grayscale(1) contrast(var(--landing-image-contrast)) brightness(var(--landing-image-brightness));
  transform: scale(1.01);
}

.photo-hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(250, 249, 247, 0.46) 0%, rgba(250, 249, 247, 0.2) 36%, rgba(250, 249, 247, 0.04) 72%),
    linear-gradient(0deg, rgba(244, 241, 234, 0.34) 0%, rgba(244, 241, 234, 0.04) 58%);
}

.landing-header {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(250, 249, 249, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 40px 100px rgba(212, 230, 229, 0.1);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transform: translateY(0);
  transition: transform 500ms ease-in-out, opacity 500ms ease-in-out, filter 500ms ease-in-out;
}

.landing-header > div {
  position: relative;
  justify-content: space-between;
  max-width: none;
  padding-right: var(--landing-logo-left);
  padding-left: var(--landing-logo-left);
}

.landing-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  height: 20px;
  pointer-events: none;
  background: rgba(250, 249, 249, 0.6);
  opacity: 0;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1440' height='44' viewBox='0 0 1440 44' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H1440V17C1326 32 1216 16 1104 23C982 31 888 13 767 22C647 31 552 14 430 23C315 31 205 15 100 24C55 28 24 31 0 27V0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='1440' height='44' viewBox='0 0 1440 44' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H1440V17C1326 32 1216 16 1104 23C982 31 888 13 767 22C647 31 552 14 430 23C315 31 205 15 100 24C55 28 24 31 0 27V0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: opacity 500ms ease-in-out;
}

body.landing-header-wavy .landing-header::after {
  opacity: 1;
}

body.landing-header-hidden .landing-header {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(-112%);
}

.max-w-container-max {
  max-width: 1440px;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.px-gutter {
  padding-right: 24px;
  padding-left: 24px;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.h-20 {
  height: 80px;
}

.gap-md {
  gap: 32px;
}

.gap-sm {
  gap: 16px;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
}

.wordmark-small {
  font-family: "Lavishly Yours", "Parisienne", "Brush Script MT", "Segoe Script", "Apple Chancery", cursive;
  font-weight: 500;
  text-decoration: none;
}

.landing-logo-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: var(--landing-logo-width);
  height: var(--landing-logo-height);
  line-height: 0;
  text-decoration: none;
}

.landing-logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-logo-link:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.28);
  outline-offset: 4px;
}

.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-header-title {
  position: absolute;
  left: 50%;
  margin: 0;
  color: rgba(26, 28, 28, 0.78);
  font-family: Manrope, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.landing-icon-link {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #000;
  text-decoration: none;
  transition: color 300ms ease;
}

.landing-icon-link:hover,
.landing-icon-link:focus-visible {
  color: #4c4546;
}

.landing-icon-link:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.28);
  outline-offset: 4px;
}

.landing-icon-link svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.photo-hero-copy {
  align-self: end;
  width: min(430px, calc(100% - var(--landing-hero-left) - 24px));
  margin: 0 0 calc(var(--landing-copy-bottom-anchor) + var(--landing-copy-up)) var(--landing-hero-left);
  color: var(--landing-ink);
  text-shadow: 0 2px 24px rgba(250, 249, 247, 0.46);
}

.photo-hero-copy h1 {
  display: grid;
  gap: 2px;
  margin: 0 0 18px;
  font-family: Didot, "Bodoni 72", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: var(--landing-headline-size);
  font-weight: 400;
  line-height: 0.98;
}

.photo-hero-copy h1 span {
  white-space: nowrap;
}

.photo-hero-copy h1 .script-line {
  font-family: "Lavishly Yours", "Parisienne", "Brush Script MT", "Segoe Script", "Apple Chancery", cursive;
  color: var(--landing-script-line-color);
  font-size: calc(1em + var(--landing-script-line-size-boost));
  font-weight: 700;
  transform: translate(var(--landing-script-line-x), var(--landing-script-line-y));
}

.photo-hero-copy p {
  display: grid;
  gap: 1px;
  max-width: none;
  margin: 0 0 26px;
  font-family: Didot, "Bodoni 72", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: var(--landing-supporting-copy-size);
  line-height: 1.28;
  color: var(--landing-muted);
  transform: translateY(20px);
}

.photo-hero-copy .brief-line {
  white-space: nowrap;
  transform: translateY(10px);
}

.cta {
  display: inline-grid;
  place-items: center;
  min-height: var(--landing-button-min-height);
  padding: var(--landing-button-padding-y) var(--landing-button-padding-x);
  border: 1px solid rgba(26, 28, 28, 0.26);
  border-radius: 999px;
  background: rgba(250, 249, 247, 0.54);
  color: var(--landing-ink);
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
  text-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 14px 34px rgba(52, 45, 38, 0.12);
}

.cta:hover {
  background: rgba(250, 249, 247, 0.78);
}

.cta-row,
.video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.photo-hero-copy .cta-row {
  transform: translateY(20px);
}

.video-actions {
  justify-content: center;
  margin-top: 28px;
}

.cta-quiet {
  background: rgba(250, 249, 247, 0.54);
}

.cta-quiet:hover {
  background: rgba(250, 249, 247, 0.78);
}

.cta:focus-visible {
  outline: 3px solid rgba(87, 104, 103, 0.35);
  outline-offset: 3px;
}

main {
  background: var(--landing-surface);
  color: var(--landing-ink);
}

.video-section,
.algorithm-section,
.brief-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(70px, 10vw, 130px) 0;
}

.video-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: start;
  width: min(1440px, 100%);
  padding: 96px 24px 58px;
}

.video-section .section-copy {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.video-section .eyebrow {
  margin-bottom: -6px;
  font-size: 19px;
  transform: translateY(-22px);
}

.brief-section {
  border-top: 1px solid rgba(23, 29, 26, 0.12);
  display: flex;
  justify-content: center;
  padding-top: 18px;
  text-align: center;
}

.brief-section .section-copy {
  max-width: min(760px, 100%);
}

.brief-section .section-copy h2 {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 1.3;
  white-space: nowrap;
}

.algorithm-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 6vw, 82px);
  align-items: start;
  padding-top: 35px;
  padding-bottom: 35px;
  border-top: 1px solid rgba(23, 29, 26, 0.12);
}

.section-copy {
  max-width: 560px;
}

.eyebrow {
  margin: 0 0 8px;
  color: rgba(76, 69, 70, 0.76);
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.section-copy h2 {
  margin: 0;
  color: #000;
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}

.script-brand {
  font-family: "Lavishly Yours", "Parisienne", "Brush Script MT", "Segoe Script", "Apple Chancery", cursive;
  font-size: 1.18em;
  font-weight: 500;
  line-height: 0.8;
}

.section-copy p {
  margin: 0;
  color: #4c4546;
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

.section-rule {
  width: 48px;
  height: 1px;
  margin: 16px auto 32px;
  background: var(--landing-rule);
}

.hero-video-wrap {
  overflow: hidden;
  width: min(100%, 1240px);
  margin: 0 auto;
  border: 1px solid rgba(207, 196, 197, 0.72);
  border-radius: 8px;
  background: var(--landing-surface-low);
  box-shadow: 0 34px 92px rgba(80, 71, 62, 0.13);
}

.hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.algorithm-panel {
  display: grid;
}

.signal-row {
  display: grid;
  grid-template-columns: 44px minmax(160px, 0.7fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px 0;
}

.signal-row + .signal-row {
  border-top: 1px solid rgba(24, 58, 51, 0.18);
}

.signal-row span {
  color: #8b743b;
  font-size: 12px;
  font-weight: 760;
}

.signal-row strong {
  color: var(--landing-ink);
  font-family: Didot, "Bodoni 72", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 400;
  line-height: 1.08;
}

.signal-row p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.45;
}

.cta-secondary {
  border-color: rgba(24, 58, 51, 0.34);
  background: rgba(26, 28, 28, 0.9);
  color: #fffdf8;
  box-shadow: none;
}

.brief-section .cta-secondary {
  color: #fffdf8;
}

.cta-secondary:hover {
  background: #000;
}

.cta-secondary-quiet {
  border-color: rgba(24, 58, 51, 0.34);
  background: rgba(26, 28, 28, 0.9);
  color: #fffdf8;
}

.cta-secondary-quiet:hover {
  background: #000;
}

.landing-copyright {
  margin: 0;
  padding: 0 18px 14px;
  color: var(--landing-ink);
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
}

.landing-footer span {
  color: rgba(255, 253, 248, 0.72);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 860px) {
  body.landing {
    --landing-nav-height: 72px;
    --landing-logo-width: 112px;
    --landing-hero-left: var(--landing-hero-left-mobile);
    --landing-hero-min-height: var(--landing-hero-min-height-mobile);
    --landing-image-position: var(--landing-image-position-mobile);
    --landing-copy-bottom-anchor: var(--landing-copy-bottom-anchor-mobile);
    --landing-headline-size: var(--landing-headline-size-mobile);
    --landing-supporting-copy-size: var(--landing-supporting-copy-size-mobile);
    --landing-script-line-x: var(--landing-script-line-x-mobile);
  }

  .px-gutter {
    padding-right: 18px;
    padding-left: 18px;
  }

  .photo-hero-copy {
    width: min(440px, calc(100% - var(--landing-hero-left) - 18px));
    margin: 0 18px calc(var(--landing-copy-bottom-anchor) + var(--landing-copy-up)) var(--landing-hero-left);
  }

  .photo-hero-copy p {
    max-width: 360px;
  }

  .photo-hero-copy .brief-line {
    white-space: normal;
  }

  .video-section {
    grid-template-columns: 1fr;
  }

  .algorithm-section {
    grid-template-columns: 1fr;
  }

  .signal-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .signal-row p {
    grid-column: 2;
  }

}

@media (max-width: 520px) {
  body.landing {
    --landing-logo-width: var(--landing-logo-width-small-screen);
    --landing-headline-size: var(--landing-headline-size-small-screen);
  }

  .photo-hero-copy p {
    max-width: 330px;
  }

  .cta {
    min-width: 210px;
  }

  .video-section,
  .algorithm-section,
  .brief-section {
    width: min(100% - 36px, 1180px);
  }

  .brief-section .section-copy h2 {
    white-space: normal;
  }

}

@media (max-width: 380px) {
  body.landing {
    --landing-hero-left: 32px;
    --landing-headline-size: clamp(34px, 10vw, 40px);
    --landing-script-line-x: 10px;
  }

  .photo-hero-copy {
    width: min(100% - 56px, 340px);
  }

  .photo-hero-copy p {
    max-width: 100%;
  }
}