/*
         * BRAND COLORS — The Nosepin Company
         * --red:       #C8193A  (logo crimson)
         * --red-dark:  #A01030  (hover / CTA bg)
         * --red-light: #E8325A  (accent light)
         * --blush:     #FAE8EC  (light rose bg)
         * --dark:      #0F0D0E  (near-black)
         * --cream:     #FDF8F8  (warm white bg)
         * --muted:     #7A6268  (body text)
         * --silver:    #B8A8AC  (logo sub-text)
         */

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

 :root {
     --red: #C8193A;
     --red-dark: #A01030;
     --red-light: #E8325A;
     --blush: #FAE8EC;
     --blush-mid: #F2D0D8;
     --dark: #0F0D0E;
     --dark-mid: #1C1618;
     --dark-card: #241A1C;
     --cream: #FDF8F8;
     --white: #FFFFFF;
     --muted: #7A6268;
     --silver: #B8A8AC;
     --border: rgba(200, 25, 58, 0.18);
     --border-light: rgba(200, 25, 58, 0.1);
 }

 html {
     scroll-behavior: smooth;
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }

 body {
     font-family: 'Jost', sans-serif;
     background: var(--cream);
     color: #2A1A1E;
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }

 body.lightbox-open {
     overflow: hidden;
 }

 ::-webkit-scrollbar {
     width: 4px;
 }

 ::-webkit-scrollbar-track {
     background: var(--cream);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--red);
     border-radius: 2px;
 }

 /* ─── NAVBAR ─── */
 #navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     height: 72px;
     display: flex;
     align-items: center;
     padding: 0 5%;
     background: rgba(253, 248, 248, 0.94);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--border-light);
     transition: box-shadow 0.3s;
 }

 #navbar.scrolled {
     box-shadow: 0 4px 24px rgba(200, 25, 58, 0.08);
 }

 .navbar-inner {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .nav-logo img {
     height: 44px;
     width: auto;
     display: block;
 }

 .nav-links {
     display: flex;
     gap: 2.2rem;
     list-style: none;
     margin: 0;
 }

 .nav-links a {
     font-size: 0.75rem;
     font-weight: 500;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--muted);
     text-decoration: none;
     transition: color 0.25s;
     position: relative;
     padding-bottom: 3px;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1.5px;
     background: var(--red);
     transition: width 0.3s;
 }

 .nav-links a:hover,
 .nav-links a.active {
     color: var(--red);
 }

 .nav-links a:hover::after,
 .nav-links a.active::after {
     width: 100%;
 }

 .nav-cta {
     font-size: 0.73rem;
     font-weight: 600;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     background: var(--red);
     color: var(--white);
     padding: 0.6rem 1.5rem;
     border-radius: 2px;
     text-decoration: none;
     transition: background 0.25s, transform 0.2s;
     display: inline-block;
 }

 .nav-cta:hover {
     background: var(--red-dark);
     transform: translateY(-1px);
 }

 .nav-toggler {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: 6px;
 }

 .nav-toggler span {
     display: block;
     width: 24px;
     height: 2px;
     background: var(--red);
     margin: 5px 0;
     border-radius: 2px;
     transition: all 0.3s;
 }

 /* ─── TOP BANNER SLIDER (dynamic PHP) ─── */
 .top-banner {
     margin-top: 72px;
     /* push below fixed nav */
     position: relative;
     overflow: hidden;
     background: var(--dark);
 }

 .top-banner-track {
     display: flex;
     transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
 }

 .top-banner-slide {
     min-width: 100%;
     position: relative;
 }

 .top-banner-slide img {
     width: 100%;
     max-height: 600px;
     object-fit: cover;
     display: block;
     filter: brightness(0.78);
 }

 .top-banner-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 2.5rem 5%;
     background: linear-gradient(to top, rgba(15, 13, 14, 0.82) 0%, transparent 100%);
 }

 .top-banner-caption h2 {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.6rem, 3.5vw, 3rem);
     font-weight: 300;
     color: var(--white);
     letter-spacing: 0.02em;
 }

 .top-banner-caption p {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.65);
     margin-top: 0.5rem;
     max-width: 560px;
 }

 /* prev / next arrows */
 .tbs-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     background: rgba(200, 25, 58, 0.75);
     border: none;
     cursor: pointer;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.25s;
 }

 .tbs-arrow:hover {
     background: var(--red);
 }

 .tbs-arrow svg {
     width: 20px;
     height: 20px;
     stroke: #fff;
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .tbs-prev {
     left: 2%;
 }

 .tbs-next {
     right: 2%;
 }

 /* dots */
 .tbs-dots {
     position: absolute;
     bottom: 14px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 7px;
     z-index: 10;
 }

 .tbs-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.4);
     border: none;
     cursor: pointer;
     padding: 0;
     transition: background 0.3s, transform 0.3s;
 }

 .tbs-dot.active {
     background: var(--red);
     transform: scale(1.3);
 }

 /* ─── HERO ─── */
 .hero {
     min-height: 92vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     padding: 60px 5% 60px;
     gap: 4rem;
     position: relative;
     overflow: hidden;
     background: var(--cream);
 }

 .hero-bg-shape {
     position: absolute;
     top: 0;
     right: 0;
     width: 52%;
     height: 100%;
     background: var(--blush);
     clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
     z-index: 0;
 }

 .hero-bg-dot {
     position: absolute;
     top: 50%;
     left: 3%;
     transform: translateY(-50%);
     width: 320px;
     height: 320px;
     border-radius: 50%;
     border: 1px solid var(--border);
     z-index: 0;
     opacity: 0.5;
 }

 .hero-bg-dot::after {
     content: '';
     position: absolute;
     inset: 40px;
     border-radius: 50%;
     border: 1px solid var(--border);
 }

 .hero-left {
     position: relative;
     z-index: 2;
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 0.7rem;
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--red);
     margin-bottom: 1.4rem;
 }

 .eyebrow::before {
     content: '';
     width: 28px;
     height: 1px;
     background: var(--red);
 }

 .hero-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.8rem, 4.2vw, 4.6rem);
     font-weight: 300;
     line-height: 1.08;
     color: var(--dark);
     margin-bottom: 1.4rem;
     letter-spacing: -0.01em;
 }

 .hero-title em {
     font-style: italic;
     color: var(--red);
     font-weight: 400;
 }

 .hero-body {
     font-size: 1rem;
     line-height: 1.78;
     color: var(--muted);
     max-width: 430px;
     margin-bottom: 2rem;
 }

 .stats-strip {
     display: flex;
     margin-bottom: 2.2rem;
     padding-bottom: 2.2rem;
     border-bottom: 1px solid var(--border);
 }

 .stat-box {
     flex: 1;
     padding-right: 2rem;
     border-right: 1px solid var(--border);
     margin-right: 2rem;
 }

 .stat-box:last-child {
     border-right: none;
     margin-right: 0;
 }

 .stat-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.4rem;
     font-weight: 600;
     color: var(--red-dark);
     line-height: 1;
 }

 .stat-label {
     font-size: 0.68rem;
     font-weight: 500;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--muted);
     margin-top: 0.2rem;
 }

 .store-btns {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .store-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.85rem 1.5rem;
     border: 1.5px solid var(--red);
     border-radius: 3px;
     text-decoration: none;
     background: transparent;
     transition: all 0.28s;
     color: inherit;
 }

 .store-btn:hover {
     background: var(--red);
 }

 .store-btn:hover .sb-icon,
 .store-btn:hover .sb-label,
 .store-btn:hover .sb-name {
     color: var(--white) !important;
 }

 .sb-icon {
     font-size: 1.7rem;
     line-height: 1;
     color: var(--red-dark);
     transition: color 0.28s;
 }

 .sb-label {
     font-size: 0.62rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--muted);
     line-height: 1;
     transition: color 0.28s;
 }

 .sb-name {
     font-size: 1rem;
     font-weight: 600;
     color: var(--dark);
     line-height: 1.2;
     transition: color 0.28s;
 }

 .hero-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
     margin-top: 1.8rem;
 }

 .hero-tag {
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.1em;
     color: var(--red-dark);
     background: var(--blush);
     border: 1px solid var(--blush-mid);
     padding: 0.3rem 0.8rem;
     border-radius: 2px;
     text-transform: uppercase;
 }

 /* Hero phone rotating stack */
 .hero-right {
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .phone-cluster {
     position: relative;
     width: 100%;
     max-width: 380px;
 }

 .phone-stack {
     position: relative;
     width: 70%;
     margin: 0 auto;
     /* extra right space for the secondary card */
 }

 /* Each phone slide in the stack */
 .phone-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     opacity: 0;
     transform: translateY(20px) scale(0.97);
     transition: opacity 0.6s ease, transform 0.6s ease;
     border-radius: 32px;
     overflow: hidden;
     box-shadow: 0 32px 80px rgba(15, 13, 14, 0.22), 0 0 0 1px rgba(200, 25, 58, 0.08);
 }

 .phone-slide:first-child {
     position: relative;
 }

 /* keeps stack height */
 .phone-slide.active {
     opacity: 1;
     transform: translateY(0) scale(1);
     z-index: 2;
 }

 .phone-slide img {
     width: 100%;
     display: block;
     border-radius: 32px;
 }

 /* small secondary phone peeking from behind */
 .phone-secondary-card {
     position: absolute;
     width: 48%;
     right: -8%;
     top: 8%;
     border-radius: 24px;
     box-shadow: 0 20px 50px rgba(15, 13, 14, 0.18);
     z-index: 1;
     overflow: hidden;
 }

 .phone-secondary-card img {
     width: 100%;
     display: block;
     border-radius: 24px;
 }

 .hero-badge {
     position: absolute;
     bottom: 10%;
     left: -6%;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 0.9rem 1.2rem;
     box-shadow: 0 12px 36px rgba(200, 25, 58, 0.1);
     z-index: 5;
 }

 .hero-badge-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.8rem;
     font-weight: 600;
     color: var(--red);
     line-height: 1;
 }

 .hero-badge-label {
     font-size: 0.66rem;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--muted);
     margin-top: 0.15rem;
 }

 /* dot indicators for hero phone */
 .hero-phone-dots {
     display: flex;
     gap: 6px;
     justify-content: center;
     margin-top: 1.2rem;
     position: relative;
     z-index: 3;
 }

 .hero-phone-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--blush-mid);
     border: none;
     padding: 0;
     cursor: pointer;
     transition: background 0.3s, transform 0.3s;
 }

 .hero-phone-dot.active {
     background: var(--red);
     transform: scale(1.3);
 }

 /* ─── COLLECTION SLIDER ─── */
 .section-collection {
     background:
         radial-gradient(circle at top left, rgba(200, 25, 58, 0.09), transparent 34%),
         linear-gradient(135deg, var(--cream) 0%, var(--white) 55%, var(--blush) 100%);
     padding: clamp(4.2rem, 6vw, 6.2rem) 5%;
     position: relative;
     overflow: hidden;
 }

 .section-collection::before {
     content: '';
     position: absolute;
     width: 360px;
     height: 360px;
     right: -140px;
     top: -120px;
     border-radius: 50%;
     border: 1px solid rgba(200, 25, 58, 0.12);
     pointer-events: none;
 }

 .section-collection .eyebrow {
     color: var(--red);
 }

 .section-collection .eyebrow::before {
     background: var(--red);
 }

 .sec-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2rem, 3.5vw, 3.2rem);
     font-weight: 300;
     line-height: 1.12;
     color: var(--dark);
     margin-bottom: 0.6rem;
 }

 .sec-lead {
     font-size: 0.96rem;
     line-height: 1.72;
     color: var(--muted);
     max-width: 480px;
 }

 .section-collection .sec-title {
     color: var(--dark);
 }

 .section-collection .sec-lead {
     color: var(--muted);
 }

 .coll-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
     flex-wrap: wrap;
     gap: 1.2rem;
     position: relative;
     z-index: 1;
 }

 .coll-slider-controls {
     display: flex;
     gap: 0.6rem;
     align-items: center;
 }

 .coll-arrow {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.82);
     box-shadow: 0 12px 30px rgba(200, 25, 58, 0.08);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.25s;
 }

 .coll-arrow:hover {
     background: var(--red);
     border-color: var(--red);
     transform: translateY(-2px);
 }

 .coll-arrow svg {
     width: 18px;
     height: 18px;
     stroke: var(--red);
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
     transition: stroke 0.25s;
 }

 .coll-arrow:hover svg {
     stroke: #fff;
 }

 /* slider track */
 .coll-slider-wrap {
     overflow: hidden;
     position: relative;
     z-index: 1;
 }

 .coll-slider-track {
     display: flex;
     gap: 18px;
     transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);
 }

 .coll-slide {
     flex: 0 0 calc(33.333% - 12px);
     min-width: 0;
     position: relative;
     overflow: hidden;
     border-radius: 22px;
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid rgba(200, 25, 58, 0.11);
     box-shadow: 0 22px 60px rgba(200, 25, 58, 0.09);
     cursor: pointer;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     padding: 10px;
     transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
 }

 .coll-slide:hover {
     transform: translateY(-5px);
     border-color: rgba(200, 25, 58, 0.24);
     box-shadow: 0 28px 70px rgba(200, 25, 58, 0.15);
 }

 .coll-slide img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     display: block;
     border-radius: 16px;
     background: var(--cream);
     transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     filter: none;
 }

 .coll-slide:hover img {
     transform: scale(1.04);
     filter: none;
 }

 .coll-overlay {
     position: relative;
     inset: auto;
     background: transparent;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 0.95rem 0.25rem 0.2rem;
 }

 .coll-chip {
     display: inline-block;
     font-size: 0.6rem;
     font-weight: 600;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--red);
     background: var(--blush);
     border: 1px solid var(--blush-mid);
     padding: 0.22rem 0.65rem;
     border-radius: 999px;
     margin-bottom: 0.55rem;
     width: fit-content;
 }

 .coll-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.25rem, 2vw, 1.55rem);
     font-weight: 600;
     color: var(--dark);
     line-height: 1.15;
 }

 .coll-meta {
     font-size: 0.72rem;
     letter-spacing: 0.08em;
     color: var(--muted);
     margin-top: 0.28rem;
 }

 /* coll dots */
 .coll-dots {
     display: flex;
     gap: 7px;
     margin-top: 1.6rem;
     justify-content: center;
     position: relative;
     z-index: 1;
 }

 .coll-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(200, 25, 58, 0.18);
     border: none;
     padding: 0;
     cursor: pointer;
     transition: background 0.3s, transform 0.3s;
 }

 .coll-dot.active {
     background: var(--red);
     transform: scale(1.35);
 }

 /* ─── FEATURES ─── */
 .section-features {
     background: var(--white);
     padding: clamp(4rem, 7vw, 7rem) 5%;
 }

 .features-grid {
     display: grid;
     grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px) minmax(220px, 1fr);
     gap: clamp(1.8rem, 4vw, 4rem);
     align-items: center;
     margin-top: clamp(2.5rem, 5vw, 4rem);
 }

 .features-sticky {
     position: static;
 }

 .feat-list {
     display: grid;
     gap: 1rem;
     margin-top: 0;
 }

 .feat-item {
     border-bottom: 1px solid var(--border-light);
     cursor: pointer;
     transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
     border-radius: 8px;
 }

 .feat-list .feat-item:first-child {
     border-top: 1px solid var(--border-light);
 }

 .feat-column-left .feat-item {
     text-align: right;
     padding: 1.2rem 1.2rem 1.2rem 0;
     border-right: 2px solid transparent;
 }

 .feat-column-right .feat-item {
     padding: 1.2rem 0 1.2rem 1.2rem;
     border-left: 2px solid transparent;
 }

 .feat-item.active {
     box-shadow: 0 14px 34px rgba(200, 25, 58, 0.06);
 }

 .feat-column-left .feat-item.active {
     border-right-color: var(--red);
     background: linear-gradient(to left, var(--blush) 0%, rgba(250, 232, 236, 0.25) 60%, transparent 100%);
 }

 .feat-column-right .feat-item.active {
     border-left-color: var(--red);
     background: linear-gradient(to right, var(--blush) 0%, rgba(250, 232, 236, 0.25) 60%, transparent 100%);
 }

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

 .feat-item-icon {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--blush);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     margin-bottom: 0.7rem;
     transition: background 0.3s, color 0.3s;
 }

 .feat-column-left .feat-item-icon {
     margin-left: auto;
 }

 .feat-item.active .feat-item-icon {
     background: var(--red);
     color: var(--white);
 }

 .feat-item-title {
     font-size: 0.94rem;
     font-weight: 600;
     color: #2A1A1E;
     margin-bottom: 0.3rem;
 }

 .feat-item-desc {
     font-size: 0.84rem;
     line-height: 1.65;
     color: var(--muted);
 }

 .features-phone-wrap {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 430px;
 }

 .features-phone-glow {
     position: absolute;
     inset: -70px -45px;
     background: radial-gradient(ellipse, rgba(200, 25, 58, 0.13) 0%, rgba(250, 232, 236, 0.4) 35%, transparent 68%);
     pointer-events: none;
     z-index: 0;
 }

 .features-phone {
     position: relative;
     z-index: 1;
     width: min(78vw, 280px);
     max-width: 250px;
     border-radius: 36px;
     box-shadow: 0 40px 100px rgba(200, 25, 58, 0.15), 0 0 0 1px rgba(200, 25, 58, 0.1);
     display: block;
 }

 /* ─── CTA ─── */
 .section-cta {
     background: var(--red-dark);
     padding: clamp(3.6rem, 5vw, 4.8rem) 5%;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-ring {
     position: absolute;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.08);
     pointer-events: none;
 }

 .cta-ring-1 {
     width: 420px;
     height: 420px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .cta-ring-2 {
     width: 620px;
     height: 620px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .cta-ring-3 {
     width: 840px;
     height: 840px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .section-cta .eyebrow {
     margin-bottom: 0.8rem;
 }

 .section-cta .sec-title {
     color: var(--white);
     font-size: clamp(2rem, 4vw, 3.5rem);
     position: relative;
 }

 .cta-ornament {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     margin: 1rem 0;
     opacity: 0.35;
 }

 .cta-ornament::before,
 .cta-ornament::after {
     content: '';
     height: 1px;
     width: 60px;
     background: var(--white);
 }

 .cta-ornament span {
     font-size: 0.4rem;
     letter-spacing: 6px;
     color: var(--white);
 }

 .cta-lead {
     color: rgba(255, 255, 255, 0.6);
     font-size: 1rem;
     line-height: 1.65;
     max-width: 480px;
     margin: 0 auto 1.8rem;
     position: relative;
 }

 .cta-store-btns {
     display: flex;
     justify-content: center;
     gap: 1rem;
     flex-wrap: wrap;
     position: relative;
 }

 .cta-btn-primary {
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     background: var(--white);
     color: var(--red-dark);
     padding: 0.95rem 2.2rem;
     border-radius: 3px;
     text-decoration: none;
     display: inline-block;
     transition: all 0.25s;
 }

 .cta-btn-primary:hover {
     background: var(--blush);
     transform: translateY(-2px);
 }

 .cta-btn-outline {
     font-size: 0.8rem;
     font-weight: 500;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     border: 1.5px solid rgba(255, 255, 255, 0.35);
     color: var(--white);
     padding: 0.95rem 2.2rem;
     border-radius: 3px;
     text-decoration: none;
     display: inline-block;
     transition: all 0.25s;
 }

 .cta-btn-outline:hover {
     border-color: var(--white);
     background: rgba(255, 255, 255, 0.08);
     color: var(--white);
 }

 /* ─── CONTACT ─── */
 .section-contact {
     background: var(--cream);
     padding: 7rem 5%;
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1.1fr;
     gap: 5rem;
     margin-top: 3rem;
     align-items: start;
 }

 .contact-form-box {
     background: var(--white);
     border: 1px solid var(--border-light);
     border-radius: 8px;
     padding: 2.5rem;
 }

 .contact-form-box h4 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.5rem;
     font-weight: 400;
     color: var(--dark);
     margin-bottom: 0.4rem;
 }

 .contact-form-box p {
     font-size: 0.87rem;
     color: var(--muted);
     line-height: 1.65;
     margin-bottom: 1.8rem;
 }

 .form-row-2col {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
     margin-bottom: 1rem;
 }

 .form-group {
     margin-bottom: 1rem;
 }

 .form-label {
     display: block;
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 0.45rem;
 }

 .form-ctrl {
     width: 100%;
     padding: 0.82rem 1rem;
     border: 1px solid rgba(200, 25, 58, 0.2);
     border-radius: 3px;
     background: var(--cream);
     font-family: 'Jost', sans-serif;
     font-size: 0.92rem;
     color: #2A1A1E;
     outline: none;
     transition: border-color 0.25s, box-shadow 0.25s;
     appearance: none;
 }

 .form-ctrl:focus {
     border-color: var(--red);
     box-shadow: 0 0 0 3px rgba(200, 25, 58, 0.08);
     background: var(--white);
 }

 .form-ctrl::placeholder {
     color: #B0939A;
 }

 textarea.form-ctrl {
     resize: vertical;
     min-height: 120px;
 }

 .submit-btn {
     width: 100%;
     padding: 1rem;
     background: var(--red);
     color: var(--white);
     font-family: 'Jost', sans-serif;
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     border: none;
     border-radius: 3px;
     cursor: pointer;
     transition: background 0.25s, transform 0.2s;
     margin-top: 0.5rem;
 }

 .submit-btn:hover {
     background: var(--red-dark);
     transform: translateY(-1px);
 }

 .contact-info-block {
     display: flex;
     flex-direction: column;
     gap: 1.8rem;
 }

 .contact-detail {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
 }

 .cd-icon {
     width: 44px;
     height: 44px;
     background: var(--blush);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     flex-shrink: 0;
     color: var(--red);
 }

 .cd-label {
     font-size: 0.66rem;
     font-weight: 600;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 0.2rem;
 }

 .cd-value {
     font-size: 0.95rem;
     color: #2A1A1E;
 }

 .cd-value a {
     color: var(--red-dark);
     text-decoration: none;
 }

 .cd-value a:hover {
     color: var(--red);
 }

 .map-frame {
     margin-top: 1.8rem;
     border-radius: 8px;
     overflow: hidden;
     height: 260px;
     min-height: 260px;
     border: 1px solid var(--border-light);
     background: #f3f4f6;
 }

 .map-frame iframe {
     width: 100%;
     height: 100%;
     min-height: 260px;
     display: block;
     border: 0;
 }

 .map-fallback-link {
     color: var(--red-dark);
     display: inline-block;
     font-size: 0.85rem;
     margin-top: 0.75rem;
     text-decoration: none;
 }

 .map-fallback-link:hover {
     color: var(--red);
     text-decoration: underline;
 }

 /* ─── FOOTER ─── */
 .site-footer {
     background:
         linear-gradient(135deg, var(--white) 0%, var(--cream) 55%, var(--blush) 100%);
     border-top: 1px solid var(--border-light);
     padding: 0.7rem 5%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 1rem;
     box-shadow: 0 -14px 42px rgba(200, 25, 58, 0.05);
 }

 .footer-logo {
     img {
         height: 70px;
         width: auto;
         display: block;
     }
 }

 .footer-copy {
     font-size: 0.74rem;
     color: var(--muted);
     letter-spacing: 0.06em;
 }

 .footer-loc {
     font-size: 0.7rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--muted);
 }


 .footer-loc a {
     color: var(--red);
     text-decoration: none;
 }

 .footer-loc a:hover {
     color: var(--red-dark);
     text-decoration: none;
 }

 /* ─── IMAGE PREVIEW + GO TOP ─── */
 .image-lightbox {
     position: fixed;
     inset: 0;
     z-index: 1200;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1.2rem;
     background: rgba(15, 13, 14, 0.86);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.25s ease;
 }

 .image-lightbox.open {
     opacity: 1;
     pointer-events: auto;
 }

 .image-lightbox img {
     max-width: min(92vw, 430px);
     max-height: 88vh;
     border-radius: 28px;
     box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
     background: var(--white);
 }

 .image-lightbox-close {
     position: absolute;
     top: 18px;
     right: 18px;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.35);
     background: rgba(255, 255, 255, 0.12);
     color: var(--white);
     font-size: 1.7rem;
     line-height: 1;
     cursor: pointer;
 }

 .image-lightbox-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.32);
     background: rgba(255, 255, 255, 0.13);
     color: var(--white);
     font-size: 2.2rem;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.25s, transform 0.25s;
     user-select: none;
 }

 .image-lightbox-nav:hover {
     background: rgba(255, 255, 255, 0.22);
     transform: translateY(-50%) scale(1.04);
 }

 .image-lightbox-prev {
     left: clamp(14px, 4vw, 46px);
 }

 .image-lightbox-next {
     right: clamp(14px, 4vw, 46px);
 }

 .image-lightbox-counter {
     position: absolute;
     left: 50%;
     bottom: 18px;
     transform: translateX(-50%);
     padding: 0.35rem 0.75rem;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.14);
     color: rgba(255, 255, 255, 0.86);
     font-size: 0.78rem;
     letter-spacing: 0.08em;
     backdrop-filter: blur(10px);
 }

 .contact-alert {
     border-radius: 4px;
     font-size: 0.9rem;
     line-height: 1.5;
     margin-bottom: 1rem;
     padding: 0.85rem 1rem;
 }

 .contact-alert-success {
     background: #edf9f0;
     border: 1px solid #b9e3c4;
     color: #1f6b36;
 }

 .contact-alert-error {
     background: #fff1f1;
     border: 1px solid #f0bcbc;
     color: #9b1c1c;
 }

 .submit-btn:disabled {
     cursor: not-allowed;
     opacity: 0.7;
     transform: none;
 }

 .phone-slide img,
 .phone-secondary-card img,
 .features-phone,
 .coll-slide img {
     cursor: zoom-in;
 }

 /* ─── REVEAL ─── */
 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity 0.72s ease, transform 0.72s ease;
 }

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

 .reveal-d1 {
     transition-delay: 0.1s;
 }

 .reveal-d2 {
     transition-delay: 0.2s;
 }

 .reveal-d3 {
     transition-delay: 0.3s;
 }

 /* ─── MOBILE MENU ─── */
 .mobile-nav {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 998;
     background: rgba(253, 248, 248, 0.98);
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2rem;
 }

 .mobile-nav.open {
     display: flex;
 }

 .mobile-nav a {
     font-size: 1.5rem;
     font-family: 'Cormorant Garamond', serif;
     color: var(--dark);
     text-decoration: none;
     letter-spacing: 0.05em;
 }

 .mobile-nav a:hover {
     color: var(--red);
 }

 .mobile-nav .nav-cta {
     font-family: 'Jost', sans-serif;
     font-size: 0.8rem;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 1200px) {
     .features-grid {
         grid-template-columns: minmax(210px, 1fr) minmax(210px, 280px) minmax(210px, 1fr);
         gap: 2rem;
     }

     .nav-links {
         gap: 1.4rem;
     }
 }

 @media (max-width: 1024px) {
     .hero {
         grid-template-columns: 1fr;
         padding: 50px 5%;
         min-height: auto;
     }

     .hero-bg-shape {
         display: none;
     }

     .hero-right {
         margin-top: 2rem;
     }

     .phone-cluster {
         max-width: 320px;
         margin: 0 auto;
     }

     .features-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
         align-items: center;
     }

     .features-phone-wrap {
         order: -1;
         min-height: auto;
         padding: 0.5rem 0 1rem;
     }

     .features-phone {
         width: min(72vw, 260px);
     }

     .feat-list {
         max-width: 720px;
         width: 100%;
         margin: 0 auto;
     }

     .feat-column-left .feat-item,
     .feat-column-right .feat-item {
         text-align: left;
         border-right: none;
         border-left: 2px solid transparent;
         padding: 1.1rem 0 1.1rem 1rem;
     }

     .feat-column-left .feat-item.active,
     .feat-column-right .feat-item.active {
         border-left-color: var(--red);
         border-right-color: transparent;
         background: linear-gradient(to right, var(--blush) 0%, rgba(250, 232, 236, 0.25) 60%, transparent 100%);
     }

     .feat-column-left .feat-item-icon {
         margin-left: 0;
     }

     .contact-grid {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .coll-slide {
         flex: 0 0 calc(50% - 9px);
     }
 }

 @media (max-width: 768px) {

     .nav-links,
     .nav-cta {
         display: none;
     }

     .nav-toggler {
         display: block;
     }

     #navbar {
         height: 64px;
     }

     .top-banner {
         margin-top: 64px;
     }

     .nav-logo img {
         height: 38px;
     }

     .hero {
         padding: 36px 5%;
         gap: 2rem;
     }

     .hero-title {
         font-size: clamp(2.2rem, 11vw, 2.8rem);
     }

     .hero-body {
         font-size: 0.95rem;
         margin-bottom: 1.5rem;
     }

     .section-collection,
     .section-features,
     .section-contact {
         padding: 4rem 5%;
     }

     .section-cta {
         padding: 3.4rem 5%;
     }

     .stats-strip {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0.7rem;
         margin-bottom: 1.6rem;
         padding-bottom: 1.6rem;
     }

     .stat-box {
         padding-right: 0.7rem;
         margin-right: 0;
     }

     .stat-num {
         font-size: 1.8rem;
     }

     .stat-label {
         font-size: 0.58rem;
         letter-spacing: 0.1em;
     }

     .store-btns,
     .cta-store-btns {
         gap: 0.75rem;
     }

     .store-btn,
     .cta-btn-primary,
     .cta-btn-outline {
         width: 100%;
         justify-content: center;
     }

     .form-row-2col {
         grid-template-columns: 1fr;
     }

     .coll-slide {
         flex: 0 0 min(82%, 320px);
     }

     .image-lightbox {
         padding: 1rem 3.2rem;
     }

     .image-lightbox img {
         max-width: min(76vw, 360px);
         max-height: 82vh;
         border-radius: 24px;
     }

     .image-lightbox-nav {
         width: 38px;
         height: 38px;
         font-size: 1.8rem;
     }

     .site-footer {
         text-align: center;
         justify-content: center;
     }

     .top-banner-slide img {
         max-height: 280px;
     }

     .top-banner-caption {
         padding: 2rem 5% 2.6rem;
     }

     .tbs-arrow {
         width: 38px;
         height: 38px;
     }
 }

 @media (max-width: 480px) {
     .eyebrow {
         letter-spacing: 0.18em;
         font-size: 0.64rem;
     }

     .hero-tags {
         margin-top: 1.2rem;
     }

     .stats-strip {
         grid-template-columns: 1fr;
     }

     .stat-box {
         border-right: none;
         border-bottom: 1px solid var(--border-light);
         padding: 0 0 0.8rem;
     }

     .stat-box:last-child {
         border-bottom: none;
         padding-bottom: 0;
     }

     .phone-secondary-card,
     .hero-badge {
         display: none;
     }

     .phone-stack {
         width: min(72vw, 230px);
     }

     .features-phone {
         width: min(68vw, 230px);
     }

     .image-lightbox {
         padding: 1rem 2.7rem;
     }

     .image-lightbox img {
         max-width: 78vw;
         max-height: 80vh;
     }

     .feat-column-left .feat-item,
     .feat-column-right .feat-item {
         padding: 1rem 0 1rem 0.9rem;
     }

     .contact-form-box {
         padding: 1.5rem;
     }

     .cta-ornament {
         margin: 0.7rem 0;
     }

     .cta-ornament::before,
     .cta-ornament::after {
         width: 36px;
     }

     .cta-ring-2,
     .cta-ring-3 {
         display: none;
     }
 }