@font-face {
  font-family: "Pinyon Script";
  src: url("assets/fonts/pinyon-script-regular.woff2") format("woff2"),
    url("assets/fonts/pinyon-script-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #030303;
  --ink: #11100f;
  --cream: #fbfaf6;
  --soft: #d8d0c1;
  --muted: #a9a093;
  --gold: #c99b2f;
  --gold-light: #f4d77a;
  --gold-dark: #8b6617;
  --pink: #e6498b;
  --pink-light: #f28fb9;
  --pink-dark: #a3376a;
  --line: rgba(201, 155, 47, 0.66);
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--cream);
  background: var(--black);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--pink);
  color: var(--cream);
}

img {
  max-width: 100%;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-dark {
  background:
    radial-gradient(circle at 78% 18%, rgba(201, 155, 47, 0.13), transparent 26rem),
    radial-gradient(circle at 16% 86%, rgba(230, 73, 139, 0.1), transparent 26rem),
    linear-gradient(135deg, #000 0%, #050505 52%, #100e0a 100%);
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  width: 100%;
  padding: 0 max(18px, calc((100% - var(--max)) / 2));
  background: #000;
  min-height: 108px;
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand-mark {
  width: 108px;
  display: block;
}

.brand-mark img {
  width: 100%;
  height: auto;
  display: block;
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
}

.site-nav a {
  color: rgba(255, 255, 255, 0.82);
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

/* 6 primary nav links + CTA need tighter spacing just above the 1040px hamburger cutoff */
@media (min-width: 1041px) and (max-width: 1220px) {
  .site-nav {
    gap: 13px;
    letter-spacing: 0.11em;
  }
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--pink-light);
  border-color: var(--pink);
}

/* Nav links are grouped in markup (Explore / Resources / Connect) so the mobile
   menu can present them as organized sections; on desktop the groups collapse
   via display:contents so the links still lay out as one flat row. */
.nav-group {
  display: contents;
}

.nav-group-label,
.site-nav .nav-cta {
  display: none;
}

.menu-toggle {
  display: none;
}

/* "More" dropdown: on desktop, only the 6 primary pages (Home, About,
   Services, Work, Mentorship, Contact) show inline in the nav row — FAQ,
   Guidelines, Youth Legacy Project, and Creative Hub collapse into this
   small hamburger dropdown so the row stays short and the "Book a
   Discovery Call" button never gets crowded off the edge. On mobile the
   full-screen menu already lists every link grouped and labeled, so this
   stays hidden there — its `.nav-secondary` counterparts inside the
   grouped panel remain the only copies visible on mobile. */
.nav-more {
  display: none;
}

@media (min-width: 1041px) {
  .nav-secondary {
    display: none;
  }

  .nav-more {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .nav-more-toggle {
    display: grid;
    gap: 4px;
    width: 34px;
    height: 34px;
    place-content: center;
    border: 1px solid var(--gold);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
  }

  .nav-more-toggle:hover,
  .nav-more-toggle:focus-visible {
    border-color: var(--gold-light);
    background: rgba(201, 155, 47, 0.1);
  }

  .nav-more-toggle span:not(.sr-only) {
    display: block;
    width: 16px;
    height: 1px;
    background: var(--gold-light);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .nav-more-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .nav-more-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-more-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .nav-more-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--gold);
    background: #0b0a06;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(201, 155, 47, 0.14);
  }

  .nav-more.is-open .nav-more-panel {
    display: flex;
  }

  .nav-more-panel a {
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    white-space: nowrap;
    border-bottom: 0;
  }

  .nav-more-panel a:hover,
  .nav-more-panel a:focus-visible {
    color: var(--pink-light);
    background: rgba(230, 73, 139, 0.08);
  }
}

/* force-hamburger pages always show the full mobile-style menu regardless
   of width (see the block near the end of this file), so the desktop
   "More" dropdown never applies there — avoids two hamburger icons at once. */
body.force-hamburger .nav-more {
  display: none;
}

.outline-button,
.gold-button,
.dark-button,
.discovery-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
}

.outline-button {
  border: 1px solid var(--pink);
  color: var(--pink-light);
}

.gold-button {
  border: 1px solid #f7dd82;
  color: #090805;
  background: linear-gradient(135deg, #fff1a8 0%, #d8a532 45%, #fff1a8 100%);
  box-shadow: 0 0 22px rgba(201, 155, 47, 0.22);
}

.dark-button {
  background: #030303;
  border: 1px solid #111;
  color: var(--gold-light);
}

/* Every "Book a Discovery Call" button site-wide (header, mobile menu,
   footer, page CTAs) shares this one style: filled with the same
   gold-to-pink gradient and shimmer motion as the hero h1 span (the word
   "becomes"), with solid black text so it stays readable against the
   bright, moving background. */
.discovery-button {
  border: 1px solid var(--pink-light);
  color: #090805;
  background: linear-gradient(100deg, var(--gold-light) 4%, var(--gold) 20%, var(--pink) 40%, var(--pink-light) 52%, var(--pink) 64%, var(--gold) 82%, var(--gold-light) 96%, var(--gold) 100%);
  background-size: 220% 100%;
  box-shadow: 0 0 22px rgba(230, 73, 139, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
  .discovery-button {
    animation: gold-shimmer 6s linear infinite;
  }
}

.discovery-button:hover,
.discovery-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(230, 73, 139, 0.4);
}

.hero {
  position: relative;
  background: #000;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  padding: 148px max(22px, 4vw) 146px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  overflow: hidden;
}

.page-hero {
  min-height: 420px;
  padding: 164px max(22px, calc((100vw - var(--max)) / 2)) 72px;
  display: grid;
  align-items: end;
}

.page-hero h1 {
  max-width: 920px;
  font-size: clamp(42px, 6vw, 76px);
}

.page-hero p {
  max-width: 720px;
  color: var(--soft);
  font-size: 17px;
}

.content-section {
  padding: 72px max(22px, calc((100vw - var(--max)) / 2));
}

.content-section.light {
  background: var(--cream);
  color: var(--ink);
}

.content-section.light p {
  color: #37302a;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.content-card {
  border: 1px solid var(--line);
  padding: 28px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}

.content-card h2,
.content-card h3 {
  margin-bottom: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.content-card p {
  color: var(--soft);
  flex: 1;
}

.content-card p.eyebrow {
  flex: none;
}

.content-card .gold-button,
.content-card .outline-button,
.content-card .discovery-button {
  margin-top: auto;
  align-self: flex-start;
}

.content-card .line-icon {
  width: 62px;
  height: 62px;
  margin: 0 0 20px;
}

.content-card .line-icon svg {
  width: 38px;
  height: 38px;
}

@media (min-width: 761px) {
  .content-card.ee-card h3 {
    min-height: 80px;
  }
}

.about-image.guidelines-image {
  background: url("assets/hero-crown.jpg") 72% center / cover no-repeat;
}

.about-image.privacy-image {
  background: url("assets/hero-regal.jpg") 76% center / cover no-repeat;
}

.about-image.terms-image {
  background: url("assets/brand-checklist.jpg") center / cover no-repeat;
}

.page-hero.ylp-hero {
  background:
    linear-gradient(180deg, rgba(3, 3, 3, 0.55) 0%, rgba(3, 3, 3, 0.88) 68%, #030303 100%),
    url("assets/youth-legacy-project-glow-bg.jpg") center 65% / cover no-repeat;
}

.ylp-lockup {
  max-width: 260px;
  margin: 0 auto 20px;
}

.ylp-lockup img {
  width: 100%;
  height: auto;
  display: block;
}

.ylp-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ylp-news {
  padding: 76px max(22px, calc((100vw - var(--max)) / 2));
}

.ylp-news-head {
  text-align: center;
  margin-bottom: 8px;
}

.ylp-news-head h2 {
  font-size: clamp(30px, 4vw, 48px);
}

.ylp-news-grid {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 48px;
  align-items: center;
  max-width: 960px;
  margin: 40px auto 0;
}

.ylp-news-grid .ylp-lockup {
  margin: 0;
}

.ylp-news-date {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ylp-news-copy .eyebrow {
  margin-bottom: 10px;
}

.ylp-news-copy h3 {
  max-width: 640px;
  margin-bottom: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ylp-news-copy h3 span {
  color: var(--gold-dark);
}

.ylp-news-copy p:not(.eyebrow) {
  max-width: 560px;
  color: var(--soft);
}

.about-image.mentorship-image {
  background: url("assets/hero-regal2.jpg") 76% center / cover no-repeat;
}

.client-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  color: var(--soft);
}

.client-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 14px 20px;
  margin: 36px auto 0;
  padding: 0;
  max-width: 980px;
}

.client-list li {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

.client-list li + li::before {
  content: "✦";
  color: var(--gold);
  font-size: 0.55em;
  margin-right: 20px;
  vertical-align: middle;
}

.client-list .client-more {
  color: var(--soft);
  font-style: italic;
}

.work-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc((min(100vw - 44px, 1180px) - 48px) / 4);
  grid-auto-flow: dense;
  gap: 16px;
  margin-top: 44px;
}

.work-gallery .wg-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.work-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.work-gallery .wg-item:hover,
.work-gallery .wg-item:focus-visible {
  border-color: var(--gold-light);
}

.work-gallery .wg-item:hover img,
.work-gallery .wg-item:focus-visible img {
  transform: scale(1.045);
}

.work-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 14px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0));
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.work-gallery .wg-item:hover figcaption,
.work-gallery .wg-item:focus-visible figcaption {
  opacity: 1;
  transform: translateY(0);
}

.work-gallery .wg-big {
  grid-column: span 2;
  grid-row: span 2;
}

.work-gallery .wg-wide {
  grid-column: span 2;
}

.work-gallery .wg-tall {
  grid-row: span 2;
}

.work-gallery .wg-tall.wg-fit {
  align-self: center;
  aspect-ratio: 1100 / 1700;
}

.work-gallery .wg-wide.wg-fit {
  justify-self: center;
  aspect-ratio: 1600 / 901;
}

/* Featured work lightbox */
.wg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 24px;
}

.wg-lightbox.open {
  display: flex;
}

body.wg-lb-lock {
  overflow: hidden;
}

.wg-lightbox figure {
  margin: 0;
  max-width: min(1080px, 92vw);
  text-align: center;
}

.wg-lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border: 1px solid var(--gold);
  display: block;
  margin: 0 auto;
}

.wg-lightbox figcaption {
  margin-top: 14px;
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wg-lightbox button {
  position: absolute;
  background: none;
  border: 1px solid rgba(216, 165, 50, 0.5);
  color: var(--gold-light);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.wg-lightbox button:hover,
.wg-lightbox button:focus-visible {
  border-color: var(--gold-light);
  background: rgba(216, 165, 50, 0.15);
}

.wg-lb-close {
  top: 20px;
  right: 22px;
}

.wg-lb-prev {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.wg-lb-next {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  .wg-lightbox {
    padding: 14px;
  }

  .wg-lightbox img {
    max-height: 70vh;
  }

  .wg-lb-prev {
    left: 8px;
  }

  .wg-lb-next {
    right: 8px;
  }
}

.story-section,
.ecosystem {
  padding: 76px max(22px, calc((100vw - var(--max)) / 2));
}

.story-copy {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.story-copy h2,
.ecosystem h2,
.mission-section h2 {
  font-size: clamp(30px, 4vw, 48px);
}

.ecosystem h2 {
  text-align: center;
}

.ecosystem .content-card {
  min-height: 300px;
}

.mission-section {
  padding: 76px max(22px, calc((100vw - var(--max)) / 2));
  background: var(--cream);
  color: var(--ink);
}

.mission-section > div {
  max-width: 920px;
  margin: 0 auto;
}

.mission-section p {
  color: #37302a;
}

.mission-section .closing-line {
  margin: 34px 0;
  color: var(--gold-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.35;
}

.split-content {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
}

.split-content h2 {
  text-align: left;
  font-size: clamp(30px, 4vw, 48px);
}

.plain-list {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.plain-list li {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201, 155, 47, 0.28);
}

.contact-panel {
  max-width: 760px;
}

.contact-panel .signup-form {
  grid-template-columns: 1fr;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 540px;
  /* Desktop: pull the copy toward the portrait, echoing the mobile framing */
  margin-left: clamp(0px, 13vw, 240px);
  padding-bottom: 58px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 13px;
  font-weight: 500;
}

.centered {
  text-align: center;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.1em;
  line-height: 1.12;
}

h1 {
  font-size: clamp(50px, 7vw, 92px);
}

h1 span {
  display: block;
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-family: "Pinyon Script", "Snell Roundhand", "Brush Script MT", cursive;
  /* Capped so "Alignment" fits the 540px hero column — wider than the box
     paints transparent under background-clip: text. Left padding must cover
     script descender swashes that sweep left of the glyph origin (the "g"
     in "guidelines"); the negative margin keeps the text position unchanged. */
  font-size: min(1.55em, 112px);
  line-height: 1;
  padding: 0.32em 0.25em 0.34em 0.35em;
  margin: -0.32em 0 -0.34em -0.27em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  letter-spacing: 0;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 span {
    background: linear-gradient(100deg, var(--gold-light) 4%, var(--gold) 20%, var(--pink) 40%, var(--pink-light) 52%, var(--pink) 64%, var(--gold) 82%, var(--gold-light) 96%, var(--gold) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    h1 span {
      animation: gold-shimmer 6s linear infinite;
    }
  }
}

@keyframes gold-shimmer {
  to {
    background-position: -220% 0;
  }
}

/* "Welcome to Suite 444" in the hero: same gradient + shimmer as the h1
   script word ("becomes"), so the two read as one signature effect. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-copy > .eyebrow {
    background: linear-gradient(100deg, var(--gold-light) 4%, var(--gold) 20%, var(--pink) 40%, var(--pink-light) 52%, var(--pink) 64%, var(--gold) 82%, var(--gold-light) 96%, var(--gold) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-copy > .eyebrow {
      animation: gold-shimmer 6s linear infinite;
    }
  }
}

.hero-text {
  max-width: 440px;
  margin: 22px 0 30px;
  color: var(--soft);
  font-size: 16px;
}

.hero-portrait {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.38) 42%, rgba(0, 0, 0, 0) 68%),
    url("assets/hero-regal2.jpg") right 140px bottom 0 / auto 92% no-repeat;
  filter: saturate(1.06);
}

.promise {
  padding: 90px max(22px, 4vw);
  text-align: center;
}

.promise h2 {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(34px, 4vw, 52px);
}

.promise h2 span {
  color: var(--pink);
  font-family: "Pinyon Script", "Snell Roundhand", "Brush Script MT", cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.3em;
  line-height: 1;
}

.promise p:not(.eyebrow) {
  max-width: 640px;
  margin: 26px auto 0;
  color: var(--soft);
  font-size: 17px;
}

.price-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0 22px;
  flex: 0 0 auto;
}

.price-from {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.price-amount {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 4.5vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--gold-light);
}

.price-varies {
  font-size: clamp(24px, 2.6vw, 30px);
}

.price-per {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .price-amount {
    background: linear-gradient(135deg, #fff1a8 0%, #d8a532 45%, #fff1a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
  }
}

.store-section .content-card {
  position: relative;
  padding: 32px 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(201, 155, 47, 0.07) 0%, rgba(3, 3, 3, 0) 55%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.best-offer {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 32%, var(--pink) 68%, var(--pink-light) 100%);
  color: #090805;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(201, 155, 47, 0.35);
}

.store-section #the-suite,
.store-section #package-expansion {
  position: relative;
  z-index: 2;
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 155, 47, 0.16) 0%, rgba(3, 3, 3, 0) 60%);
  box-shadow: 0 18px 44px rgba(201, 155, 47, 0.2);
}

@media (min-width: 1041px) {
  .store-section .content-grid {
    margin-top: 10px;
  }

  .store-section #the-suite {
    transform-origin: top center;
    transform: scale(1.05);
  }

  .store-section #the-suite:hover {
    transform: scale(1.05) translateY(-4px);
  }
}

.store-section .content-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(201, 155, 47, 0.16);
}

.store-section .cart-button {
  align-self: stretch;
  width: 100%;
}

.store-fineprint {
  margin: 34px auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.store-fineprint + .store-fineprint {
  margin-top: 10px;
}

.store-section-intro {
  margin: 14px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--soft);
  font-size: 17px;
}

.centered-heading {
  text-align: center;
  font-size: clamp(34px, 4vw, 52px);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 44px;
}

.steps-grid.steps-4 {
  grid-template-columns: repeat(4, 1fr);
}

.inline-gold {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-card {
  border: 1px solid var(--line);
  padding: 30px;
}

.step-num {
  display: block;
  margin-bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  color: var(--gold-light);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .step-num {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 32%, var(--pink) 68%, var(--pink-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
  }
}

.step-card h3 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: 0.06em;
}

.step-card p {
  margin: 0;
  color: var(--soft);
}

.quiz {
  max-width: 780px;
  margin: 0 auto;
}

.quiz-list {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
}

.quiz-list label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(201, 155, 47, 0.35);
  font-size: 17px;
  cursor: pointer;
}

.quiz-list label:hover {
  color: var(--pink-dark);
}

.quiz-list input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--pink);
  cursor: pointer;
}

.quiz-result {
  margin-top: 30px;
  text-align: center;
}

.quiz-result p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.contact-methods {
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px;
  margin: 44px auto 0;
}

.contact-phone {
  align-self: flex-start;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  text-decoration: none;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .contact-phone {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 32%, var(--pink) 68%, var(--pink-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.contact-methods .content-card .eyebrow {
  margin: 0 0 8px;
}

.contact-methods .contact-phone {
  margin-bottom: 22px;
}

.contact-methods .contact-phone:last-child {
  margin-bottom: 0;
}

.contact-address {
  margin: 0 0 18px;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

.checkout-grid {
  grid-template-columns: 1.15fr 1fr;
  max-width: 1020px;
  margin: 0 auto;
  align-items: start;
}

.checkout-h3 {
  margin: 18px 0 8px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.checkout-list {
  margin: 0 0 6px;
  padding-left: 20px;
  color: var(--soft);
}

.checkout-list li {
  margin: 5px 0;
}

.checkout-button {
  align-self: stretch;
  width: 100%;
  min-height: 56px;
  font-size: 13px;
}

.checkout-secure {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.checkout-divider {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid rgba(201, 155, 47, 0.35);
}

@media (max-width: 1040px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}

.insta-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
}

.insta-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.insta-tile:hover img {
  transform: scale(1.05);
}

.insta-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 3, 0.55);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.insta-tile:hover .insta-overlay,
.insta-tile:focus-visible .insta-overlay {
  opacity: 1;
}

.insta-follow {
  margin: 32px 0 0;
  text-align: center;
}

@media (max-width: 1040px) {
  .insta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1040px) {
  .steps-grid,
  .steps-grid.steps-4 {
    grid-template-columns: 1fr;
  }
}

.faq {
  padding: 90px max(22px, 4vw);
}

.faq h2 {
  text-align: center;
  font-size: clamp(34px, 4vw, 52px);
}

.faq-list {
  max-width: 780px;
  margin: 40px auto 0;
}

.faq-list details {
  border-bottom: 1px solid rgba(201, 155, 47, 0.35);
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 4px;
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--cream);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 22px;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list summary:hover {
  color: var(--gold-light);
}

.faq-list details p {
  margin: 0;
  padding: 0 4px 24px;
  color: var(--soft);
  max-width: 700px;
}

.faq-list details a {
  color: var(--gold-light);
  text-decoration: underline;
}

.promo-banner {
  background: #0b0906;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 22px;
  text-align: center;
}

.promo-banner p {
  margin: 0 auto;
  max-width: var(--max);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--soft);
}

.promo-banner-badge {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 32%, var(--pink) 68%, var(--pink-light) 100%);
  color: #090805;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.promo-banner a {
  margin-left: 10px;
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.promo-banner a:hover,
.promo-banner a:focus-visible {
  text-decoration-color: var(--pink);
}

.ylp-ticker {
  background: #050403;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Inside the hero, the ticker becomes a vibrant bottom bar instead of a
   plain strip — same gold-to-pink energy as the "becomes" gradient. */
.hero .ylp-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(20, 8, 14, 0.94), rgba(10, 6, 4, 0.94) 50%, rgba(20, 8, 14, 0.94));
  border-top: 1px solid var(--pink);
  border-bottom: none;
  box-shadow: 0 -14px 30px rgba(230, 73, 139, 0.12);
}

.hero .ylp-ticker-item {
  color: var(--cream);
}

.ylp-ticker-track {
  display: flex;
  width: max-content;
  animation: ylp-ticker-scroll 28s linear infinite;
}

.ylp-ticker:hover .ylp-ticker-track {
  animation-play-state: paused;
}

.ylp-ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ylp-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--soft);
  border-right: 1px solid var(--line);
}

.ylp-ticker-item strong {
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero .ylp-ticker-item strong {
    background: linear-gradient(100deg, var(--gold-light) 4%, var(--gold) 20%, var(--pink) 40%, var(--pink-light) 52%, var(--pink) 64%, var(--gold) 82%, var(--gold-light) 96%, var(--gold) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero .ylp-ticker-item strong {
      animation: gold-shimmer 6s linear infinite;
    }
  }
}

.ylp-ticker-item a {
  margin-left: 4px;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero .ylp-ticker-item a {
  color: var(--pink-light);
}

.ylp-ticker-item a:hover,
.ylp-ticker-item a:focus-visible {
  text-decoration-color: var(--pink-light);
}

@keyframes ylp-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ylp-ticker-track {
    animation: none;
  }
}

@media (max-width: 560px) {
  .promo-banner a {
    display: block;
    margin: 6px 0 0;
  }
}

.statement-band {
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 14px 22px;
  background: var(--cream);
  color: #15120f;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 13px;
}

.statement-band span {
  height: 1px;
  background: var(--gold);
}

.services {
  padding: 70px max(22px, calc((100vw - var(--max)) / 2)) 66px;
}

.featured-video {
  padding: 60px max(22px, calc((100vw - var(--max)) / 2)) 66px;
  text-align: center;
}

.featured-video h2 {
  font-size: clamp(30px, 4.4vw, 48px);
}

.video-embed {
  position: relative;
  width: min(860px, 100%);
  margin: 0 auto 32px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--gold);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 30px rgba(201, 155, 47, 0.14);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.services h2,
.about h2,
.resource h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  text-align: center;
}

.ornament {
  width: min(340px, 72vw);
  margin: 18px auto 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--pink-light);
}

.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

.service-card {
  min-height: 332px;
  padding: 8px 22px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: 1px solid var(--line);
}

.service-card:first-child {
  border-left: 0;
}

.service-card h3 {
  min-height: 58px;
  margin: 18px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.service-card p {
  margin: 0 auto 22px;
  min-height: 94px;
  max-width: 170px;
  color: var(--soft);
  font-size: 13px;
}

.service-card a {
  margin-top: auto;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  font-weight: 800;
}

.service-card a::after {
  content: " →";
}

.service-card a:hover {
  color: var(--pink-light);
}

.line-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold);
  background: rgba(201, 155, 47, 0.04);
  box-shadow: inset 0 0 0 1px rgba(244, 215, 122, 0.08), 0 0 22px rgba(201, 155, 47, 0.08);
}

.service-card:nth-child(even) .line-icon {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(230, 73, 139, 0.04);
  box-shadow: inset 0 0 0 1px rgba(242, 143, 185, 0.08), 0 0 22px rgba(230, 73, 139, 0.08);
}

.line-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon entrance/scroll motion — see script.js (IntersectionObserver adds .is-visible).
   Hidden state only applies once JS confirms it can animate (.js-icons on <html>),
   so icons stay visible if JS is unavailable. */
.js-icons .line-icon {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-icons .line-icon.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.js-icons .line-icon.is-visible svg {
  animation: icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0ms) both;
}

@keyframes icon-pop {
  0% {
    transform: scale(0.55) rotate(-6deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-icons .line-icon,
  .js-icons .line-icon.is-visible svg {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-nav.is-open,
  .menu-toggle span:not(.sr-only) {
    animation: none !important;
    transition: none !important;
  }
}

.about {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  background: var(--cream);
  color: var(--ink);
}

.about-image {
  min-height: 410px;
  background: url("assets/studio-detail.jpg") center / cover no-repeat;
}

.about-copy {
  padding: clamp(42px, 6vw, 78px) max(22px, calc((100vw - var(--max)) / 2)) clamp(42px, 6vw, 72px) 58px;
}

.about h2,
.resource h2 {
  text-align: left;
}

.about h2 span,
.story-copy h2 span,
.founder h2 span {
  color: var(--pink-dark);
}

.resource h2 span {
  color: var(--gold-dark);
}

.about .ornament {
  margin-left: 0;
  margin-bottom: 24px;
  width: 260px;
}

.about p:not(.eyebrow) {
  max-width: 620px;
  color: #37302a;
}

/* Meet the Founder — about.html personal bio section.
   Single centered column, top to bottom: intro -> photos -> full bio ->
   signature. Every photo box is a plain aspect-ratio: 1/1 square, which
   matches these source photos' actual dimensions exactly, so object-fit:
   cover never has anything to crop — the whole photo always shows. */
.founder {
  padding: 90px max(22px, 4vw);
  text-align: center;
}

.founder-intro {
  max-width: 640px;
  margin: 0 auto;
  color: var(--soft);
}

/* Circular frames, not cropped squares: object-fit: contain guarantees the
   whole photo is visible regardless of its native aspect ratio, and the
   soft radial backdrop behind it means any letterboxed edge blends in
   instead of showing hard bars. The gold-to-pink ring around each circle
   ties it to the site's signature gradient. */
.founder-photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 5vw, 44px);
  max-width: 680px;
  margin: 40px auto 50px;
}

.founder-photo-ring {
  flex: none;
  width: clamp(190px, 30vw, 240px);
  aspect-ratio: 1 / 1;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 35%, var(--pink) 65%, var(--pink-light));
  box-shadow: 0 0 26px rgba(230, 73, 139, 0.2);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}

.founder-photo-ring:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 34px rgba(230, 73, 139, 0.35);
}

.founder-photo-ring img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 3px #0a0705;
}

.founder-copy {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.founder-copy p:not(.eyebrow) {
  color: var(--soft);
}

.founder-copy p strong,
.founder-intro strong {
  color: var(--gold-light);
  font-weight: 700;
}

.founder-credentials strong {
  color: var(--pink-light);
}

.founder-signature {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--soft) !important;
}

.founder-signature strong {
  display: block;
  margin-top: 2px;
  color: var(--gold-light) !important;
  font-weight: 700;
}

.founder-signature em {
  display: block;
  margin-top: 10px;
  color: var(--pink-light);
  font-style: italic;
}

/* Homepage founder teaser — short "meet Kay Kay" preview that links out to
   the full bio on the About page. Reuses .founder-photo-ring so the photo
   treatment matches exactly. */
.founder-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  flex-wrap: wrap;
  padding: 84px max(22px, 4vw);
}

.founder-preview .founder-photo-ring {
  width: clamp(160px, 26vw, 200px);
}

.founder-preview-copy {
  max-width: 480px;
  text-align: left;
}

.founder-preview-copy h2 span {
  color: var(--pink);
}

.founder-preview-copy p {
  margin: 14px 0 22px;
  color: var(--soft);
}

@media (max-width: 640px) {
  .founder-preview {
    justify-content: center;
    text-align: center;
  }

  .founder-preview-copy {
    text-align: center;
  }
}

.testimonial {
  padding: 26px 22px;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}

.testimonial blockquote {
  max-width: var(--max);
  min-height: 124px;
  margin: 0 auto;
  padding: 26px 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  text-align: center;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.3vw, 24px);
}

.testimonial span {
  color: var(--gold);
  font-size: 74px;
  line-height: 0.5;
}

.testimonial cite {
  display: block;
  margin-top: 12px;
  color: var(--gold-light);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.resource {
  display: grid;
  grid-template-columns: minmax(320px, 0.94fr) minmax(360px, 1.06fr);
  gap: clamp(34px, 6vw, 80px);
  align-items: center;
  padding: 58px max(22px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--gold);
}

.resource-image {
  min-height: 260px;
  background: url("assets/brand-checklist.jpg") center / contain no-repeat;
}

.resource-copy p:not(.eyebrow):not(.form-note) {
  max-width: 560px;
  color: var(--soft);
}

.signup-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 16px;
  max-width: 620px;
  margin-top: 28px;
}

input {
  min-height: 50px;
  width: 100%;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.4);
  color: var(--cream);
  font: inherit;
}

input::placeholder {
  color: var(--muted);
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(230, 73, 139, 0.18);
}

.form-note {
  min-height: 24px;
  color: var(--gold-light);
}

.form-note.is-error {
  color: #e08a8a;
}

.site-footer {
  padding: 44px max(22px, calc((100vw - var(--max)) / 2)) 20px;
  display: grid;
  grid-template-columns: 1.3fr 0.72fr 1fr 1.15fr;
  gap: 42px;
}

.site-footer h2 {
  margin: 0 0 16px;
  color: var(--gold-light);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.site-footer p,
.site-footer a {
  color: var(--soft);
  font-size: 13px;
}

.footer-contact {
  margin-top: 16px;
}

.footer-contact a {
  display: block;
  padding: 2px 0;
  color: var(--gold-light);
}

.footer-hours {
  margin: 10px 0 16px;
  line-height: 1.8;
}

.site-footer a.gold-button,
.site-footer a.discovery-button {
  color: #090805;
}

.site-footer > div:not(.footer-bottom) > a:not(.brand-mark):not(.gold-button):not(.discovery-button) {
  display: block;
  margin: 3px 0;
}

.footer-brand {
  margin-bottom: 18px;
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

.social-links a {
  color: var(--gold-light);
  font-weight: 800;
}

.reviews-section {
  min-height: 0;
  padding: 0 max(22px, calc((100vw - var(--max)) / 2));
  border-bottom: 0;
  overflow-x: hidden;
}

.reviews-section:has(> div:not(:empty)) {
  min-height: 170px;
  padding: 42px max(22px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--gold);
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.footer-bottom a {
  margin-left: 22px;
}

@keyframes nav-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1040px) {
  .site-header {
    grid-template-columns: 100px 1fr;
  }

  .header-cta {
    display: none;
  }

  .menu-toggle {
    justify-self: end;
    position: relative;
    z-index: 6;
    display: grid;
    gap: 6px;
    width: 44px;
    height: 44px;
    place-content: center;
    border: 1px solid var(--gold);
    background: transparent;
  }

  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--gold-light);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Full-screen panel (not a floating dropdown) so it reads as part of the
     site's dark, gold-lit sections rather than a bolted-on overlay, and so
     hero content underneath can never show through. It sits below the header
     in stacking order (z-index) — the header, painted on top, keeps the logo
     and the now-X toggle visible and usable while the panel is open. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    gap: 0;
    padding: 132px max(22px, 6vw) 48px;
    background:
      radial-gradient(circle at 78% 18%, rgba(201, 155, 47, 0.13), transparent 26rem),
      radial-gradient(circle at 16% 86%, rgba(230, 73, 139, 0.1), transparent 26rem),
      linear-gradient(135deg, #000 0%, #050505 52%, #100e0a 100%);
    text-align: center;
  }

  .site-nav.is-open {
    display: flex;
    animation: nav-fade-in 0.28s ease;
  }

  .site-nav .nav-group {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .site-nav .nav-group + .nav-group {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }

  .site-nav .nav-group-label {
    display: block;
    margin: 0 0 2px;
    color: var(--muted);
    letter-spacing: 0.3em;
    font-size: 10px;
  }

  .site-nav .nav-group a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(230, 73, 139, 0.14);
  }

  .site-nav .nav-group a:last-child {
    border-bottom: 0;
  }

  .site-nav .nav-cta {
    display: inline-flex;
    margin: 28px auto 0;
  }

  .hero {
    min-height: 860px;
  }

  .hero-copy {
    margin-left: 0;
    padding-bottom: 0;
  }

  .hero-portrait {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0.08) 75%),
      url("assets/hero-regal2.jpg") 74% bottom / auto 89% no-repeat;
  }

  .service-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 34px;
  }

  .service-card:nth-child(4) {
    border-left: 0;
  }

  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .site-header {
    min-height: 92px;
    padding: 0 14px;
  }

  .brand-mark {
    width: 88px;
  }

  .hero {
    min-height: auto;
    padding-top: 122px;
    padding-bottom: 88px;
  }

  h1 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .statement-band {
    grid-template-columns: 1fr;
    letter-spacing: 0.13em;
  }

  .statement-band span {
    display: none;
  }

  .service-grid,
  .about,
  .resource,
  .content-grid,
  .split-content,
  .signup-form,
  .site-footer,
  .ylp-news-grid {
    grid-template-columns: 1fr;
  }

  .ylp-news {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .ylp-news-grid {
    text-align: center;
  }

  .ylp-news-grid .ylp-lockup {
    max-width: 168px;
    margin: 0 auto;
  }

  .ylp-news-copy h3,
  .ylp-news-copy p:not(.eyebrow) {
    margin-left: auto;
    margin-right: auto;
  }

  .service-card,
  .service-card:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }

  .service-card:first-child {
    border-top: 0;
  }

  .about-copy {
    padding: 42px 22px;
  }

  .about-image {
    min-height: 300px;
  }

  .resource {
    gap: 22px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .signup-form .gold-button {
    width: 100%;
  }

  .footer-bottom {
    display: block;
  }

  .footer-bottom a {
    display: inline-block;
    margin: 8px 18px 0 0;
  }

  .page-hero {
    min-height: auto;
    padding-top: 132px;
    padding-bottom: 44px;
  }

  .content-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .work-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc((100vw - 54px) / 2);
    gap: 10px;
    margin-top: 32px;
  }

  .story-section,
  .ecosystem,
  .mission-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .promise,
  .faq {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .services {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .site-footer {
    padding-top: 36px;
  }
}

.content-section > h2 {
  font-size: clamp(30px, 4.4vw, 48px);
}

.best-offer.coming-soon {
  background: #090805;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  box-shadow: none;
}

.coming-soon-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
  border: 1px dashed rgba(201, 155, 47, 0.55);
  color: var(--gold-light);
  opacity: 0.85;
}

.store-section .content-card .coming-soon-cta {
  align-self: stretch;
  width: 100%;
}

/* ---- Homepage detail pass: button hover feedback, hero scroll cue, ---- */
/* ---- framed imagery, and staggered scroll reveals. See script.js for ---- */
/* ---- the reveal observer that drives .reveal / .js-reveal below. ---- */

.outline-button,
.gold-button,
.dark-button,
.discovery-button {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.gold-button:hover,
.gold-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(201, 155, 47, 0.4);
}

.outline-button:hover,
.outline-button:focus-visible {
  background: rgba(230, 73, 139, 0.12);
  border-color: var(--pink);
  color: var(--pink-light);
}

.dark-button:hover,
.dark-button:focus-visible {
  border-color: var(--pink);
  color: var(--pink-light);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}

.scroll-cue-arrow {
  font-size: 18px;
  line-height: 1;
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 760px) {
  .scroll-cue {
    display: none;
  }
}

.gold-frame {
  position: relative;
}

.gold-frame::before,
.gold-frame::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  opacity: 0.8;
  pointer-events: none;
}

.gold-frame::before {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
}

.gold-frame::after {
  bottom: 14px;
  right: 14px;
  border-left: 0;
  border-top: 0;
}

.testimonial blockquote {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.testimonial blockquote:hover {
  border-color: var(--pink-light);
  box-shadow: 0 0 34px rgba(230, 73, 139, 0.18);
}

.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(720px, 86%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--pink) 65%, transparent);
  opacity: 0.6;
}

.social-links a {
  transition: transform 0.25s ease, color 0.25s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--pink);
  transform: translateY(-3px);
}

/* Scroll reveal: fade + rise, staggered by order among ".reveal" siblings.
   Only activates once JS confirms it can animate (.js-reveal on <html>),
   so content stays visible with no animation if JS is unavailable. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scroll-cue-arrow {
    animation: none;
  }
}

/* Hero entrance: the headline, subtext, and CTA rise in on page load
   (not scroll-gated — hero is always the first thing seen). Pure CSS,
   so it runs with no JS dependency and skips entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .hero-copy > .eyebrow {
    animation-delay: 0.05s;
  }

  .hero-copy > h1 {
    animation-delay: 0.16s;
  }

  .hero-copy > .hero-text {
    animation-delay: 0.42s;
  }

  .hero-copy > .gold-button {
    animation-delay: 0.6s;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button motion: a light sweep on gold-button/discovery-button hover, a
   tactile press-down on click for all button styles, and the ✦ glyphs spin
   in on hover. */
.gold-button,
.discovery-button {
  position: relative;
  overflow: hidden;
}

.gold-button::before,
.discovery-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.gold-button:hover::before,
.gold-button:focus-visible::before,
.discovery-button:hover::before,
.discovery-button:focus-visible::before {
  left: 130%;
}

.outline-button:active,
.gold-button:active,
.dark-button:active,
.discovery-button:active {
  transform: scale(0.97);
  box-shadow: none;
}

.outline-button > span,
.gold-button > span,
.dark-button > span,
.discovery-button > span,
.coming-soon-cta > span {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.outline-button:hover > span,
.gold-button:hover > span,
.dark-button:hover > span,
.discovery-button:hover > span,
.outline-button:focus-visible > span,
.gold-button:focus-visible > span,
.dark-button:focus-visible > span,
.discovery-button:focus-visible > span {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > * {
    animation: none;
  }

  .gold-button::before,
  .discovery-button::before {
    display: none;
  }

  .outline-button > span,
  .gold-button > span,
  .dark-button > span,
  .discovery-button > span,
  .coming-soon-cta > span {
    transition: none;
  }
}

/* ---- Website Development Packages ---- */

.pricing-features {
  display: grid;
  gap: 9px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  flex: 1;
}

.pricing-features li {
  position: relative;
  padding-left: 26px;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.5;
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-light);
  font-weight: 800;
}

.addons-list {
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: 30px auto 0;
  padding: 0;
}

.addons-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(201, 155, 47, 0.28);
  color: var(--soft);
  font-size: 15px;
}

.addons-list li:last-child {
  border-bottom: 0;
}

.addon-price {
  flex: none;
  color: var(--gold-light);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .store-section .content-card {
    padding: 30px 26px;
  }
}

@media (max-width: 760px) {
  .addons-list li {
    font-size: 14px;
  }
}

/* ---- Force the mobile hamburger nav at every screen width ----
   Applied via a `force-hamburger` class on <body>. Mirrors the
   @media (max-width: 1040px) header/nav rules above exactly, just
   without the media-query gate, so specific pages can opt into the
   collapsed nav even on desktop while every other page keeps the
   normal responsive behavior. */
body.force-hamburger .site-header {
  grid-template-columns: 100px 1fr;
}

body.force-hamburger .header-cta {
  display: none;
}

body.force-hamburger .menu-toggle {
  justify-self: end;
  position: relative;
  z-index: 6;
  display: grid;
  gap: 6px;
  width: 44px;
  height: 44px;
  place-content: center;
  border: 1px solid var(--gold);
  background: transparent;
}

body.force-hamburger .menu-toggle span:not(.sr-only) {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold-light);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

body.force-hamburger .menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.force-hamburger .menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

body.force-hamburger .menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.force-hamburger .site-nav {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  gap: 0;
  padding: 132px max(22px, 6vw) 48px;
  background:
    radial-gradient(circle at 78% 18%, rgba(201, 155, 47, 0.13), transparent 26rem),
    radial-gradient(circle at 16% 86%, rgba(230, 73, 139, 0.1), transparent 26rem),
    linear-gradient(135deg, #000 0%, #050505 52%, #100e0a 100%);
  text-align: center;
}

body.force-hamburger .site-nav.is-open {
  display: flex;
  animation: nav-fade-in 0.28s ease;
}

body.force-hamburger .site-nav .nav-group {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

body.force-hamburger .site-nav .nav-group + .nav-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

body.force-hamburger .site-nav .nav-group-label {
  display: block;
  margin: 0 0 2px;
  color: var(--muted);
  letter-spacing: 0.3em;
  font-size: 10px;
}

body.force-hamburger .site-nav .nav-group a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(230, 73, 139, 0.14);
}

body.force-hamburger .site-nav .nav-group a:last-child {
  border-bottom: 0;
}

body.force-hamburger .site-nav .nav-cta {
  display: inline-flex;
  margin: 28px auto 0;
}

/* ================================================================
   Services page redesign (scoped to body.services-redesign so it
   never touches shared classes on other pages).
   ================================================================ */

body.services-redesign {
  --black-alt: #131210;
}

.services-redesign .section-alt {
  background: var(--black-alt);
}

.services-redesign .centered-heading {
  font-size: clamp(38px, 4.6vw, 58px);
}

.services-redesign .price-amount {
  font-size: clamp(44px, 5vw, 60px);
}

/* Text link (secondary action) */
.text-link {
  display: inline-block;
  color: var(--gold-light);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(201, 155, 47, 0.5);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.text-link:hover {
  color: var(--pink-light);
  border-color: var(--pink);
}

/* Hero CTA row */
.hero-cta-row {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Category menu */
.category-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.category-menu a {
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.category-menu a:hover {
  border-color: var(--pink);
  color: var(--pink-light);
}

/* Start With Your Goal */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.goal-card {
  padding: 24px 16px;
  text-align: center;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.goal-card:hover {
  color: var(--pink-light);
  border-color: var(--pink);
}

.goal-card span {
  display: block;
  margin-top: 10px;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 760px) {
  .goal-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Process timeline (replaces steps-grid on this page) */
.process-timeline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 980px;
  margin: 48px auto 0;
  position: relative;
}

.process-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.timeline-step {
  position: relative;
  flex: 1;
  text-align: center;
  padding-top: 56px;
}

.timeline-step .step-num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--black);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.timeline-step h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.timeline-step p {
  color: var(--soft);
  font-size: 14px;
  max-width: 260px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .process-timeline {
    flex-direction: column;
    gap: 34px;
  }

  .process-timeline::before {
    top: 0;
    bottom: 0;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .timeline-step {
    padding-top: 0;
    padding-left: 56px;
    text-align: left;
  }

  .timeline-step .step-num {
    left: 0;
    transform: none;
    top: 0;
  }

  .timeline-step p {
    margin: 0;
  }
}

/* Pricing card "View Full Details" */
.pricing-card details.card-details {
  flex: none;
}

.pricing-card details.card-details summary {
  cursor: pointer;
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 2px 0 14px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pricing-card details.card-details summary::-webkit-details-marker {
  display: none;
}

.pricing-card details.card-details summary::after {
  content: "+";
  font-size: 15px;
}

.pricing-card details.card-details[open] summary::after {
  content: "\2013";
}

.pricing-card details.card-details ul {
  margin-top: 4px;
}

/* Two-by-two website grid */
.content-grid.two-by-two {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 760px) {
  .content-grid.two-by-two {
    grid-template-columns: 1fr;
  }
}

/* Comparison table */
.compare-table-wrap {
  overflow-x: auto;
  margin: 44px auto 0;
  max-width: 980px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.compare-table th {
  color: var(--gold-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.compare-table td:first-child,
.compare-table th:first-child {
  text-align: left;
  color: var(--soft);
  white-space: normal;
}

.compare-table tbody tr:hover {
  background: rgba(201, 155, 47, 0.06);
}

/* Custom quote banner (replaces bordered wide card) */
.custom-quote-banner {
  text-align: center;
  margin-top: 26px;
}

.custom-quote-banner p {
  color: var(--soft);
  font-size: 15px;
}

/* Social Media spotlight */
.spotlight {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.spotlight .pricing-features {
  display: inline-grid;
  text-align: left;
  margin: 6px auto 10px;
}

.spotlight .price-note {
  align-items: center;
  margin: 20px auto;
}

/* Quick Creative Services rows */
.service-rows {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}

.service-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(201, 155, 47, 0.28);
}

.service-rows li:last-child {
  border-bottom: 0;
}

.service-row-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  flex: 1;
}

.service-row-price {
  color: var(--gold-light);
  font-weight: 800;
  white-space: nowrap;
}

.service-row-cta {
  flex: none;
}

/* Coming soon strip */
.coming-soon-strip {
  text-align: center;
  margin: 34px auto 0;
  padding: 14px 22px;
  border: 1px dashed rgba(201, 155, 47, 0.4);
  border-radius: 8px;
  max-width: 460px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Enhancements accordions */
.accordion-group {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}

.accordion {
  border-top: 1px solid var(--line);
  padding-top: 2px;
}

.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--cream);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  flex: none;
  color: var(--gold-light);
  font-size: 20px;
}

.accordion[open] summary::after {
  content: "\2013";
}

.accordion .addons-list {
  margin-top: 2px;
  padding-bottom: 18px;
}

.accordion .store-fineprint {
  margin-bottom: 18px;
}

/* Final booking section */
.final-cta {
  text-align: center;
}

.final-cta p {
  color: var(--soft);
  margin: 12px 0 26px;
  font-size: 17px;
}

/* Featured-three portfolio layout (permanent captions, not hover-only) */
.work-gallery.featured-three {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 30px;
}

.work-gallery.featured-three .wg-item {
  border: none;
  display: flex;
  flex-direction: column;
}

.work-gallery.featured-three img {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  transition: border-color 0.3s ease;
}

.work-gallery.featured-three .wg-item:hover img,
.work-gallery.featured-three .wg-item:focus-visible img {
  border-color: var(--gold-light);
}

.work-gallery.featured-three figcaption {
  position: static;
  background: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 16px 2px 0;
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-gallery.featured-three .wg-caption-desc {
  display: block;
  margin-top: 8px;
  color: var(--soft);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .work-gallery.featured-three {
    grid-template-columns: 1fr;
  }
}

/* Homepage "three primary service paths" — 3-card variant of .service-grid */
@media (min-width: 1041px) {
  .service-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}