/* ===================================================
   CN EMB — shared design system (stitch / thread motif)
   =================================================== */

:root{
  --ink:#1C1620;
  --ink-soft:#2A212C;
  --canvas:#F4EFE4;
  --canvas-2:#ECE4D2;
  --paper:#FFFCF5;
  --crimson:#A85BA0;
  --crimson-soft:#D9AED4;
  --gold:#DDA0DD;
  --gold-dark:#B968B9;
  --teal:#7A4A6E;
  --ink-text:#232323;
  --navy:#4A2249;
  --line-on-dark:rgba(244,239,228,0.35);
  --line-on-light:rgba(35,35,35,0.22);
  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-script:'Caveat', cursive;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--canvas);
  color:var(--ink-text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.5rem;}
@media (max-width:576px){.container{padding:0 1.25rem;}}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.14;
  color:inherit;
}
.script{font-family:var(--font-script); font-weight:600;}
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:0.72rem;
  font-weight:600;
}
.text-crimson{color:var(--crimson);}
.text-gold{color:var(--gold);}
.text-teal{color:var(--teal);}
.muted{color:rgba(35,35,35,0.6);}
.muted-on-dark{color:rgba(244,239,228,0.62);}
.center{text-align:center;}

/* ============ STITCH MOTIFS ============ */
.seam{
  width:100%; height:14px;
  background-image: repeating-linear-gradient(90deg, var(--seam-color,var(--line-on-light)) 0 10px, transparent 10px 20px);
  background-position:center; background-size:100% 1.5px; background-repeat:no-repeat;
}
.seam.on-dark{ --seam-color: var(--line-on-dark); }

.stitch-corner{position:relative;}
.stitch-corner::after{
  content:'';
  position:absolute; top:14px; right:14px; width:16px; height:16px;
  background:
    linear-gradient(45deg, transparent 47%, var(--mark,var(--crimson)) 47%, var(--mark,var(--crimson)) 53%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, var(--mark,var(--crimson)) 47%, var(--mark,var(--crimson)) 53%, transparent 53%);
  opacity:0.55;
}

.swatch{
  background:var(--paper);
  border:1.5px solid var(--line-on-light);
  padding:2.1rem 1.8rem;
  position:relative;
  transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  background-image:
    repeating-linear-gradient(0deg, rgba(35,35,35,0.025) 0px, rgba(35,35,35,0.025) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(35,35,35,0.025) 0px, rgba(35,35,35,0.025) 1px, transparent 1px, transparent 6px);
}
.swatch:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(21,22,27,0.1);
  border-color:var(--mark, var(--crimson));
}

/* ============ BUTTONS ============ */
.btn-stitch{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--font-body); font-weight:600; font-size:0.92rem; letter-spacing:0.02em;
  padding:0.85rem 1.9rem; border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  transition:all 0.35s ease;
}
.btn-stitch:hover{background:var(--ink); color:var(--canvas);}
.btn-fill{background:var(--crimson); border-color:var(--crimson); color:var(--paper);}
.btn-fill:hover{background:#973040; border-color:#973040; color:var(--paper);}
.btn-ghost-dark{border-color:rgba(244,239,228,0.5); color:var(--canvas);}
.btn-ghost-dark:hover{background:var(--canvas); color:var(--ink);}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(21,22,27,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(244,239,228,0.12);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; padding-top:0.9rem; padding-bottom:0.9rem;}
.brand{display:flex; align-items:center; gap:0.6rem; font-family:var(--font-display); font-size:1.2rem; letter-spacing:0.02em; color:var(--canvas);}
.brand .mono{
  width:38px;height:38px;border:1.5px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-script); color:var(--gold); font-size:1.25rem;
  overflow:hidden;
}
.brand .mono img{width:100%; height:100%; object-fit:cover;}
.nav-links{display:flex; align-items:center; gap:2.1rem; list-style:none;}
.nav-links a{color:rgba(244,239,228,0.78); font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:500; transition:color 0.3s;}
.nav-links a:hover, .nav-links a.active{color:var(--gold);}
.nav-toggle{display:none; background:none; border:none; color:var(--canvas); font-size:1.5rem;}
@media (max-width:900px){
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--ink); flex-direction:column; align-items:flex-start; gap:0; padding:0; max-height:0; overflow:hidden; transition:max-height 0.35s ease;}
  .nav-links.open{max-height:400px; padding:0.5rem 0 1.5rem;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:0.75rem 1.5rem; width:100%;}
  .nav-toggle{display:block;}
}

/* ============ PAGE HERO (inner pages) - FIXED ============ */
.page-hero{
  background: linear-gradient(180deg, #ffffff 0%, #FBF2FB 100%);
  color: var(--ink-text);
  padding: 8rem 0 4rem;
  border-bottom: 1.5px dashed rgba(74,34,73,0.14);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(74,34,73,0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.3;
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
}
.page-hero .eyebrow {
  display: block;
  text-align: center;
  color: var(--gold);
}
.page-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 500;
  color: var(--navy);
  margin: 0.6rem 0 1rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.page-hero p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(35,35,35,0.68);
  line-height: 1.7;
  text-align: center;
}
@media (max-width: 768px) {
  .page-hero {
    padding: 6rem 0 3rem;
  }
  .page-hero h1 {
    font-size: 2rem;
    padding: 0 1rem;
  }
  .page-hero p {
    font-size: 1rem;
    padding: 0 1rem;
  }
}
@media (max-width: 480px) {
  .page-hero h1 {
    font-size: 1.6rem;
  }
}

/* ============ SECTIONS ============ */
section{padding:5.5rem 0;}
.section-paper{background:var(--paper);}
.section-canvas2{background:var(--canvas-2);}
.section-ink{background:var(--ink); color:var(--canvas);}

.head-block{max-width:640px; margin:0 auto; text-align:center;}
.head-block h2{font-size:clamp(1.9rem,3.2vw,2.6rem); margin:0.6rem 0 0.9rem; text-align:center;}
.head-block .flourish{margin-left:auto; margin-right:auto;}

.icon-badge{
  width:56px;height:56px;border-radius:50%;
  border:1.5px dashed var(--mark, var(--crimson));
  display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem;
}
.icon-badge i{font-size:1.35rem; color:var(--mark, var(--crimson));}

/* portfolio / frames */
.frame{border:1.5px solid var(--line-on-light); background:var(--paper); padding:0.5rem;}
.frame .inside{
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(45deg, rgba(35,35,35,0.035) 0px, rgba(35,35,35,0.035) 1px, transparent 1px, transparent 9px);
  position:relative; overflow:hidden;
}
.frame .inside i{font-size:2.6rem; color:var(--mark, var(--crimson)); opacity:0.85;}
.frame-caption{display:flex; justify-content:space-between; align-items:center; padding:0.9rem 0.3rem 0.2rem;}
.frame-caption .tag{font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--mark, var(--crimson));}

/* testimonial tags */
.tag-card{background:var(--paper); border:1.5px dashed var(--line-on-light); padding:2rem 1.8rem; position:relative; text-align:center;}
.tag-card .mark{font-family:var(--font-script); font-size:2.6rem; color:var(--mark, var(--crimson)); line-height:0.6; display:block; margin-bottom:0.6rem;}
.tag-card p{text-align:center;}
.tag-card h6{text-align:center;}

/* thread / values list */
.thread-item{display:flex; gap:1rem; align-items:flex-start;}
.thread-item .swirl{width:14px;height:14px;border-radius:50%; margin-top:6px; flex-shrink:0; background:var(--c, var(--crimson)); box-shadow:0 0 0 3px rgba(0,0,0,0.04);}

/* FAQ */
.faq-row{border-bottom:1.5px dashed var(--line-on-light); padding:1.4rem 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:1rem;}
.faq-q span{font-weight:600; font-size:1.02rem; font-family:var(--font-body);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.4s ease; font-size:0.94rem;}
.faq-a p{padding-top:0.8rem; color:rgba(35,35,35,0.68); max-width:560px;}

/* contact card */
.contact-card{background:var(--ink); color:var(--canvas); padding:2.4rem 2rem; border:1.5px solid rgba(244,239,228,0.14);}
.contact-card .row-item{display:flex; gap:0.9rem; align-items:center; margin-bottom:0.9rem;}
.contact-card i{color:var(--gold);}

/* form */
.form-field{margin-bottom:1.3rem;}
.form-field label{display:block; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; margin-bottom:0.5rem;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1.5px solid var(--line-on-light); background:var(--paper);
  padding:0.8rem 1rem; font-family:var(--font-body); font-size:0.95rem; color:var(--ink-text);
  transition:border-color 0.3s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:none; border-color:var(--crimson);}

footer{background:var(--ink); color:rgba(244,239,228,0.7); padding:3.2rem 0 1.6rem;}
footer h6{color:var(--canvas); text-transform:uppercase; letter-spacing:0.1em; font-size:0.82rem; margin-bottom:0.9rem; font-family:var(--font-body); font-weight:600;}
footer ul{list-style:none;}
footer ul li{margin-bottom:0.5rem;}
footer a{color:rgba(244,239,228,0.7); font-size:0.92rem;}
footer a:hover{color:var(--gold);}
.foot-brand{font-family:var(--font-display); font-size:1.3rem; color:var(--canvas); margin-bottom:0.8rem;}
.foot-bottom{border-top:1px solid rgba(244,239,228,0.14); margin-top:2.4rem; padding-top:1.4rem; text-align:center; font-size:0.8rem; color:rgba(244,239,228,0.45);}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-group > *:nth-child(1){transition-delay:0s;}
.reveal-group > *:nth-child(2){transition-delay:0.1s;}
.reveal-group > *:nth-child(3){transition-delay:0.2s;}
.reveal-group > *:nth-child(4){transition-delay:0.3s;}
.reveal-group > *:nth-child(5){transition-delay:0.4s;}
.reveal-group > *:nth-child(6){transition-delay:0.5s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============ FLOURISH (decorative stitched rule) ============ */
.flourish{
  width:64px; height:2px; margin-top:0.9rem;
  background-image:repeating-linear-gradient(90deg, var(--flourish-c, var(--crimson)) 0 6px, transparent 6px 12px);
}
.flourish.center{margin-left:auto; margin-right:auto;}

/* gradient accent text */
.grad-text{
  background:linear-gradient(90deg, var(--crimson), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============ TICKER ============ */
.ticker{
  overflow:hidden; white-space:nowrap; background:var(--ink);
  border-top:1.5px dashed var(--line-on-dark); border-bottom:1.5px dashed var(--line-on-dark);
  padding:0.95rem 0;
}
.ticker-track{display:inline-block; animation:tickerScroll 26s linear infinite;}
.ticker-track span{
  display:inline-flex; align-items:center; gap:0.6rem;
  margin:0 1.6rem; font-family:var(--font-display); letter-spacing:0.06em;
  text-transform:uppercase; font-size:0.92rem; color:var(--canvas);
}
.ticker-track span i{color:var(--gold); font-size:0.6rem;}
@keyframes tickerScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .ticker-track{animation:none;} }

/* ============ NAV CART ============ */
.nav-cart{position:relative; color:var(--canvas); font-size:1.15rem;}
.cart-badge{
  position:absolute; top:-8px; right:-10px; background:var(--crimson); color:#fff;
  font-size:0.62rem; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform 0.3s cubic-bezier(.2,.7,.3,1.4);
}
.cart-badge.show{transform:scale(1);}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:200;
  background:var(--ink); color:var(--canvas); border:1px solid rgba(244,239,228,0.2);
  padding:0.8rem 1.3rem; font-size:0.88rem; font-family:var(--font-body);
  display:flex; align-items:center; gap:0.6rem;
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all 0.4s cubic-bezier(.2,.7,.3,1);
}
.toast.show{transform:translateY(0); opacity:1;}
.toast i{color:var(--gold);}

/* ============ TICKET PRICE TAG ============ */
.price-tag{
  position:relative; display:inline-block; background:var(--crimson); color:#fff;
  font-family:var(--font-display); font-size:1.05rem; padding:0.35rem 1rem; letter-spacing:0.02em;
}
.price-tag::before, .price-tag::after{
  content:''; position:absolute; top:50%; width:11px; height:11px;
  background:var(--paper); border-radius:50%; transform:translateY(-50%);
}
.price-tag::before{left:-5.5px;}
.price-tag::after{right:-5.5px;}

/* ============ SHOP CARD ============ */
.shop-card{
  background:var(--paper); border:1.5px solid var(--line-on-light);
  overflow:hidden; transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.shop-card:hover{transform:translateY(-6px); box-shadow:0 18px 38px rgba(21,22,27,0.12); border-color:var(--mark, var(--crimson));}
.shop-card .shop-thumb{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(35,35,35,0.04) 0px, rgba(35,35,35,0.04) 1px, transparent 1px, transparent 9px);
  position:relative; overflow:hidden;
}
.shop-card .shop-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.shop-card:hover .shop-thumb img{transform:scale(1.08);}
.shop-card .shop-thumb i{font-size:2.6rem; color:var(--mark, var(--crimson)); transition:transform 0.5s ease;}
.shop-card:hover .shop-thumb i{transform:scale(1.15) rotate(-4deg);}
.shop-card .shop-body{padding:1.3rem 1.3rem 1.5rem;}
.shop-card .shop-cat{font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--mark, var(--crimson));}
.shop-card h6{font-family:var(--font-display); font-weight:500; font-size:1.1rem; margin:0.4rem 0 0.9rem;}
.shop-card .shop-foot{display:flex; align-items:center; justify-content:space-between; margin-top:0.9rem;}
.btn-cart{
  display:inline-flex; align-items:center; gap:0.4rem; border:1.5px solid var(--ink); background:none;
  color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:0.78rem; letter-spacing:0.03em;
  padding:0.5rem 0.9rem; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase;
}
.btn-cart:hover{background:var(--ink); color:var(--canvas);}
.btn-cart i{transition:transform 0.3s ease;}
.btn-cart:hover i{transform:translateX(3px);}

/* button arrow micro-interaction */
.btn-stitch i{transition:transform 0.3s ease;}
.btn-stitch:hover i{transform:translate(3px,-3px);}

/* ============ BEFORE / AFTER CARD (full image, no cropping) ============ */
.ba-card{background:var(--paper); border:1.5px solid var(--line-on-light); overflow:hidden; transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;}
.ba-card:hover{transform:translateY(-5px); box-shadow:0 18px 38px rgba(21,22,27,0.1); border-color:var(--mark, var(--crimson));}
.ba-card .ba-image-wrap{
  aspect-ratio:1/1; background:var(--canvas-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ba-image{width:100%; height:100%; object-fit:contain; display:block;}
.ba-card .ba-caption{padding:0.9rem 1.1rem 1.1rem; font-size:0.85rem; color:rgba(35,35,35,0.6); text-align:center;}

/* ============ HERO BANNER (full-bleed image hero, e.g. Home) ============ */
.hero-banner{width:100%; line-height:0; background:var(--paper); padding-top:76px;}
.hero-banner img{width:100%; height:auto; display:block;}
@media (max-width:768px){ .hero-banner{padding-top:64px;} }

.hero-sub{
  background:linear-gradient(180deg, var(--paper), var(--canvas-2));
  padding:3rem 0 3.6rem; text-align:center;
  border-bottom:1.5px dashed var(--line-on-light);
}
.hero-sub .lead{max-width:600px; margin:0 auto 2rem; font-size:1.1rem; font-weight:300; color:rgba(35,35,35,0.68); line-height:1.7; text-align:center;}
.hero-sub .hero-stats{display:flex; justify-content:center; gap:3rem; margin-bottom:2.2rem; flex-wrap:wrap;}
.hero-sub .hero-stats div{text-align:center;}
.hero-sub .hero-stats div span{display:block; font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--crimson);}
.hero-sub .hero-stats div small{color:rgba(35,35,35,0.5); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-top:0.2rem;}
.hero-sub .hero-cta{display:flex; justify-content:center; flex-wrap:wrap; gap:1rem;}
@media (max-width:480px){
  .hero-sub .hero-stats{gap:1.6rem;}
  .hero-sub .hero-stats div span{font-size:1.5rem;}
}

/* grid helpers */
.grid{display:grid; gap:1.6rem;}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-12-6{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
@media (max-width:900px){
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
  .g-12-6{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .g-4{grid-template-columns:1fr;}
  .g-3{grid-template-columns:1fr;}
  .g-2{grid-template-columns:1fr;}
}

/* ============ FILE PILLS ============ */
.file-pill {
  display: inline-block;
  background: var(--paper);
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0.2rem 0.2rem;
  border: 1px solid var(--line-on-light);
}

/* ============ PRODUCT CARD ============ */
.product-card {
  background: #fff;
  border: 1.5px solid var(--line-on-light);
  border-radius: 8px;
  padding: 2rem;
  transition: all 0.3s ease;
}
.product-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.product-card .p-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.product-card h5 {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--navy);
}
.product-card ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.product-card ul li {
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: rgba(35,35,35,0.8);
  text-align: left;
}
.product-card ul li i {
  color: var(--gold-dark);
}

/* ============ PROCESS STEPS ============ */
.process-wrap {
  position: relative;
}
.process-line {
  position: absolute;
  top: 2.5rem;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--gold);
  opacity: 0.3;
}
.step {
  text-align: center;
  position: relative;
}
.step .num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--gold);
  margin: 0 auto 0.8rem;
  background: #fff;
  position: relative;
  z-index: 2;
}
.step h6 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--navy);
}
.step p {
  text-align: center;
}

/* ============ RESPONSIVE FIXES ============ */
@media (max-width: 768px) {
  .process-line {
    display: none;
  }
}