*,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
  }

  :root {
    --navy: #1a2c4e;
    --rose: #e05a7a;
    --peach: #fff0f3;
    --sky: #e8f4fd;
    --gold: #f5a623;
    --text: #4a5568;
    --muted: #9aa3b2;
    --white: #ffffff;
    --green: #2ecc71;
    --purple: #8b5cf6;
    --card-r: 20px;
  }

  /* NAV */
  .topnav {
    background: var(--navy);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem
  }

  .topnav a {
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600
  }

  .topnav a:hover {
    color: #fff
  }

  .topnav .sep {
    color: rgba(255, 255, 255, .25)
  }

  .topnav .cur {
    color: var(--rose)
  }

  /* HERO */
  .hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden
  }

  .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 18, 40, .90) 0%, rgba(10, 18, 40, .4) 55%, transparent 100%)
  }

  .hero-content {
    position: relative;
    z-index: 2;
    padding: 3rem 2rem 4rem;
    max-width: 680px;
    animation: fadeUp .9s ease both
  }

  .hero-tag {
    display: inline-block;
    background: var(--rose);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: .35rem .9rem;
    border-radius: 50px;
    margin-bottom: 1rem
  }

  .hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    line-height: 1.15;
    margin-bottom: .75rem
  }

  .hero h1 span {
    color: var(--rose)
  }

  .hero-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.75;
    max-width: 480px
  }

  .scroll-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .5);
    font-size: .7rem;
    letter-spacing: 1px;
    animation: bounce 2s infinite
  }

  /* SECTIONS */
  .sec {
    padding: 5rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto
  }

  .sec-sm {
    padding: 3.5rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: .6rem
  }

  .title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 1.2rem
  }

  .title span {
    color: var(--rose)
  }

  /* STORY */
  .story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center
  }

  .story-text p {
    font-size: .95rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1rem
  }

  .story-text p strong {
    color: var(--navy)
  }

  .story-visual {
    position: relative
  }

  .img-wrap {
    border-radius: var(--card-r);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(26, 44, 78, .14)
  }

  .img-wrap img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease
  }

  .img-wrap:hover img {
    transform: scale(1.04)
  }

  .float-b {
    position: absolute;
    bottom: -1.2rem;
    left: -1.2rem;
    background: var(--rose);
    color: #fff;
    border-radius: 14px;
    padding: .9rem 1.2rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(224, 90, 122, .35);
    min-width: 130px;
    text-align: center
  }

  .float-b .num {
    font-size: 1.8rem;
    font-weight: 900;
    display: block;
    line-height: 1
  }

  /* SHOWROOM HIGHLIGHT */
  .showroom {
    background: var(--navy);
    padding: 5rem 1.5rem;
    position: relative;
    overflow: hidden
  }

  .showroom::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: var(--rose);
    opacity: .07;
    border-radius: 50%
  }

  .showroom-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 1
  }

  .showroom-text .tag {
    color: var(--rose)
  }

  .showroom-text .title {
    color: #fff;
    margin-bottom: 1rem
  }

  .showroom-text p {
    color: rgba(255, 255, 255, .72);
    font-size: .93rem;
    line-height: 1.8;
    margin-bottom: .85rem
  }

  .sr-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.5rem
  }

  .sr-list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: rgba(255, 255, 255, .8);
    font-size: .9rem
  }

  .sr-list li i {
    color: var(--rose);
    font-size: .85rem;
    margin-top: 3px;
    flex-shrink: 0
  }

  .sr-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--rose);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .7rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 8px 20px rgba(224, 90, 122, .35)
  }

  .sr-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(224, 90, 122, .45)
  }

  .showroom-img {
    border-radius: var(--card-r);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35)
  }

  .showroom-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block
  }

  /* CATEGORIES ROW */
  .cats {
    padding: 4rem 1.5rem;
    background: #fff
  }

  .cats-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center
  }

  .cats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 2.5rem
  }

  .cat-pill {
    background: var(--peach);
    border-radius: 14px;
    padding: 1.2rem .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    transition: transform .25s, box-shadow .25s;
    cursor: default
  }

  .cat-pill:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(224, 90, 122, .15)
  }

  .cat-pill i {
    font-size: 1.5rem;
    color: var(--rose)
  }

  .cat-pill span {
    font-size: .75rem;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    line-height: 1.3
  }

  /* STATS */
  .stats-strip {
    background: linear-gradient(135deg, var(--rose) 0%, #c0395a 100%);
    padding: 3rem 1.5rem
  }

  .stats-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center
  }

  .stat-item i {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: .4rem;
    display: block
  }

  .stat-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1
  }

  .stat-label {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
    margin-top: .3rem;
    letter-spacing: .4px
  }

  /* LOCATION */
  .location-sec {
    padding: 5rem 1.5rem;
    background: #fafbff
  }

  .location-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start
  }

  .loc-card {
    background: #fff;
    border-radius: var(--card-r);
    padding: 2rem;
    border: 1.5px solid #f0f2f8;
    height: 100%
  }

  .loc-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem
  }

  .loc-card h3 i {
    color: var(--rose)
  }

  .loc-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem
  }

  .loc-row i {
    color: var(--rose);
    font-size: .9rem;
    margin-top: 3px;
    flex-shrink: 0
  }

  .loc-row span {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text)
  }

  .loc-row strong {
    color: var(--navy)
  }

  .hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem
  }

  .hour-row {
    font-size: .8rem;
    color: var(--text)
  }

  .hour-row .day {
    font-weight: 700;
    color: var(--navy)
  }

  .open-badge {
    display: inline-block;
    background: #e8fdf2;
    color: #16a34a;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 50px;
    margin-left: .5rem
  }

  /* FOOTER */
  .footer-bar {
    background: var(--navy);
    color: rgba(255, 255, 255, .45);
    text-align: center;
    font-size: .78rem;
    padding: 1.25rem;
    letter-spacing: .3px
  }

  .footer-bar a {
    color: var(--rose);
    text-decoration: none
  }

  /* ANIMATIONS */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(30px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  @keyframes bounce {

    0%,
    100% {
      transform: translateX(-50%) translateY(0)
    }

    50% {
      transform: translateX(-50%) translateY(8px)
    }
  }

  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease
  }

  .reveal.visible {
    opacity: 1;
    transform: none
  }

  @media(max-width:900px) {

    .story-grid,
    .showroom-inner,
    .location-inner {
      grid-template-columns: 1fr
    }

    .cats-grid {
      grid-template-columns: repeat(3, 1fr)
    }

    .stats-inner {
      grid-template-columns: repeat(2, 1fr)
    }

    .float-b {
      left: 50%;
      transform: translateX(-50%);
      bottom: -1.4rem
    }

    .showroom-img {
      margin-top: 1.5rem
    }
  }

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