/* Black, ice blue, and soft pastel rainbow controls. */
:root {
  color-scheme: dark;
  --bg: #07090c;
  --surface: #10161d;
  --ink: #f3f8fc;
  --muted: #b4c2ce;
  --accent: #a9ddff;
  --line: #2b3945;
  --button-rainbow: linear-gradient(110deg, #d4edff 0%, #e0e0ff 26%, #f6deed 49%, #fff0d9 73%, #d8f4e8 100%);
}
.header, .experience, .sizes, .footer { background: var(--bg); }
.header { border-bottom: 1px solid var(--line); }
.reel, .quote, .occasion-strip { background: #0c1117; }
.occasion-strip { color: var(--accent); border-block: 1px solid var(--line); }
.hero { background: var(--bg); }
.hero h1 em, .eyebrow, .hero .eyebrow, .payment .eyebrow,
.size-row h3, .size-link, .text-link, .experience-copy .text-link { color: var(--accent); }
.hero-description { color: #e0eaf2; }
.location { color: #b9cbd9; }
.hero-image:after {
  background: linear-gradient(90deg, rgba(3,8,13,.95) 0%, rgba(3,8,13,.82) 34%, rgba(3,8,13,.18) 76%), linear-gradient(0deg, rgba(3,8,13,.5), transparent 40%);
}
.size-row, .quote-form { background: var(--surface); border-color: var(--line); box-shadow: none; }
.payment {
  --bg: #07090c;
  --surface: #10161d;
  --ink: #f3f8fc;
  --muted: #b4c2ce;
  --line: #2b3945;
  border-top: 1px solid var(--line);
}
.payment-card { border-color: var(--line); }
.field input, .field select, .field textarea, .form-status textarea {
  background: #080d12;
  border-color: #546778;
  color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: #9aaeba; }
.header nav>a:not(.button):hover, .text-link:hover, .contact-link:hover { color: #d8efff; }
.button, .button:hover, .js .menu-toggle, .js .menu-toggle:hover,
.size-row .size-link, .size-row .size-link:hover {
  background: var(--button-rainbow);
  border-color: #d4edff;
  color: #101a24;
}
.size-row .size-link {
  align-self: stretch;
  justify-content: center;
  padding: .65rem .8rem;
  border: 1px solid #d4edff;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
}
.button:hover, .js .menu-toggle:hover, .size-row .size-link:hover { filter: brightness(1.06); }
.button:active, .js .menu-toggle:active, .size-row .size-link:active { filter: brightness(.94); }
.button:focus-visible, .size-link:focus-visible, .menu-toggle:focus-visible { outline-color: #a9ddff; }
@media(max-width:850px) {
  .hero-image:after { background: linear-gradient(90deg, rgba(3,8,13,.9), rgba(3,8,13,.48)), linear-gradient(0deg, rgba(3,8,13,.45), transparent); }
}
.size-row { min-width: 0; }
.size-row .size-link { overflow-wrap: anywhere; }
@media(max-width:460px) { .size-list { grid-template-columns: minmax(0,1fr); } }
.deposit-back { padding: 1.5rem var(--gutter) 0; }
.deposit-page .payment { border-top: 0; padding-top: 2rem; }
.deposit-page #payment-title { font-size: clamp(2.5rem,4.5vw,4.5rem); line-height: 1.08; max-width: 40rem; }
.header nav>a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .35em; }
.testimonials { background: var(--bg); border-top: 1px solid var(--line); }
.testimonials-heading { margin-bottom: 2.5rem; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.testimonial-card { display: flex; flex-direction: column; padding: clamp(1.4rem,2.5vw,2.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.testimonial-stars { color: var(--accent); font-size: 1.25rem; letter-spacing: .15em; line-height: 1.5; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.testimonial-card blockquote { margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere; }
.testimonial-card figcaption { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--accent); font-weight: 600; }
@media(max-width:850px) { .testimonial-grid { grid-template-columns: minmax(0,1fr); } }
.testimonials.has-carousel .testimonial-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; max-width: 56rem; margin-inline: auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 8px; }
.testimonials.has-carousel .testimonial-grid::-webkit-scrollbar { display: none; }
.has-carousel .testimonial-card { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; text-align: center; padding: clamp(1.5rem,4vw,3.5rem); }
.has-carousel .testimonial-card.is-active { opacity: 1; visibility: visible; }
.has-carousel .testimonial-card blockquote { font-size: clamp(1.0625rem,1.7vw,1.4rem); }
.testimonial-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 1.5rem auto 0; }
.testimonial-dots { display: flex; gap: .2rem; }
.testimonial-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.testimonial-dot::before { content: ''; width: 10px; height: 10px; border: 1px solid var(--accent); border-radius: 50%; background: transparent; }
.testimonial-dot[aria-pressed="true"]::before { background: var(--accent); }
.testimonial-count { color: var(--muted); font-size: .875rem; }
.size-guide { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 3rem; align-items: center; background: var(--surface); }
.size-guide h2 { max-width: 40rem; }
.size-guide p:not(.eyebrow), .custom-size p:not(.eyebrow) { color: var(--muted); margin-top: 1.25rem; max-width: 38rem; }
.size-guide-action { text-align: center; }
.size-guide-action .button { min-height: 64px; width: 100%; max-width: 23rem; padding: 1.15rem 2rem; font-size: 1.125rem; }
.size-guide-action p { font-size: .875rem; }
.sizes-page .sizes { padding-top: 2rem; }
.sizes-page h1 { font-size: clamp(2.5rem,4.5vw,4.5rem); }
.custom-size { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3rem; background: var(--surface); border-top: 1px solid var(--line); }
.custom-size-panel { min-width: 0; }
.custom-size-panel summary { list-style: none; min-height: 56px; width: 100%; }
.custom-size-panel summary::-webkit-details-marker { display: none; }
.custom-size-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; padding-top: 1.5rem; }
.custom-size-form input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.custom-size-form input::-webkit-inner-spin-button, .custom-size-form input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media(max-width:850px) { .size-guide, .custom-size { grid-template-columns: minmax(0,1fr); gap: 2rem; } .size-guide-action { text-align: left; } }
@media(max-width:460px) { .custom-size-form { grid-template-columns: minmax(0,1fr); } }
.sizes-page .size-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.size-photo-card { padding: 0 0 1.5rem; overflow: hidden; }
.size-photo-card .size-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: 7px 7px 0 0; }
.size-photo-card > h3, .size-photo-card > div { margin-inline: 1.5rem; }
.size-photo-card > .size-link { margin-inline: 1.5rem; }
@media(max-width:850px) { .sizes-page .size-list { grid-template-columns: minmax(0,1fr); max-width: 36rem; margin-inline: auto; } }

/* Slow color movement and a restrained glow across primary controls. */
.button, .button:hover, .js .menu-toggle, .js .menu-toggle:hover,
.size-row .size-link, .size-row .size-link:hover {
  background-size: 220% 220%;
  background-position: 0% 50%;
  box-shadow: 0 0 14px rgba(169,221,255,.16), 0 5px 18px rgba(160,179,255,.10);
  animation: button-color-drift 9s ease-in-out infinite alternate;
  transition: transform .22s ease, box-shadow .3s ease, filter .22s ease;
}
@keyframes button-color-drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@media(hover:hover) and (pointer:fine) {
  .button:hover, .js .menu-toggle:hover, .size-row .size-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(169,221,255,.30), 0 8px 26px rgba(221,192,248,.17);
  }
}
.button:focus-visible, .js .menu-toggle:focus-visible, .size-row .size-link:focus-visible {
  box-shadow: 0 0 22px rgba(169,221,255,.30), 0 8px 26px rgba(221,192,248,.17);
}
.button:active, .js .menu-toggle:active, .size-row .size-link:active {
  transform: translateY(1px) scale(.99);
  box-shadow: 0 0 12px rgba(169,221,255,.24);
}
@media(prefers-reduced-motion:reduce) {
  .button, .button:hover, .js .menu-toggle, .js .menu-toggle:hover,
  .size-row .size-link, .size-row .size-link:hover {
    animation: none;
    background-position: 50% 50%;
    transform: none;
  }
  .button:active, .js .menu-toggle:active, .size-row .size-link:active { transform: none; }
}

/* A cool-white light pass follows the opening headline's letters. */
.hero .headline-line { display: block; --headline-color: #f3f8fc; color: var(--headline-color); }
.hero .headline-accent { --headline-color: #a9ddff; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero .headline-line {
    background-image: linear-gradient(108deg, var(--headline-color) 0%, var(--headline-color) 42%, #87d7ff 47%, #ffffff 49.5%, #ffffff 50.5%, #b7e7ff 53%, var(--headline-color) 58%, var(--headline-color) 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: headline-light-pass 6.5s ease-in-out infinite;
  }
}
@keyframes headline-light-pass {
  0%, 12% { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}
@media(prefers-reduced-motion:reduce) {
  .hero .headline-line { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}
@media(forced-colors:active) {
  .hero .headline-line { animation: none; background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}

/* The camera advances with the page while the opening screen stays in view. */
.hero-scroll { position: relative; }
.hero-scroll.is-ready { height: 270svh; }
.hero-scroll.is-ready .hero { position: sticky; top: 0; height: 100svh; min-height: 640px; }
.hero-scroll .hero-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; opacity: 0; }
.hero-scroll.is-ready.is-video-ready .hero-image video { opacity: 1; }
.hero-scroll.is-ready.is-video-ready .hero-image > img { opacity: 0; }
.hero-scroll .hero-image:after { inset: 0; background: linear-gradient(90deg,rgba(3,8,13,.92),rgba(3,8,13,.6) 43%,rgba(3,8,13,.12) 75%),linear-gradient(0deg,rgba(3,8,13,.7),transparent 25%); }
.scroll-cue { position: absolute; z-index: 3; bottom: 1.5rem; left: var(--gutter); right: var(--gutter); color: #d8efff; font-size: .875rem; display: flex; align-items: center; gap: 1rem; }
.scroll-cue[hidden] { display: none; }
.scroll-track { width: 100px; height: 2px; background: #ffffff40; overflow: hidden; }
.scroll-track > span { display: block; width: 100%; height: 100%; background: #a9ddff; transform: scaleX(var(--scroll-progress,0)); transform-origin: left; }
.hero-scroll.is-ready .hero-copy { opacity: var(--copy-opacity,1); }
.brand-logo { background: #07090c; }
.brand-wordmark { color: #d8efff; }
.brand-wordmark > span { color: #a9ddff; }
@media(max-width:850px) {
  .hero-scroll.is-ready { height: 240svh; }
  .hero-scroll.is-ready .hero { min-height: 620px; padding-block: 2.5rem 5rem; }
  .hero-scroll .hero-image video { object-position: center; }
  .hero-scroll .hero-image:after { background: linear-gradient(90deg,rgba(3,8,13,.82),rgba(3,8,13,.35)),linear-gradient(0deg,rgba(3,8,13,.75),transparent 40%); }
}
@media(prefers-reduced-motion:reduce), (max-height:620px) {
  .hero-scroll.is-ready { height: auto; }
  .hero-scroll.is-ready .hero { position: relative; height: auto; min-height: 650px; }
  .hero-scroll.is-ready .hero-copy { opacity: 1; }
  .hero-scroll .scroll-cue { display: none; }
}

/* Words and actions emerge progressively along the video's scroll timeline. */
.hero-scroll.is-ready .hero-copy { opacity: 1; }
.hero-scroll.is-ready .hero-copy > .eyebrow,
.hero-scroll.is-ready .headline-line,
.hero-scroll.is-ready .hero-description,
.hero-scroll.is-ready .hero-copy > .button,
.hero-scroll.is-ready .location {
  opacity: var(--reveal-opacity,1);
  transform: translate3d(0,var(--reveal-y,0px),0) scale(var(--reveal-scale,1));
  transform-origin: left center;
  will-change: transform, opacity;
  transition: none;
}
.hero-scroll.is-ready .headline-line {
  animation: none;
  background-position: var(--light-position,100%) 0;
}
.hero-scroll.is-ready .scroll-cue { opacity: calc(1 - var(--intro-exit,0)); }
.hero-scroll.is-ready .hero-image:after { opacity: calc(1 - var(--intro-exit,0) * .7); }
@media(prefers-reduced-motion:reduce), (max-height:620px) {
  .hero-scroll.is-ready .hero-copy > .eyebrow,
  .hero-scroll.is-ready .headline-line,
  .hero-scroll.is-ready .hero-description,
  .hero-scroll.is-ready .hero-copy > .button,
  .hero-scroll.is-ready .location { transform: none; opacity: 1; will-change: auto; }
  .hero-scroll.is-ready .hero-image:after { opacity: 1; }
}

/* Early, quiet reveals for supporting content on every page. */
.gentle-reveal { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s ease-out; }
.gentle-reveal.reveal-pending { opacity: .35; transform: translateY(14px); }
.gentle-reveal:focus-within { opacity: 1; transform: none; }
@media(prefers-reduced-motion:reduce) {
  .gentle-reveal, .gentle-reveal.reveal-pending { opacity: 1; transform: none; transition: none; }
}
@media print { .gentle-reveal.reveal-pending { opacity: 1; transform: none; } }

/* Edge-to-edge, viewport-height walkthrough. */
.walkthrough.section { position: relative; padding: 0; height: 100svh; min-height: 420px; overflow: hidden; background: #03070b; }
.walkthrough-heading { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 5rem var(--gutter) 2.5rem; background: linear-gradient(transparent,rgba(3,7,11,.85)); pointer-events: none; }
.walkthrough-heading h2 { color: #f3f8fc; font-size: clamp(2rem,4vw,4rem); }
.walkthrough-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.walkthrough-stage video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#walkthrough-status:not(:empty) { position: absolute; top: 1rem; left: 1rem; right: 1rem; padding: 1rem; background: #07090ce6; text-align: center; }