/* ==========================================================================
   FOLD — minimal clothing label
   Shared stylesheet for all pages
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Archivo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --cream:      #EEE8DD;
  --cream-2:    #E5DCCB;
  --cream-3:    #DFD5C2;
  --ink:        #1B1611;
  --ink-soft:   #4A433B;
  --muted:      #8A8074;
  --line:       rgba(27,22,17,.14);
  --line-dark:  rgba(238,232,221,.14);
  --black:      #17120D;
  --black-2:    #1F1912;
  --orange:     #DF4A1C;
  --orange-2:   #C93F17;
  --paper:      #F5F1E8;

  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-accent:  'Instrument Serif', Georgia, serif;
  --font-body:    'Archivo', -apple-system, sans-serif;

  --container: 1280px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.section{ padding: 100px 0; }
@media (max-width: 900px){
  .section{ padding: 64px 0; }
  .wrap{ padding: 0 22px; }
}

/* ---------- utility type ---------- */
.eyebrow{
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.eyebrow.on-dark{ color: rgba(238,232,221,.65); }
.eyebrow .accent{ color: var(--orange); }

.italic{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}

.display{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background .18s ease, color .18s ease, transform .12s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover{ background: var(--ink); color: var(--cream); }
.btn:active{ transform: translateY(1px); }
.btn-solid{ background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-solid:hover{ background: var(--orange-2); border-color: var(--orange-2); color:#fff; }
.btn-on-dark{ border-color: rgba(238,232,221,.4); color: var(--paper); }
.btn-on-dark:hover{ background: var(--paper); color: var(--black); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-block{ width:100%; justify-content:center; }
.btn svg{ width:13px; height:13px; flex-shrink:0; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(238,232,221,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 74px;
}
.logo{
  display:inline-flex; align-items:flex-start; gap:6px;
  font-family: var(--font-display);
  font-size: 22px;
}
.logo .logo-text{
  display:inline-block;
  font-weight: 800;
  letter-spacing: -.6px;
  transform: scaleX(1.06);
  transform-origin: left center;
}
.main-nav ul{ display:flex; gap:34px; }
.main-nav a{
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease, opacity .15s ease;
}
.main-nav a:hover{ opacity: .6; }
.main-nav a[aria-current="page"]{ border-color: var(--ink); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.icon-btn{
  position:relative;
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent;
}
.icon-btn svg{ width:17px; height:17px; }
.cart-count{
  position:absolute; top:-7px; right:-7px;
  background: var(--orange); color:#fff; font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding: 0 3px;
  opacity:0; transform: scale(.6); transition: all .15s ease;
}
.cart-count.show{ opacity:1; transform:scale(1); }

.hamburger{ display:none; width:38px; height:38px; border:1px solid var(--line); background:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.hamburger span{ width:16px; height:1.5px; background:var(--ink); display:block; }

@media (max-width: 860px){
  .main-nav{
    position: fixed; inset: 74px 0 0 0; background: var(--cream);
    display:flex; align-items:center; justify-content:center;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav ul{ flex-direction:column; align-items:center; gap:28px; }
  .main-nav a{ font-size:18px; }
  .hamburger{ display:inline-flex; }
}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-overlay{
  position:fixed; inset:0; background: rgba(23,18,13,.45);
  opacity:0; pointer-events:none; transition: opacity .25s ease; z-index: 90;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width: 400px; max-width: 92vw;
  background: var(--paper); z-index: 91;
  transform: translateX(100%); transition: transform .3s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform: translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding: 24px 26px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-family: var(--font-display); font-size:18px; font-weight:400; }
.cart-close{ background:none; border:none; font-size:22px; line-height:1; color:var(--ink); }
.cart-items{ flex:1; overflow-y:auto; padding: 10px 26px; }
.cart-empty{ padding: 60px 0; text-align:center; color:var(--muted); font-size:14px; }
.cart-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item .ph-thumb{ width:64px; height:64px; flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info .name{ font-weight:600; font-size:14px; }
.cart-item-info .meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.cart-item-info .price{ font-size:13px; margin-top:6px; font-weight:700; }
.cart-remove{ background:none; border:none; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:underline; padding:0; margin-top:6px; }
.cart-foot{ padding: 22px 26px 26px; border-top:1px solid var(--line); }
.cart-total{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:16px; font-size:15px; }

/* ==========================================================================
   PLACEHOLDER IMAGERY  (.ph-frame)
   ========================================================================== */
.ph-frame{
  position:relative;
  background: var(--cream-3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ph-frame.tone-2{ background:#D9CDB6; }
.ph-frame.tone-dark{ background:#2A2119; }
.ph-frame::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(27,22,17,.035) 0 1px, transparent 1px 13px);
  pointer-events:none;
}
.ph-frame .ph-icon{ width: 34%; max-width:120px; color: var(--ink); opacity:.55; }
.ph-frame .ph-icon svg{ width:100%; height:auto; display:block; }
.ph-frame .ph-tag{
  position:absolute; left:50%; top:50%; transform:translate(-50%, 140%);
  font-family: var(--font-display); font-size: 10px; letter-spacing:.14em;
  color: var(--ink); opacity:.45;
}
.ph-frame .corner{ position:absolute; width:16px; height:16px; opacity:.5; }
.ph-frame .corner.tl{ top:10px; left:10px; border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink); }
.ph-frame .corner.tr{ top:10px; right:10px; border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink); }
.ph-frame .corner.bl{ bottom:10px; left:10px; border-bottom:1.5px solid var(--ink); border-left:1.5px solid var(--ink); }
.ph-frame .corner.br{ bottom:10px; right:10px; border-bottom:1.5px solid var(--ink); border-right:1.5px solid var(--ink); }
.ph-frame.photo-frame::after{ content:none; }
.photo-frame img.real-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.photo-frame img.real-photo.mono{ filter: grayscale(1) contrast(1.08) brightness(1.02); }
.feature-figure .photo-frame img.real-photo,
.product-card .photo-frame img.real-photo{ object-fit:cover; object-position: center center; }
.ph-thumb{ position:relative; background: var(--cream-3); }
.ph-thumb .ph-icon{ width:56%; opacity:.5; }
.ph-thumb .ph-icon svg{ width:100%; }
.ph-thumb::after{ content:none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--black); color: var(--paper); }
.footer-wordmark{ padding: 90px 0 50px; text-align:center; overflow:hidden; }
.footer-wordmark .fw-row{ display:flex; align-items:center; justify-content:center; gap: 40px; flex-wrap: nowrap; }
.footer-wordmark .fold-text{
  --stretch: 1.06;
  display:inline-block;
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(48px, 9.5vw, 128px);
  color: var(--paper); line-height:1; letter-spacing:-4px;
  transform: scaleX(var(--stretch));
  transform-origin: center center;
}
@media (max-width: 480px){
  .footer-wordmark .fold-text{ --stretch: 1.02; font-size: clamp(38px, 12vw, 56px); }
}
.footer-cols{
  border-top: 1px solid var(--line-dark);
  padding: 46px 0;
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;
}
.footer-cols h4{
  font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: rgba(245,241,232,.45);
  margin-bottom: 18px; font-weight:600;
}
.footer-cols li{ margin-bottom: 11px; font-size: 14px; color: rgba(245,241,232,.85); }
.footer-cols a:hover{ color: var(--orange); }
.footer-cols address{ font-style: normal; font-size:14px; color: rgba(245,241,232,.85); line-height:1.7; }
.footer-social{ display:flex; gap: 10px; }
.footer-social a{
  width:36px; height:36px; border:1px solid var(--line-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:15px; height:15px; }
.footer-social a:hover{ border-color: var(--orange); color: var(--orange); }
.footer-bottom{
  border-top: 1px solid var(--line-dark);
  padding: 20px 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12px; color: rgba(245,241,232,.45);
}
@media (max-width: 760px){
  .footer-cols{ grid-template-columns: 1fr; gap:34px; }
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */
.hero{ padding: 70px 0 0; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items:start; }
.hero-copy .display{ font-size: clamp(56px, 8.6vw, 112px); margin: 18px 0 22px; }
.hero-copy h1.display{
  --stretch: 1.06;
  font-weight: 800;
  font-size: clamp(56px, 9.5vw, 124px);
  letter-spacing: -4px;
  margin: 14px 0 6px;
  display: inline-block;
  transform: scaleX(var(--stretch));
  transform-origin: left center;
}
@media (max-width: 480px){
  .hero-copy h1.display{ --stretch: 1.02; font-size: clamp(38px, 12.5vw, 58px); }
}
.hero-lines .display{ display:block; }
.hero-copy p.lede{ max-width: 420px; color: var(--ink-soft); font-size:14.5px; margin: 18px 0 30px; line-height:1.7; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-figure{ position:relative; }
.hero-figure .ph-frame{ aspect-ratio: 4/3.1; }
.hero-caption{ display:flex; justify-content:space-between; margin-top:14px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
.hero-scrollbar{
  margin-top: 60px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; padding: 16px 0;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted);
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

/* marquee */
.marquee{ background: var(--black); overflow:hidden; padding: 13px 0; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.marquee-track{ display:flex; width:max-content; animation: marquee 26s linear infinite; }
.marquee-track span{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--paper);
  padding: 0 22px;
}
.marquee-track span::after{ content:"•"; margin-left:22px; color: var(--orange); }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* countdown banner */
.countdown-banner{ background: var(--orange); color:#fff; padding: 38px 0; }
.countdown-banner .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; }
.countdown-left .eyebrow{ color: rgba(255,255,255,.75); margin-bottom:6px; }
.countdown-left .cb-title{ font-size: clamp(16px, 2vw, 22px); font-weight:700; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.countdown-clock{ display:flex; gap: 26px; }
.countdown-clock div{ text-align:center; }
.countdown-clock .num{ font-family: var(--font-display); font-weight:800; font-size: clamp(40px, 5.4vw, 64px); line-height:1; }
.countdown-clock .lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-top:6px; }
.countdown-banner .btn{ border-color:#fff; color:#fff; }
.countdown-banner .btn:hover{ background:#fff; color: var(--orange); }

/* product feature */
.feature{ background: var(--cream); padding: 100px 0; }
.feature-grid{ display:grid; grid-template-columns: .85fr 1fr; gap: 70px; align-items:center; }
.feature-figure{ position:relative; }
.feature-figure .ph-frame{ aspect-ratio: 1/1.02; }
.feature-swatches{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.swatch{
  width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.swatch[data-color="white"]{ background:#F4F0E6; }
.swatch[data-color="black"]{ background:#20201F; }
.swatch[data-color="green"]{ background:#4B5942; }
.swatch.selected{ border-color: var(--ink); }
.feature-note{ margin-left:auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.feature-copy h2{ font-size: clamp(32px, 4.2vw, 46px); margin: 12px 0 18px; }
.feature-copy p{ color: var(--ink-soft); max-width: 440px; margin-bottom: 26px; line-height:1.7; font-size:14.5px; }

/* pillars (dark) */
.pillars{ background: var(--black); color: var(--paper); }
.pillars-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 20px; }
.pillar{ border: 1px solid var(--line-dark); padding: 30px; }
.pillar .num{ font-family: var(--font-accent); font-style:italic; color: var(--orange); font-size:15px; }
.pillar h3{ font-size: 19px; margin: 14px 0 10px; font-weight:600; }
.pillar p{ font-size: 13.5px; color: rgba(245,241,232,.6); line-height:1.6; }

.dark-cta{ text-align:center; padding-top: 100px; }
.dark-cta .eyebrow{ justify-content:center; display:flex; margin-bottom: 16px; }
.dark-cta h2{ font-size: clamp(28px,4.4vw,42px); font-weight:700; font-family: var(--font-display); }
.dark-cta p{ color: rgba(245,241,232,.62); max-width: 480px; margin: 16px auto 30px; font-size:14.5px; line-height:1.7; }
.signup-form{ display:flex; gap:10px; max-width: 420px; margin: 0 auto; flex-wrap:wrap; justify-content:center; }
.signup-form input{
  flex:1; min-width:200px; background:transparent; border:1px solid var(--line-dark); color:var(--paper);
  padding: 15px 18px; font-size:14px; font-family:inherit;
}
.signup-form input::placeholder{ color: rgba(245,241,232,.4); }
.signup-form input:focus{ outline:none; border-color: var(--orange); }
.form-msg{ margin-top: 14px; font-size:13px; color: var(--orange); min-height:1em; }

@media (max-width:900px){
  .feature-grid{ grid-template-columns:1fr; }
  .pillars-grid{ grid-template-columns:1fr; }
}

/* visit CTA */
.visit-cta{ text-align:center; }
.visit-cta h2{ font-size: clamp(28px,4.4vw,42px); }
.visit-cta .eyebrow{ display:flex; justify-content:center; margin-bottom:16px; }
.visit-cta .btn{ margin-top: 30px; }

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.shop-hero{ padding: 60px 0 10px; }
.shop-hero h1{ font-size: clamp(46px,7.4vw,92px); margin: 18px 0 22px; }
.shop-hero p{ max-width: 480px; color: var(--ink-soft); font-size:14.5px; line-height:1.7; margin-bottom: 10px; }

.product-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px 32px; padding: 50px 0 90px; }
.product-card .ph-frame{ aspect-ratio: 1/1; margin-bottom: 18px; }
.product-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.product-top h3{ font-size:17px; font-weight:700; }
.product-price{ font-family: var(--font-accent); font-style:italic; font-size:16px; white-space:nowrap; }
.product-sub{ font-size:12.5px; color: var(--muted); margin-top:4px; }
.product-flag{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--orange); text-align:right; margin-top:4px; }
.product-options{ margin-top:14px; }
.product-options .opt-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:block; }
.swatch-row{ display:flex; gap:8px; margin-bottom:12px; }
.size-row{ display:flex; gap:8px; margin-bottom:14px; }
.size-btn{
  width:38px; height:34px; border:1px solid var(--line); background:transparent; font-size:12px; font-weight:600;
  transition: all .15s ease;
}
.size-btn:hover{ border-color: var(--ink); }
.size-btn.selected{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.add-btn{ width:100%; }
.add-btn.added{ background: var(--orange); border-color: var(--orange); color:#fff; }

@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .product-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-hero{ padding: 60px 0 0; }
.about-hero h1{ font-size: clamp(42px,7.4vw,80px); }
.about-hero h1.ghost{ color: var(--ink); }
@supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black){
  .about-hero h1.ghost{ -webkit-text-stroke: 1.5px var(--ink); text-stroke: 1.5px var(--ink); color: transparent; }
}
.about-ticker{ background: var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; margin-top:40px; padding: 12px 0; }
.about-ticker .marquee-track{ animation-duration: 22s; }
.about-ticker span{ color: var(--ink); font-size:11.5px; }
.about-ticker span::after{ color: var(--orange); }

.chapter{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; padding: 90px 0; border-bottom: 1px solid var(--line); }
.chapter:last-of-type{ border-bottom:none; }
.chapter.reverse .chapter-figure{ order:2; }
.chapter-figure .ph-frame{ aspect-ratio: 4/3; }
.chapter-num{ font-family: var(--font-accent); font-style:italic; color: var(--orange); font-size:16px; }
.chapter-copy h2{ font-size: clamp(24px,3vw,32px); display:inline-block; margin-left:12px; font-weight:700; }
.chapter-head{ border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:18px; }
.chapter-sub{ font-family: var(--font-accent); font-style:italic; font-size: 19px; margin-bottom:14px; color: var(--ink); }
.chapter-copy p{ color: var(--ink-soft); font-size:14.5px; line-height:1.75; max-width:460px; }

@media (max-width: 880px){
  .chapter{ grid-template-columns:1fr; gap: 30px; padding: 56px 0; }
  .chapter.reverse .chapter-figure{ order:0; }
}

.team-head{ text-align:left; padding-top: 30px; }
.team-head h2{ font-size: clamp(28px,3.6vw,38px); margin-top:10px; }
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--line); margin-top: 34px; }
.team-member{ padding: 22px 20px 22px 0; border-right:1px solid var(--line); }
.team-member:last-child{ border-right:none; }
.team-member .num{ font-family: var(--font-accent); font-style:italic; color:var(--orange); font-size:13px; }
.team-member .t-name{ font-weight:700; font-size:15px; margin:10px 0 4px; }
.team-member .t-role{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width: 760px){
  .team-grid{ grid-template-columns:1fr 1fr; }
  .team-member{ border-bottom:1px solid var(--line); border-right:none; padding: 20px 0; }
  .team-member:nth-child(odd){ padding-right:16px; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-hero{ padding: 60px 0 0; }
.contact-hero h1{ font-size: clamp(46px,7.6vw,96px); }
.contact-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 60px; padding: 50px 0 80px; align-items:start; }
.info-row{ border-top:1px solid var(--line); padding: 22px 0; display:flex; gap:16px; }
.info-row:last-of-type{ border-bottom:1px solid var(--line); }
.info-row .ic{ width:20px; height:20px; color: var(--orange); flex-shrink:0; margin-top:2px; }
.info-row .lbl{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.info-row .val{ font-size:15px; }
.social-row{ display:flex; gap:12px; margin-top: 26px; }
.social-pill{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:11px 16px; font-size:12px; font-weight:700; letter-spacing:.06em; }
.social-pill svg{ width:14px; height:14px; }

.contact-form{ background: var(--cream-2); padding: 40px; }
.contact-form h3{ font-family: var(--font-display); font-weight:400; font-size:22px; margin-bottom: 26px; }
.field{ border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 6px; }
.field input, .field textarea{
  width:100%; border:none; background:transparent; font-family:inherit; font-size:14.5px; color:var(--ink);
  resize:none;
}
.field textarea{ min-height: 70px; }
.field input:focus, .field textarea:focus{ outline:none; }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted); }
.field.error{ border-color: var(--orange); }
.field-error{ font-size:11px; color: var(--orange); display:none; margin-top:4px; }
.field.error .field-error{ display:block; }
.contact-form .btn{ margin-top: 18px; }
.form-success{ display:none; background: var(--ink); color: var(--cream); padding: 16px 18px; font-size:13.5px; margin-top:16px; }
.form-success.show{ display:block; }

.contact-media{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 90px; }
.map-frame, .store-frame{ position:relative; }
.map-frame .ph-frame, .store-frame .ph-frame{ aspect-ratio: 4/3.1; }
.map-frame .ph-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-frame .ph-frame .corner{ pointer-events:none; z-index:1; }
.map-badge{ position:absolute; top:14px; left:14px; z-index:2; background: var(--paper); border:1px solid var(--line); padding:8px 14px; font-size:11px; font-weight:700; letter-spacing:.05em; display:flex; align-items:center; gap:6px; transition: background .15s ease, color .15s ease; }
.map-badge:hover{ background: var(--ink); color: var(--cream); }
.map-badge.right{ left:auto; right:14px; background: var(--ink); color:var(--cream); border-color:var(--ink); }
.map-badge.right:hover{ background: var(--orange); border-color: var(--orange); color:#fff; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-media{ grid-template-columns:1fr; }
}

/* toast */
.toast{
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--cream); padding: 14px 22px; font-size:13.5px;
  z-index: 120; opacity:0; pointer-events:none; transition: all .25s ease;
  display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast svg{ width:14px; height:14px; color: var(--orange); }

/* product photo lightbox */
.product-card .photo-frame{ cursor: zoom-in; }
.lightbox-overlay{
  position: fixed; inset:0; background: rgba(23,18,13,.92);
  display:flex; align-items:center; justify-content:center; padding: 60px;
  z-index: 150; opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.lightbox-overlay.show{ opacity:1; pointer-events:auto; }
.lightbox-overlay img{
  max-width: 88vw; max-height: 80vh; object-fit:contain;
  box-shadow: 0 40px 70px -20px rgba(0,0,0,.55);
  transform: scale(.96); transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
.lightbox-overlay.show img{ transform: scale(1); }
.lightbox-caption{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  color: var(--paper); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.lightbox-close{
  position:absolute; top:24px; right:28px; width:44px; height:44px;
  border:1px solid rgba(245,241,232,.4); background:transparent; color:var(--paper);
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.lightbox-close:hover{ background: var(--paper); color: var(--ink); transform: rotate(90deg); }

/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* header gains weight once the page scrolls */
.site-header{ transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled{ box-shadow: 0 8px 24px -18px rgba(27,22,17,.35); }

/* nav links: underline sweeps in from the left on hover */
.main-nav a{ position:relative; transition: opacity .15s ease; }
.main-nav a:hover{ opacity:1; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
  background: var(--ink); transition: right .25s cubic-bezier(.16,.84,.44,1);
}
.main-nav a:hover::after{ right:0; }
.main-nav a[aria-current="page"]::after{ right:0; background: var(--orange); }
.main-nav a[aria-current="page"]{ border-bottom-color: transparent; }

/* icon buttons + socials: gentle scale on hover */
.icon-btn, .footer-social a, .hamburger{ transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.icon-btn:hover, .footer-social a:hover{ transform: translateY(-2px); border-color: var(--ink); }
.hamburger:hover{ border-color: var(--ink); }
.cart-count{ transition: opacity .15s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.cart-count.bump{ animation: bump .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump{ 0%{ transform: scale(1); } 40%{ transform: scale(1.45); } 100%{ transform: scale(1); } }

/* buttons: lift on hover */
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

/* swatches + size buttons: pop on select */
.swatch{ transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, box-shadow .15s ease; }
.swatch:hover{ transform: scale(1.12); }
.swatch.selected{ transform: scale(1.18); }
.size-btn{ transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.size-btn:active{ transform: scale(.92); }

/* photo frames: slow, contained zoom on hover */
.ph-frame{ overflow:hidden; }
.photo-frame img.real-photo{ transition: transform .6s cubic-bezier(.16,.84,.44,1); }
.hero-figure:hover .real-photo,
.feature-figure:hover .real-photo,
.chapter-figure:hover .real-photo,
.store-frame:hover .real-photo{ transform: scale(1.045); }
.product-card .photo-frame:hover img.real-photo{ transform: scale(1.06); }

/* product cards: lift + soft shadow */
.product-card{ transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; border-radius: 2px; }
.product-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 34px -24px rgba(27,22,17,.3); }

/* marquee: pause on hover so it can be read */
.marquee:hover .marquee-track, .about-ticker:hover .marquee-track{ animation-play-state: paused; }

/* team members: subtle lift */
.team-member{ transition: background-color .2s ease; }
.team-member:hover{ background: var(--cream-2); }

/* hero entrance: staggered fade-up on load */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
.hero-copy > *, .hero-figure{ animation: fadeUp .8s cubic-bezier(.16,.84,.44,1) both; }
@keyframes fadeUpStretch{ from{ opacity:0; transform: translateY(18px) scaleX(var(--stretch)); } to{ opacity:1; transform: translateY(0) scaleX(var(--stretch)); } }
.hero-copy h1.display{ animation-name: fadeUpStretch; }
.hero-copy > *:nth-child(1){ animation-delay: .02s; }
.hero-copy > *:nth-child(2){ animation-delay: .1s; }
.hero-copy > *:nth-child(3){ animation-delay: .18s; }
.hero-copy > *:nth-child(4){ animation-delay: .26s; }
.hero-copy > *:nth-child(5){ animation-delay: .34s; }
.hero-figure{ animation-delay: .2s; }

/* scroll reveal: fades + rises into place as sections enter the viewport */
.chapter, .product-card, .pillar, .team-member,
.feature-grid, .contact-media > div, .contact-grid > *,
.dark-cta > *, .visit-cta > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.chapter.in-view, .product-card.in-view, .pillar.in-view, .team-member.in-view,
.feature-grid.in-view, .contact-media > div.in-view, .contact-grid > *.in-view,
.dark-cta > *.in-view, .visit-cta > *.in-view {
  opacity: 1;
  transform: none;
}
/* stagger product grid + pillars + team slightly */
.product-grid .product-card:nth-child(2){ transition-delay: .06s; }
.product-grid .product-card:nth-child(3){ transition-delay: .12s; }
.product-grid .product-card:nth-child(5){ transition-delay: .06s; }
.product-grid .product-card:nth-child(6){ transition-delay: .12s; }
.pillars-grid .pillar:nth-child(2){ transition-delay: .08s; }
.pillars-grid .pillar:nth-child(3){ transition-delay: .16s; }
.team-grid .team-member:nth-child(2){ transition-delay: .06s; }
.team-grid .team-member:nth-child(3){ transition-delay: .12s; }
.team-grid .team-member:nth-child(4){ transition-delay: .18s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .chapter, .product-card, .pillar, .team-member,
  .feature-grid, .contact-media > div, .contact-grid > *,
  .dark-cta > *, .visit-cta > *, .hero-copy > *, .hero-figure{
    opacity: 1 !important; transform: none !important;
  }
}