@import url('/css/site-icons.css?v=20260924-buttons-uppercase');
:root { color-scheme: dark; --story-accent: #ffbb42; --story-muted: #b0aaa0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; background: #080808; color: #f6f3ec; font: 400 16px/1.8 "Manrope", "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; transition: color .2s, background .2s; }
a:hover { color: #ffcf73; }
a:focus-visible, button:focus-visible { outline: 2px solid #ffcf73; outline-offset: 6px; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
h1, h2, h3 { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight: 500; letter-spacing: -.045em; line-height: 1.15; }
.story-container { width: min(1170px, calc(100% - 80px)); margin-inline: auto; }
.story-navbar { position: fixed; top: 0; width: 100%; z-index: 20; background: #000; border-bottom: 1px solid #242226; }
.story-navbar nav { max-width: 1170px; margin: auto; }
.story-navbar ul { display: flex; justify-content: center; list-style: none; gap: 28px; }
.story-navbar a { display: block; padding: 12px 0; font: 500 13px/40px "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.story-navbar a[href$="#about"] { --section-hover-color: #e64b77; }
.story-navbar a[href$="#services"] { --section-hover-color: #32db8a; }
.story-navbar a[href$="#portfolio"] { --section-hover-color: #8263dd; }
.story-navbar a[href$="#stories"] { --section-hover-color: #ffbb42; }
.story-navbar a[href$="#contact"] { --section-hover-color: #4c9ee7; }
.story-navbar a:hover { color: var(--section-hover-color, #fff); }
.story-navbar a[aria-current] { color: #ffbb42; }
.story-navbar a[aria-current]:hover { color: var(--section-hover-color, #fff); }
.story-menu-toggle { display: none; }
.story-progress { position: absolute; bottom: -1px; width: 100%; height: 2px; }
.story-progress span { display: block; height: 100%; width: 100%; background: #ffbb42; transform: scaleX(0); transform-origin: left; }
.story-hero { padding-top: 125px; }
.story-topline { display: flex; justify-content: space-between; gap: 20px; color: var(--story-muted); font-size: 12px; margin-bottom: 64px; }
.story-topline > span { font-size: 10px; letter-spacing: .15em; }
.story-eyebrow { color: var(--story-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
.story-hero h1 { max-width: 1070px; font-size: clamp(40px, 5.25vw, 72px); margin-block: 22px 28px; }
.story-deck { max-width: 670px; font-size: 21px; line-height: 1.6; color: #cec6b8; }
.story-meta { display: flex; gap: 65px; align-items: center; margin-top: 45px; padding-block: 25px 30px; border-block: 1px solid #353127; }
.story-meta > div > span, .story-author > div > span { font-size: 9px; color: var(--story-muted); letter-spacing: .15em; }
.story-meta p { font-size: 13px; }
.story-author { display: flex; align-items: center; gap: 16px; }
.story-meta > a { margin-left: auto; font-size: 12px; }
.story-meta > a span { margin-left: 30px; color: var(--story-accent); }
.story-layout { display: grid; grid-template-columns: 250px minmax(0, 710px); gap: 100px; padding-block: 80px 30px; align-items: start; }
.story-aside { position: sticky; top: 105px; }
.story-aside ol { list-style: none; margin-top: 24px; }
.story-aside li + li { margin-top: 18px; }
.story-aside li a { display: flex; align-items: baseline; gap: 15px; font-size: 12px; line-height: 1.7; color: #b0aaa0; }
.story-aside li a:hover, .story-aside li a[aria-current] { color: #ffe0a3; }
.story-aside li a span { font-size: 10px; color: #ffbb42; }
.story-aside-note { border-top: 1px solid #353127; margin-top: 35px; padding-top: 30px; }
.story-aside-note p { font-family: "Space Grotesk", sans-serif; font-size: 20px; line-height: 1.4; margin-block: 14px; }
.story-aside-note > a { color: var(--story-muted); font-size: 11px; }
.story-intro { font-size: 21px; line-height: 1.85; color: #e6e0d5; }
.story-takeaway { background: #1c1810; border-left: 2px solid #ffbb42; padding: 30px 35px; margin-block: 38px 15px; }
.story-takeaway p { font-family: "Space Grotesk", sans-serif; font-size: 29px; letter-spacing: -.025em; line-height: 1.4; margin-top: 12px; }
.story-section { position: relative; padding-block: 45px; border-bottom: 1px solid #353127; }
.story-section-number { display: block; font: 500 38px/1 "Space Grotesk", sans-serif; color: #ffbb42; margin-bottom: 18px; }
.story-content h2 { font-size: 30px; margin-bottom: 22px; }
.story-section p, .story-conclusion > p:last-child { color: #c5beb2; font-size: 16px; line-height: 1.95; }
.story-conclusion { padding-block: 45px 35px; }
.story-conclusion h2 { margin-top: 16px; }
.story-article-end { display: flex; justify-content: space-between; gap: 20px; padding-block: 25px; border-top: 1px solid #353127; font-size: 12px; color: var(--story-muted); }
.story-contact { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-top: 1px solid #353127; padding-block: 70px 100px; margin-top: 60px; }
.story-contact h2 { margin-top: 22px; font-size: clamp(36px, 4vw, 54px); line-height: 1.1; }
.story-contact em { font-style: normal; color: var(--story-accent); }
.story-button { background: #ffbb42; color: #17130a; border-color: #ffbb42; }
.story-button span { font-size: 23px; line-height: 1; }
.story-button:hover { background: #ffcf73; border-color: #ffcf73; color: #17130a; }
.story-next { display: block; background: #ffbb42; padding-block: 55px; }
.story-next > div { display: flex; justify-content: space-between; gap: 60px; align-items: center; }
.story-next .story-eyebrow { color: #49340f; margin-bottom: 20px; }
.story-next h2 { max-width: 900px; font-size: clamp(28px, 3vw, 42px); color: #17130a; }
.story-next-category { color: #49340f; margin-top: 20px; font-size: 12px; }
.story-next-category span { margin-inline: 12px; }
.story-next-arrow { font-size: 56px; color: #17130a; }
.story-arrow-back { transform: rotate(180deg); }
.story-next:hover { background: #e8a72e; }
.story-skip { position: fixed; top: -100px; left: 20px; padding: 12px 20px; background: #ffbb42; color: #17130a; z-index: 30; }
.story-skip:focus { top: 12px; }
@media (max-width: 925px) {
  .story-navbar.is-enhanced .story-menu-toggle { display: block; border: 0; padding: 15px; margin: auto; background: transparent; color: white; font: 700 20px/1.5 "Manrope", sans-serif; cursor: pointer; }
  .story-navbar.is-enhanced ul { display: none; }
  .story-navbar.is-enhanced ul.is-open { display: flex; flex-direction: column; align-items: center; gap: 0; padding-bottom: 15px; }
  .story-navbar.is-enhanced a { line-height: 25px; padding-block: 10px; }
  .story-navbar:not(.is-enhanced) ul { flex-wrap: wrap; gap: 4px 18px; }
  .story-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 45px; }
}
@media (max-width: 650px) {
  .story-container { width: calc(100% - 40px); }
  .story-hero { padding-top: 100px; }
  .story-topline { margin-bottom: 40px; font-size: 11px; }
  .story-topline > span { font-size: 8px; }
  .story-hero h1 { font-size: 38px; }
  .story-deck { font-size: 18px; }
  .story-meta { gap: 22px; flex-wrap: wrap; margin-top: 30px; }
  .story-meta > a { margin-left: 0; width: 100%; }
  .story-layout { grid-template-columns: 1fr; gap: 35px; padding-top: 40px; }
  .story-aside { position: static; padding-bottom: 30px; border-bottom: 1px solid #353127; }
  .story-aside ol { display: grid; gap: 12px; }
  .story-aside li + li { margin: 0; }
  .story-aside-note { display: none; }
  .story-intro { font-size: 19px; }
  .story-takeaway { padding: 25px; }
  .story-takeaway p { font-size: 25px; }
  .story-section { padding-block: 35px; }
  .story-content h2 { font-size: 27px; }
  .story-contact { margin-top: 25px; padding-block: 50px 65px; flex-direction: column; align-items: start; gap: 30px; }
  .story-next { padding-block: 40px; }
  .story-next > div { gap: 20px; }
  .story-next-arrow { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a { transition: none; } }

/* Keep the Home label in place while revealing its decorative brand icon. */
.nav-home-label { position: relative; display: inline-block; }
.nav-home-label::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  top: calc(50% - 0.5px);
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: url('/images/wayv-nav-icon-transparent.png') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
a:hover > .nav-home-label::before,
a:focus-visible > .nav-home-label::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-home-label::before { transition: none; }
}