/* ---- Base ---- */

@theme {
  --color-ivory: #F8F6F1;
  --color-parchment: #E8E0D0;
  --color-nearblack: #0D0D0D;
  --color-ember: #C45E2A;
  --color-forest: #3A5F4E;
  --color-orange: #cd8549;

  --color-gold: #ddbb34;        /* rgb(221, 187, 52) */
  --color-dark-navy: #041319;   /* rgb(4, 19, 25) */
  --color-terracotta: #cd8549;  /* rgb(205, 133, 73) */
  --color-cream: #f9f3ee;       /* rgb(249, 243, 238) */
  --color-brand-blue: #2972b6;  /* rgb(41, 114, 182) */

  /* Natural & Scandinavian Complementary Tones */
  --color-sage: #8ba888;        /* rgb(139, 168, 136) */
  --color-soft-rose: #dda7a5;   /* rgb(221, 167, 165) */
  --color-slate-blue: #5c8097;  /* rgb(92, 128, 151) */
  --color-linen: #ebe4d8;       /* rgb(235, 228, 216) */

  /* Retro Toy Chest Tones */
  --color-dusty-teal: #459395;  /* rgb(69, 147, 149) */
  --color-coral-red: #d96b5b;   /* rgb(217, 107, 91) */
  --color-deep-pine: #1a3a3a;   /* rgb(26, 58, 58) */

  /* Pastel & Modern Tones */
  --color-butter: #f3e5ab;      /* rgb(243, 229, 171) */
  --color-sky-blue: #a8c5da;    /* rgb(168, 197, 218) */
  --color-sand: #dbc8b6;        /* rgb(219, 200, 182) */
  --color-soft-olive: #939a72;  /* rgb(147, 154, 114) */

  /* bright colors*/
  --color-bright-orange: #FF7667; /* rgb(255, 165, 0) */
  --color-bright-red: #F84042;     /* rgb(248, 64, 66) */
  --color-bright-pink: #ff69b4;   /* rgb(255, 105, 180) */
  --color-bright-green: #2AB7A5;   /* rgb(144, 238, 144) */
  --color-other-green: #74D9B3;   /* rgb(74, 217, 179) */

  --font-display: "Cormorant Garamond", serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background-color: #f9f3ee;
  color: #0D0D0D;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Lenis scroll lock override ---- */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---- Typography scales ---- */
.t-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2972b6;
}
.t-display {
  font-family: 'Cormorant Garamond', sans;
  line-height: 1.0;
  font-weight: 15;
}
.t-display-lg { font-size: clamp(3.5rem, 8vw, 8rem); }
.t-display-md { font-size: clamp(2.8rem, 5.5vw, 5.5rem); }
.t-display-sm { font-size: clamp(2rem, 3.5vw, 3.5rem); }
.t-body-lg { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; }
.t-body    { font-size: 0.95rem; line-height: 1.65; }

/* ---- Utility ---- */
.section-padding { padding: 8rem 0; }
.container { width: 90%; max-width: 1400px; margin: 0 auto; }

/* ---- Navigation Layout ---- */
/* ---- Navigation Layout ---- */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  mix-blend-mode: normal;
  padding: 1.4rem 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
  background: rgba(248, 246, 241, 0.74);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 13, 13, 0.05);
}

#nav.scrolled {
  background: rgba(4, 19, 25, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(4, 19, 25, 0.12);
}

.nav-left {
  display: flex;
  align-items: center;
}

/* Center Links */
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #0D0D0D;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}

#nav.scrolled .nav-links a,
#nav.scrolled .nav-icon-btn,
#nav.scrolled .nav-logo,
#nav.scrolled .nav-logo span{
  color: #F8F6F1;
}


.nav-links a:hover {
  opacity: 1;
  color: #2972b6;
}

#nav.scrolled .nav-links a:hover,
#nav.scrolled .nav-icon-btn:hover .nav-icon {
  color: #2972b6;
}

/* Right Icons Group */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* ---- Logo & Typography ---- */
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0D0D0D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

/* Base state for individual logo letters */
.nav-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  color: #0D0D0D;
  transition: color 0.3s ease;
}

/* Default state: Apostrophe is orange */
.nav-logo span.apostrophe {
  color: #C45E2A;
}




/* ---- Center Shop Dropdown Menu ---- */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.96);
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(4, 19, 25, 0.12);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  z-index: 100;
  border-radius: 4px;
}

/* Show Sub-Categories on Hover */
.shop-dropdown:hover .dropdown-menu {
  display: block;
  background-color: rgba(255, 255, 255, 0.96);
}

.dropdown-menu li a {
  background-color: rgba(255, 255, 255, 0.96);
  color: #0D0D0D;
  padding: 0.6rem 1rem;
  text-decoration: none;
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  opacity: 1;
  transition: background-color 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
  color: #0D0D0D;
}

/* ---- Minimalist Line Icons (Account & Cart) ---- */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0D0D0D;
  text-decoration: none;
  padding: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  transition: stroke 0.2s ease;
}

.nav-icon-btn:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.nav-icon-btn:hover .nav-icon {
  stroke: #2972b6;
}


/* ---- Hero ---- *//*
#hero {
  height: 100vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: radial-gradient(circle at top left, rgba(168, 197, 218, 0.35), transparent 34%),
              linear-gradient(180deg, #ebe4d8 0%, rgba(235, 228, 216, 0.96) 100%);
}
*//*.hero-content {
  text-align: center;
  position: relative; z-index: 2;
  pointer-events: none;
}*//*
.hero-word-wrap { overflow: hidden; display: block; }
.hero-eyebrow {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  margin-bottom: 1.5rem;
}
.hero-line { display: block; overflow: hidden; }
.hero-line-inner {
  display: block;
  transform: translateY(110%);
}
.hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(13, 13, 13, 0.7);
  opacity: 0;
  max-width: 480px;
  margin: 1.8rem auto 0;
  line-height: 1.7;
  font-weight: 300;
}
.hero-scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0;
}
.hero-scroll-cue span {
  font-family: 'DM Mono', monospace; font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: #2972b6; opacity: 0.75;
}
.scroll-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, #2972b6, transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

*//*<!--        *//**//* &#45;&#45;&#45;&#45; Video Transition Container &#45;&#45;&#45;&#45; *//**//*-->
<!--        #hero-video-stage {-->
<!--          position: absolute; inset: 0; z-index: 1;-->
<!--          display: flex; align-items: center; justify-content: center;-->
<!--          pointer-events: none;-->
<!--        }-->
<!--        .video-frame {-->
<!--          width: 100%;-->
<!--          max-width: 800px;-->
<!--          height: 450px; *//**//* Fixed height so it's visible without GSAP *//**//*-->
<!--          border-radius: 2px;-->
<!--          overflow: hidden;-->
<!--          background: #0D0D0D;-->
<!--          position: relative;-->
<!--        }-->
<!--        .video-frame video {-->
<!--          width: 100%; height: 100%;-->
<!--          object-fit: cover;-->
<!--          opacity: 0;-->
<!--          transition: opacity 0.6s;-->
<!--        }-->
<!--        .video-frame.loaded video { opacity: 1; }-->
<!--        *//**//* Placeholder gradient used in place of a real video *//**//*-->
<!--        .video-placeholder {-->
<!--          position: absolute; inset: 0;-->
<!--          background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 30%, #3A5F4E 60%, #0D0D0D 100%);-->
<!--          display: flex; align-items: center; justify-content: center;-->
<!--        }-->
<!--        .video-placeholder-text {-->
<!--          font-family: 'Cormorant Garamond', serif;-->
<!--          color: rgba(255,255,255,0.15);-->
<!--          font-size: 1.2rem;-->
<!--          letter-spacing: 0.3em;-->
<!--          text-transform: uppercase;-->
<!--        }-->*//*
*//* ---- Video Transition Container ---- *//*
#hero-video-stage {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

.video-frame {
  width: 100%;
  max-width: 800px;
  height: 450px; *//* Fixed height so it's visible without GSAP *//*
  border-radius: 2px;
  overflow: hidden;
  background: #0D0D0D;
  position: relative;
}

.video-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #041319 0%, rgba(41, 114, 182, 0.88) 25%, #3A5F4E 60%, rgba(13, 13, 13, 0.96) 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

.video-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2; *//* Keeps video on top of placeholder *//*
  opacity: 1; *//* Forcing opacity to 1 to test visibility *//*
  transition: opacity 0.6s;
}

.video-frame.loaded video { opacity: 1; }

.video-placeholder-text {
  font-family: 'Cormorant Garamond', serif;
  color: rgba(255,255,255,0.15);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

*//* Hero section acting as the pinning trigger *//*
#hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

*//* Video stage stays centered while scaling *//*
#hero-video-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

*//* Text stays on top of the video stage *//*
#hero-content {
  position: relative;
  z-index: 10;
}*/

/* ---- Hero ---- */
#hero,
.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ebe4d8;
}

/* Background Image Container (Layer 1) */
#hero-video-stage,
.hero-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero Content Overlay (Layer 2) */
#hero-content,
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 650px;
  padding: 0 1.5rem;
  margin-bottom: 2rem; /* Offsets slightly to leave space for the scroll cue */
}

.hero-word-wrap {
  overflow: hidden;
  display: block;
}

.hero-eyebrow {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  margin-bottom: 1.25rem;
}

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-line-inner {
  display: block;
  transform: translateY(110%);
}

.hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(13, 13, 13, 0.75);
  opacity: 0;
  max-width: 480px;
  margin: 1.5rem auto 0;
  line-height: 1.65;
  font-weight: 300;
}

/* Scroll Cue at Bottom */
.hero-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
}

.hero-scroll-cue span {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2972b6;
  opacity: 0.75;
}

.scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, #2972b6, transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---- Pin Section (Bragg-Style) ---- */
#pin-section {
  position: relative;
}
.pin-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  align-items: stretch;
}
.pin-left {
  position: sticky;
  top: 0;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 5% 6rem 7%;
/*  background: #f9f3ee;*/
/*  border-right: 1px solid rgba(13, 13, 13, 0.08);*/
}
.pin-left-divider {
  width: 36px; height: 1px;
  background: #C45E2A;
  margin-bottom: 2rem;
}
.pin-manifesto {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 3.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.pin-manifesto em { font-style: italic; color: #C45E2A; }
.pin-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(13, 13, 13, 0.7);
  max-width: 340px;
  margin-top: 1.5rem;
}
.pin-tags { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 2rem; }
.pin-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(248, 246, 241, 0.5);
  padding: 0.35rem 0.75rem;
  color: #041319;
  opacity: 0.85;
}
.pin-right { }

/* Feature photo gallery inside feature cards */
.feature-photos {
 display: flex;
 gap: 1rem;
 /*overflow-x: auto;*/
 -webkit-overflow-scrolling: touch;
 padding: 0.5rem 0;
 align-items: center;
}
.feature-photos::-webkit-scrollbar { height: 5px; }
.feature-photos::-webkit-scrollbar-thumb { background: rgba(13,13,13,0.12); border-radius: 6px; }
.feature-photo {
 flex: 0 0 auto;
 width: min(64vw, 520px);
 height: min(56vh, 420px);
 object-fit: cover;
 border-radius: 10px;
 box-shadow: 0 12px 30px rgba(4,19,25,0.12);
 border: 1px solid rgba(13,13,13,0.04);
}
@media (max-width: 900px) {
 .feature-photo { width: min(84vw, 420px); height: 46vh; }
}

.feature-card {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
/*
  background-color: #f3e5ab;
*/
}
/*
.feature-card:nth-child(1) { background: linear-gradient(135deg, #ddbb34 0%, #d7b946 100%); }
*/
/*
.feature-card:nth-child(2) { background: linear-gradient(135deg, #2972b6 0%, #4a7eb1 100%); }
*/
.feature-card:nth-child(3) { background: linear-gradient(135deg, #C45E2A 0%, #d07d3a 100%); }
.feature-card-inner {
  text-align: center;
  z-index: 2;
  position: relative;
}
.feature-number {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 2rem;
}
.feature-card:nth-child(1) .feature-number,
.feature-card:nth-child(2) .feature-number { color: rgba(248, 246, 241, 0.8); }
.feature-card:nth-child(3) .feature-number { color: rgba(13, 13, 13, 0.7); }
.feature-icon {
  width: 120px; height: 120px;
  margin: 0 auto 2.5rem;
  position: relative;
}
.feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.feature-card:nth-child(1) .feature-title,
.feature-card:nth-child(2) .feature-title { color: #F8F6F1; }
.feature-card:nth-child(3) .feature-title { color: #0D0D0D; }
.feature-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 300px;
  margin: 0 auto;
}
.feature-card:nth-child(1) .feature-desc,
.feature-card:nth-child(2) .feature-desc { color: rgba(248,246,241,0.72); }
.feature-card:nth-child(3) .feature-desc { color: rgba(13,13,13,0.68); }

/* ---- Ambient circles on feature cards ---- */
.fc-ambient {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
}
.fc-ambient-1 {
  width: 400px; height: 400px;
  background: rgba(196, 94, 42, 0.16);
  top: -100px; right: -80px;
}
.fc-ambient-2 {
  width: 250px; height: 250px;
  background: rgba(248, 246, 241, 0.18);
  bottom: -60px; left: -40px;
}

/* ---- Products Section ---- */
#products {
  background: #ebe4d8;
}
.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4rem;
}
.products-header-left {}
.products-header-right {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0D0D0D;
  opacity: 0.4;
  padding-bottom: 0.25rem;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ---- Product Card ---- */
.product-card {
  background: rgba(255,255,255,0.72);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s ease;
  box-shadow: 0 2px 12px rgba(4,19,25,0.05);
  border: 1px solid rgba(13,13,13,0.05);
}
.product-card:hover {
  box-shadow: 0 24px 64px rgba(4,19,25,0.12), 0 8px 24px rgba(4,19,25,0.06);
  transform: translateY(-4px);
}
.product-canvas {
  width: 100%; aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.product-card:hover .product-canvas {
  transform: scale(1.03);
}
.product-canvas-bg {
  position: absolute; inset: 0;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.product-card:hover .product-canvas-bg {
  transform: scale(1.06);
}
.product-info {
  padding: 1.25rem 1.25rem 0;
  position: relative;
}
.product-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2972b6;
  margin-bottom: 0.4rem;
  display: block;
}
.product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: #0D0D0D;
  margin-bottom: 0.2rem;
}
.product-price {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: #0D0D0D;
  opacity: 0.6;
}
/* Quick Add button — slides up on hover */
.product-quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #041319;
  color: #F8F6F1;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.9rem;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.2s;
  cursor: pointer;
  border: none;
  width: 100%;
}
.product-quick-add:hover { background: #C45E2A; }
.product-footer {
  position: relative;
  height: 3.5rem; /* Reserve space for the sliding button */
  overflow: hidden;
}
.product-card:hover .product-quick-add { transform: translateY(0); }

/* ---- Trust Bar ---- */
#trust-bar {
  background: rgba(4, 19, 25, 0.92);
  padding: 1.0rem 0;
  overflow: hidden;
}
.trust-track {
  display: flex;
  gap: 4rem;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
.trust-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(248,246,241,0.9); flex-shrink: 0; }
.trust-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: rgba(248,246,241,0.82);
  letter-spacing: 0.02em;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Newsletter / CTA ---- */
#cta-section {
/*  background: rgb(255, 165, 0, 0.99);*/
  background: #f9f3ee;

  text-align: center;
}
.cta-inner { max-width: 760px; margin: 0 auto; }
.cta-form {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  text-align: left;
}
.cta-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cta-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cta-field-full {
  width: 100%;
}
.cta-field label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.7);
}
.cta-field input {
  width: 100%;
  padding: 1rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(13,13,13,0.14);
  outline: none;
  color: #0D0D0D;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cta-field input::placeholder { color: rgba(13,13,13,0.42); }
.cta-field input:focus {
  background: rgba(255,255,255,0.26);
  border-color: rgba(4, 19, 25, 0.4);
}
.email-submit {
  width: fit-content;
  margin: 0.5rem auto 0;
  padding: 1rem 2rem;
  background: #041319;
  color: #F8F6F1;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.25s;
}
.email-submit:hover { background: #2972b6; }
.cta-fine {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(13,13,13,0.4);
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .cta-field-row {
    grid-template-columns: 1fr;
  }
  .email-submit {
    width: 100%;
  }
}

/* Debugging override */
.reveal-up {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---- Footer ---- */
footer {
  background: linear-gradient(180deg, #041319 0%, #061d22 100%);
  padding: 5rem 0 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: #F8F6F1;
  margin-bottom: 0.75rem;
}
.footer-brand-name span { color: #C45E2A; }
.footer-brand-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: rgba(248,246,241,0.55);
  line-height: 1.6;
  max-width: 240px;
}
.footer-col-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248,246,241,0.5);
  margin-bottom: 1.25rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: rgba(248,246,241,0.68);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: #F8F6F1; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem;
}
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(248,246,241,0.28);
}
.footer-socials { display: flex; gap: 1.2rem; }
.footer-socials a {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(248,246,241,0.52);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-socials a:hover { color: #C45E2A; }

/* ---- Section reveal animations ---- */
/*.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}*/

.account-wrapper {
  position: relative;
  display: inline-block;
}

.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: #f9f3ee;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  margin-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 100;
}

.account-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0.5rem;
}

/* Pure CSS Hover Trigger */
.account-wrapper:hover .account-dropdown,
.account-dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-line-inner { transform: none !important; }
  .hero-eyebrow, .hero-sub, .hero-scroll-cue { opacity: 1 !important; }
  .trust-track { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pin-track { grid-template-columns: 1fr; }
  .pin-left { position: relative; height: auto; padding: 5rem 5% 4rem; }
  .feature-card { height: 70vh; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .products-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}