@layer reset, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  figure,
  blockquote {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
  }

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

  img {
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }
}

@layer base {
  body {
    min-width: 20rem;
    min-height: 100vh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 51% -8%, rgba(255, 225, 116, 0.72), transparent 31rem),
      radial-gradient(circle at 7% 29%, rgba(255, 244, 213, 0.72), transparent 28rem),
      linear-gradient(180deg, var(--cream-200) 0%, #ffeabd 46%, var(--cream-100) 100%);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,.22) 0 1px, transparent 1px),
      radial-gradient(circle at 80% 70%, rgba(110,63,7,.06) 0 1px, transparent 1px);
    background-size: 26px 26px, 31px 31px;
    content: "";
    pointer-events: none;
  }

  a {
    color: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 4px;
  }

  ::selection {
    background: var(--yellow-500);
    color: var(--navy-900);
  }
}

@layer layout {
  .page {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  .container {
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    margin-inline: auto;
  }

  .section {
    position: relative;
    padding-block: var(--section-space);
  }

  .section--compact {
    padding-block: clamp(3rem, 6vw, 5rem);
  }

  .section-heading {
    display: grid;
    max-width: 45rem;
    gap: var(--space-3);
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }

  .section-heading--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-heading h2,
  .about__copy h2,
  .expectation__copy h2,
  .cta__copy h2,
  .faq-heading h2 {
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
  }

  .section-heading p,
  .about__copy > p,
  .expectation__copy > p,
  .faq-heading > p {
    color: var(--text-muted);
    font-size: clamp(1rem, 1.7vw, 1.12rem);
  }
}

@layer components {
  .skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    transform: translateY(-180%);
    border-radius: var(--radius-sm);
    background: var(--navy-900);
    color: var(--cream-50);
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
  }

  .curtain {
    position: absolute;
    top: -2rem;
    z-index: -1;
    width: clamp(5.5rem, 15vw, 13.5rem);
    height: clamp(17rem, 37vw, 31rem);
    background:
      linear-gradient(90deg, rgba(91,0,0,.24), transparent 18%, rgba(255,92,44,.42) 50%, transparent 78%, rgba(91,0,0,.24)),
      repeating-linear-gradient(90deg, #a90f0b 0 14%, #e52816 14% 28%);
    filter: drop-shadow(0 18px 16px rgba(84, 14, 5, .18));
    pointer-events: none;
  }

  .curtain::before {
    position: absolute;
    top: 44%;
    width: 1.2rem;
    height: 5.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #c77b00, #ffd85b 46%, #a96600);
    box-shadow: 0 0 0 .3rem rgba(225, 155, 18, .35);
    content: "";
  }

  .curtain::after {
    position: absolute;
    top: calc(44% + 4.6rem);
    width: 2.9rem;
    height: 5rem;
    background: linear-gradient(90deg, #b66d00, #ffd45d, #a35c00);
    clip-path: polygon(50% 0, 100% 36%, 78% 100%, 52% 70%, 25% 100%, 0 36%);
    content: "";
  }

  .curtain--left {
    left: 0;
    border-bottom-right-radius: 80% 45%;
    clip-path: polygon(0 0, 100% 0, 73% 39%, 51% 65%, 24% 82%, 0 100%);
  }

  .curtain--left::before {
    right: 12%;
  }

  .curtain--left::after {
    right: 4%;
  }

  .curtain--right {
    right: 0;
    border-bottom-left-radius: 80% 45%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 76% 82%, 49% 65%, 27% 39%);
  }

  .curtain--right::before {
    left: 12%;
  }

  .curtain--right::after {
    left: 4%;
  }

  .site-header {
    position: relative;
    z-index: 30;
    padding-block: clamp(1.1rem, 2.4vw, 1.65rem);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }

  .wordmark {
    display: inline-flex;
    width: max-content;
    flex-direction: column;
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.78;
    text-decoration: none;
    transform: rotate(-1deg);
  }

  .wordmark__line {
    white-space: nowrap;
  }

  .wordmark__letter {
    color: var(--letter);
    -webkit-text-stroke: 3px var(--cream-50);
    paint-order: stroke fill;
    text-shadow: 0 3px 0 rgba(76, 45, 8, .12);
  }

  .wordmark__line:last-child {
    padding-left: .12em;
  }

  .site-nav {
    justify-self: center;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.4rem);
    list-style: none;
  }

  .site-nav a {
    position: relative;
    color: var(--navy-900);
    font-family: var(--font-display);
    font-weight: 650;
    text-decoration: none;
  }

  .site-nav a::after {
    position: absolute;
    right: 0;
    bottom: -.4rem;
    left: 0;
    height: 3px;
    transform: scaleX(0);
    border-radius: var(--radius-pill);
    background: var(--red-500);
    content: "";
    transform-origin: right;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .site-nav a:hover::after,
  .site-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .nav-toggle {
    display: none;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
    color: var(--navy-900);
    cursor: pointer;
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    content: "";
    transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast);
  }

  .nav-toggle__bars::before {
    transform: translateY(-.38rem);
  }

  .nav-toggle__bars::after {
    transform: translateY(.26rem);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(0) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-2px) rotate(-45deg);
  }

  .button {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .8rem 1.35rem;
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out),
      background var(--duration-fast);
  }

  .button:hover {
    transform: translateY(-2px);
  }

  .button:active {
    transform: translateY(4px);
  }

  .button--red {
    background: linear-gradient(180deg, var(--red-500), var(--red-600));
    box-shadow: var(--shadow-brand);
    color: #fff8e6;
  }

  .button--red:hover {
    background: linear-gradient(180deg, #f03820, var(--red-700));
    box-shadow: 0 10px 0 #941009, 0 18px 32px rgba(85, 24, 4, 0.2);
  }

  .button--red:active {
    box-shadow: 0 3px 0 #941009, 0 9px 20px rgba(85, 24, 4, 0.18);
  }

  .button--blue {
    background: linear-gradient(180deg, #1767cf, var(--navy-800));
    box-shadow: var(--shadow-blue);
    color: #fff8e6;
  }

  .button--blue:hover {
    background: linear-gradient(180deg, #2476df, var(--navy-900));
  }

  .button--blue:active {
    box-shadow: 0 3px 0 #012d66, 0 9px 20px rgba(1, 45, 102, 0.18);
  }

  .button--wide {
    min-width: 12.5rem;
  }

  .button__star {
    color: var(--yellow-500);
    filter: drop-shadow(0 2px 0 rgba(100, 52, 0, .3));
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--navy-900);
    font-family: var(--font-display);
    font-weight: 650;
    text-underline-offset: .35em;
    text-decoration-thickness: 2px;
  }

  .text-link .icon {
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .text-link:hover .icon {
    transform: translateX(.3rem);
  }

  .hero {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 7rem) clamp(5rem, 9vw, 7.5rem);
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(25rem, 1.12fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
  }

  .hero__copy {
    position: relative;
    z-index: 2;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--red-700);
    font-family: var(--font-display);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .eyebrow::before {
    width: 1.8rem;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--yellow-600);
    content: "";
  }

  .hero h1 {
    max-width: 10ch;
    margin-top: var(--space-4);
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 7vw, 6.25rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: .96;
  }

  .hero h1 .red {
    color: var(--red-600);
  }

  .hero h1 .green {
    color: var(--teal-600);
  }

  .hero h1 .yellow {
    color: var(--yellow-600);
    text-shadow: 0 2px 0 rgba(111,68,0,.14);
  }

  .hero__lede {
    max-width: 37rem;
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    line-height: 1.65;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
  }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.4rem;
    margin-top: var(--space-8);
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    list-style: none;
  }

  .hero__meta li {
    display: flex;
    align-items: center;
    gap: .55rem;
  }

  .hero__meta li::before {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--dot, var(--red-500));
    content: "";
  }

  .hero__visual {
    position: relative;
    min-width: 0;
  }

  .stage-card {
    position: relative;
    width: min(100%, 43rem);
    margin-inline: auto;
    padding-top: 2.2rem;
    filter: drop-shadow(0 24px 23px rgba(77, 42, 0, .2));
  }

  .stage-card::before {
    position: absolute;
    inset: 0 4% 8%;
    z-index: -1;
    border-radius: 48% 48% 18% 18%;
    background:
      radial-gradient(circle at 50% 32%, rgba(255,255,255,.75), transparent 30%),
      linear-gradient(180deg, rgba(255, 206, 44, .9), rgba(255, 166, 12, .35));
    box-shadow: 0 0 0 .45rem rgba(255, 197, 24, .16);
    content: "";
  }

  .stage-card__image {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-inline: auto;
  }

  .stage-front {
    position: relative;
    z-index: 3;
    width: 86%;
    height: clamp(5.8rem, 12vw, 9.2rem);
    margin: -1.9rem auto 0;
    border-top: .65rem solid var(--yellow-500);
    border-right: .45rem solid #e6a90a;
    border-bottom: .65rem solid var(--yellow-500);
    border-left: .45rem solid #e6a90a;
    border-radius: 0 0 1.25rem 1.25rem;
    background:
      linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.07) 7% 9%, transparent 9% 19%, rgba(255,255,255,.07) 19% 21%, transparent 21% 100%),
      linear-gradient(180deg, #084484, #012d66 70%, #021f46);
    box-shadow: inset 0 .55rem 0 rgba(3, 24, 72, .32);
  }

  .stage-front::before {
    position: absolute;
    inset: -.65rem .8rem auto;
    height: .7rem;
    background: repeating-linear-gradient(90deg, #ffc91b 0 .7rem, #e69a00 .7rem 1.05rem);
    clip-path: polygon(0 0,100% 0,98% 100%,96% 0,94% 100%,92% 0,90% 100%,88% 0,86% 100%,84% 0,82% 100%,80% 0,78% 100%,76% 0,74% 100%,72% 0,70% 100%,68% 0,66% 100%,64% 0,62% 100%,60% 0,58% 100%,56% 0,54% 100%,52% 0,50% 100%,48% 0,46% 100%,44% 0,42% 100%,40% 0,38% 100%,36% 0,34% 100%,32% 0,30% 100%,28% 0,26% 100%,24% 0,22% 100%,20% 0,18% 100%,16% 0,14% 100%,12% 0,10% 100%,8% 0,6% 100%,4% 0,2% 100%,0 0);
    content: "";
  }

  .stage-star {
    position: absolute;
    z-index: 5;
    color: var(--yellow-500);
    filter: drop-shadow(0 4px 0 rgba(153, 82, 0, .22));
    animation: star-float 4.8s var(--ease-out) infinite alternate;
  }

  .stage-star--one {
    top: 4%;
    right: 0;
    width: clamp(2.1rem, 4vw, 3.5rem);
  }

  .stage-star--two {
    bottom: 8%;
    left: 0;
    width: clamp(1.65rem, 3vw, 2.65rem);
    color: var(--red-500);
    animation-delay: -1.2s;
  }

  .confetti {
    position: absolute;
    z-index: 1;
    width: .85rem;
    height: .28rem;
    border-radius: var(--radius-pill);
    background: var(--confetti-color, var(--red-500));
    transform: rotate(var(--confetti-rotate, 18deg));
    opacity: .86;
    animation: confetti-float 5.5s var(--ease-out) infinite alternate;
    pointer-events: none;
  }

  .confetti--1 { top: 16%; left: 38%; --confetti-color: var(--yellow-600); --confetti-rotate: 75deg; }
  .confetti--2 { top: 28%; left: 3%; --confetti-color: var(--teal-600); --confetti-rotate: 35deg; animation-delay: -2s; }
  .confetti--3 { top: 12%; right: 8%; --confetti-color: var(--pink-500); --confetti-rotate: 112deg; animation-delay: -.8s; }
  .confetti--4 { bottom: 13%; right: 2%; --confetti-color: var(--blue-600); --confetti-rotate: 150deg; animation-delay: -3s; }
  .confetti--5 { bottom: 19%; left: 40%; --confetti-color: var(--green-600); --confetti-rotate: 20deg; animation-delay: -1.7s; }

  .offerings-panel,
  .expectation,
  .about-panel,
  .faq-shell {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, rgba(255,249,232,.86), rgba(255,239,199,.72));
    box-shadow: var(--shadow-sm);
  }

  .offerings-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .offering {
    position: relative;
    min-width: 0;
    padding: clamp(2rem, 4vw, 3.25rem);
  }

  .offering + .offering {
    border-left: 1px solid var(--border);
  }

  .offering__icon,
  .proof__icon {
    display: grid;
    width: 4.25rem;
    height: 4.25rem;
    place-items: center;
    border: .35rem solid rgba(255,255,255,.52);
    border-radius: 50%;
    background: var(--offering-color, var(--red-500));
    box-shadow: 0 8px 18px rgba(82, 45, 3, .13);
    color: var(--cream-50);
  }

  .offering__icon .icon {
    width: 2rem;
    height: 2rem;
  }

  .offering h3 {
    margin-top: var(--space-6);
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.12;
  }

  .offering h3::after {
    display: block;
    width: 2.4rem;
    height: .22rem;
    margin-top: .9rem;
    border-radius: var(--radius-pill);
    background: var(--offering-color, var(--red-500));
    content: "";
  }

  .offering p {
    margin-top: var(--space-5);
    color: var(--text-muted);
  }

  .offering--red { --offering-color: var(--red-500); }
  .offering--green { --offering-color: var(--green-600); }
  .offering--blue { --offering-color: var(--blue-600); }

  .expectation {
    display: grid;
    grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(2rem, 5vw, 3.6rem);
  }

  .expectation__copy {
    position: relative;
    padding-left: clamp(0rem, 2vw, 1.25rem);
  }

  .expectation__copy::before {
    display: block;
    margin-bottom: -.2rem;
    color: var(--yellow-600);
    font-family: Georgia, serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: .65;
    content: "“";
  }

  .expectation__copy h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
  }

  .expectation__copy p {
    margin-top: var(--space-4);
  }

  .proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
  }

  .proof {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    color: var(--navy-900);
    font-family: var(--font-display);
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
  }

  .proof + .proof {
    border-left: 1px dashed var(--border-strong);
  }

  .proof__icon {
    width: 3.75rem;
    height: 3.75rem;
    border-width: .25rem;
    background: var(--cream-50);
    color: var(--proof-color, var(--navy-800));
  }

  .proof__icon .icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .about-panel {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(24rem, 1.15fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
    padding: clamp(2rem, 6vw, 5rem);
  }

  .about__copy h2 span {
    color: var(--red-600);
  }

  .about__copy > p {
    margin-top: var(--space-6);
  }

  .about__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    list-style: none;
  }

  .about__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--navy-900);
    font-weight: 700;
  }

  .about__list .icon {
    margin-top: .18rem;
    color: var(--yellow-600);
  }

  .about__visual {
    position: relative;
  }

  .about__frame {
    position: relative;
    overflow: hidden;
    min-height: 25rem;
    border: .55rem solid var(--green-600);
    border-radius: clamp(1.5rem, 4vw, 2.6rem);
    background:
      radial-gradient(circle at 50% 30%, rgba(255,255,255,.66), transparent 34%),
      linear-gradient(145deg, #f2d8a8, #fff1c9 55%, #f1d199);
    box-shadow: var(--shadow-md);
  }

  .about__frame::before,
  .about__frame::after {
    position: absolute;
    bottom: -4rem;
    width: 12rem;
    height: 18rem;
    border-radius: 50% 50% 0 0;
    background:
      radial-gradient(ellipse at 50% 100%, #3f7137 0 26%, transparent 27%),
      radial-gradient(ellipse at 25% 75%, #7ca64a 0 20%, transparent 21%),
      radial-gradient(ellipse at 72% 66%, #5f8e42 0 22%, transparent 23%);
    content: "";
    opacity: .56;
    z-index: 2;
    pointer-events: none;
  }

  .about__frame::before { left: -5rem; transform: rotate(12deg); }
  .about__frame::after { right: -5rem; transform: rotate(-12deg) scaleX(-1); }

  .about__slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .7s ease;
  }

  .about__slide[data-current="true"] {
    opacity: 1;
  }

  .about__dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    z-index: 3;
    display: flex;
    gap: .55rem;
    padding: .45rem .6rem;
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: rgba(8, 24, 43, .62);
  }

  .about__dots button {
    width: .72rem;
    height: .72rem;
    padding: 0;
    border: .12rem solid var(--cream-50);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .about__dots button[aria-current="true"] {
    background: var(--yellow-500);
  }

  .about__sticker {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1rem;
    transform: rotate(-3deg);
    border: .28rem solid var(--cream-50);
    border-radius: var(--radius-pill);
    background: var(--yellow-500);
    box-shadow: var(--shadow-sm);
    color: var(--navy-900);
    font-family: var(--font-display);
    font-weight: 700;
  }

  .faq-shell {
    display: grid;
    grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    padding: clamp(2rem, 5vw, 4rem);
  }

  .faq-heading {
    align-self: start;
  }

  .faq-heading p {
    margin-top: var(--space-4);
  }

  .faq-list {
    display: grid;
    gap: var(--space-3);
  }

  .faq-list details {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 249, 232, .72);
  }

  .faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 1.2rem 1.35rem;
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
  }

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

  .faq-list summary::after {
    width: .7rem;
    height: .7rem;
    flex: 0 0 auto;
    transform: rotate(45deg);
    border-right: .18rem solid currentColor;
    border-bottom: .18rem solid currentColor;
    content: "";
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .faq-list details[open] summary::after {
    transform: rotate(225deg) translate(-.15rem, -.15rem);
  }

  .faq-list details p {
    padding: 0 1.35rem 1.3rem;
    color: var(--text-muted);
  }

  .cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-8);
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid #a8170d;
    border-bottom: .7rem solid var(--yellow-500);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 74% 20%, rgba(255,214,52,.16), transparent 18rem),
      linear-gradient(135deg, var(--red-500), #c9170c 70%, #a90e08);
    box-shadow: var(--shadow-md);
    color: #fff9e8;
  }

  .cta::before {
    position: absolute;
    inset: auto -3rem -8rem auto;
    width: 18rem;
    height: 18rem;
    border: 2.6rem solid rgba(255,255,255,.06);
    border-radius: 50%;
    content: "";
  }

  .cta__copy {
    position: relative;
    z-index: 2;
  }

  .cta__copy h2 {
    color: inherit;
  }

  .cta__copy p {
    max-width: 42rem;
    margin-top: var(--space-3);
    color: rgba(255,249,232,.88);
    font-size: 1.08rem;
  }

  .cta__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .cta__stars .icon {
    position: absolute;
    color: var(--yellow-500);
    opacity: .86;
  }

  .cta__stars .icon:nth-child(1) { top: 18%; left: 3%; width: 1rem; }
  .cta__stars .icon:nth-child(2) { bottom: 14%; left: 56%; width: .75rem; }
  .cta__stars .icon:nth-child(3) { top: 22%; right: 4%; width: 1.3rem; }

  .site-footer {
    padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
  }

  .site-footer .wordmark {
    font-size: 1.55rem;
  }

  .contact-list,
  .social-list {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.5rem;
    list-style: none;
  }

  .contact-list a,
  .contact-list span,
  .social-list a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--navy-900);
    font-weight: 700;
    text-decoration: none;
  }

  .contact-list a:hover,
  .social-list a:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
  }

  .social-list:empty {
    display: none;
  }

  .site-footer__bottom {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .82rem;
    text-align: center;
  }

  dialog {
    width: min(calc(100% - 2rem), 43rem);
    max-height: min(90vh, 52rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--cream-100);
    box-shadow: 0 30px 90px rgba(12,31,57,.35);
    color: var(--text);
  }

  dialog::backdrop {
    background: rgba(1, 23, 53, .66);
    backdrop-filter: blur(5px);
  }

  .dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding: 1.6rem 1.7rem 1.3rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #ffe7a7, var(--cream-200));
  }

  .dialog__header h2 {
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.05;
  }

  .dialog__header p {
    margin-top: .35rem;
    color: var(--text-muted);
  }

  .dialog__close {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--cream-50);
    color: var(--navy-900);
    cursor: pointer;
  }

  .booking-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    padding: 1.7rem;
  }

  .field {
    display: grid;
    gap: .45rem;
  }

  .field--wide {
    grid-column: 1 / -1;
  }

  .field label {
    color: var(--navy-900);
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 650;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: .8rem;
    background: var(--cream-50);
    color: var(--text);
  }

  .field input,
  .field select {
    min-height: 3rem;
    padding: .65rem .8rem;
  }

  .field textarea {
    min-height: 7.5rem;
    padding: .8rem;
    resize: vertical;
  }

  .form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-2);
  }

  .form-note {
    max-width: 25rem;
    color: var(--text-muted);
    font-size: .82rem;
  }

  .no-js-note {
    display: none;
  }

  @keyframes star-float {
    from { transform: translateY(0) rotate(-5deg); }
    to { transform: translateY(-.65rem) rotate(6deg); }
  }

  @keyframes confetti-float {
    from { transform: translateY(0) rotate(var(--confetti-rotate, 18deg)); }
    to { transform: translateY(-1rem) rotate(calc(var(--confetti-rotate, 18deg) + 14deg)); }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 64rem) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .header-cta {
    display: none;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, .95fr);
    gap: 2.5rem;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof:nth-child(3) {
    border-left: 0;
  }

  .proof:nth-child(n+3) {
    border-top: 1px dashed var(--border-strong);
  }

  .about-panel {
    grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 48rem) {
  .curtain {
    width: 5.3rem;
    height: 15rem;
    opacity: .9;
  }

  .site-header {
    padding-block: 1rem;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .wordmark {
    font-size: 1.45rem;
  }

  .nav-toggle {
    display: grid;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + .35rem);
    right: var(--gutter);
    left: var(--gutter);
    display: none;
    padding: 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: rgba(255, 244, 218, .98);
    box-shadow: var(--shadow-md);
  }

  .site-nav[data-open="true"] {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav a {
    display: block;
    padding: .85rem .8rem;
    border-radius: var(--radius-sm);
  }

  .site-nav a:hover {
    background: rgba(255, 213, 64, .22);
  }

  .site-nav a::after {
    display: none;
  }

  .hero {
    padding-top: 3rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__copy {
    text-align: center;
  }

  .eyebrow {
    justify-self: center;
  }

  .hero h1 {
    max-width: 12ch;
    margin-inline: auto;
  }

  .hero__lede {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__meta {
    justify-content: center;
  }

  .hero__visual {
    width: min(100%, 37rem);
    margin-inline: auto;
  }

  .offerings-panel {
    grid-template-columns: 1fr;
  }

  .offering + .offering {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .expectation,
  .about-panel,
  .faq-shell {
    grid-template-columns: 1fr;
  }

  .expectation__copy {
    text-align: center;
  }

  .expectation__copy::before {
    margin-inline: auto;
  }

  .about__visual {
    order: -1;
  }

  .about__frame {
    min-height: 22rem;
  }

  .cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta .button {
    justify-self: center;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .contact-list,
  .social-list {
    justify-content: center;
  }
}

@media (max-width: 34rem) {
  .hero h1 {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  .hero__actions {
    flex-direction: column;
  }

  .button--wide {
    width: min(100%, 20rem);
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof + .proof,
  .proof:nth-child(3) {
    border-top: 1px dashed var(--border-strong);
    border-left: 0;
  }

  .about__frame {
    min-height: 18rem;
  }

  .booking-form {
    grid-template-columns: 1fr;
  }

  .field--wide,
  .form-actions {
    grid-column: auto;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}