/* ============================================================
   THE MOMENT BEFORE — shared brand system
   A Punjabi heritage atelier, gone digital-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Noto+Serif+Gurmukhi:wght@400;500;600;700&display=swap');

:root{
  /* palette */
  --ivory:        #FAF7F0;
  --ivory-deep:   #F3EEE2;
  --warm-grey:    #F1EBDD;
  --white:        #FFFFFF;
  /* Bagh Emerald — names kept as --burgundy* so every screen cascades */
  --burgundy:     #5C1A38;
  --burgundy-700: #46122B;
  --burgundy-900: #2C0A1B;
  --emerald:      #5C1A38;
  --emerald-700:  #46122B;
  --emerald-900:  #2C0A1B;
  --emerald-lift: #7C2A4E;
  --gold:         #C4923A;
  --gold-soft:    #D9B45F;
  --gold-deep:    #A6772A;
  --gold-bright:  #E7C46A;
  --marigold:     #E59A2E;
  --marigold-2:   #EBB14A;
  --ink:          #16140F;
  --ink-60:       #5C5848;
  --ink-40:       #938E7C;
  --hairline:     rgba(196,146,58,.30);
  --hairline-soft:rgba(20,30,24,.09);

  /* type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --gur:   'Noto Serif Gurmukhi', 'Cormorant Garamond', serif;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(44,10,27,.05), 0 2px 10px rgba(44,10,27,.06);
  --shadow-md: 0 8px 30px rgba(44,10,27,.09), 0 1px 3px rgba(44,10,27,.06);
  --shadow-lg: 0 30px 70px rgba(44,10,27,.18), 0 6px 18px rgba(44,10,27,.10);
  --glow-gold: 0 0 0 1px rgba(196,146,58,.18), 0 18px 50px -12px rgba(196,146,58,.45);
  --glow-emerald: 0 30px 80px -20px rgba(92,26,56,.55);

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1200px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(196,146,58,.25); }

/* ---------- typography ---------- */
.serif{ font-family:var(--serif); }
.gur{ font-family:var(--gur); font-weight:500; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; line-height:1.08; letter-spacing:-.01em; }
.display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(44px, 7vw, 92px);
  line-height:1.0;
  letter-spacing:-.015em;
}
.h1{ font-size:clamp(34px,4.6vw,60px); font-weight:500; }
.h2{ font-size:clamp(28px,3.4vw,44px); font-weight:500; }
.h3{ font-size:clamp(22px,2.4vw,30px); font-weight:500; }
.lede{ font-size:clamp(18px,1.5vw,21px); line-height:1.65; color:var(--ink-60); font-weight:400; }

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow.on-dark{ color:var(--gold-soft); }
.muted{ color:var(--ink-60); }
.italic{ font-style:italic; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:920px; margin:0 auto; padding:0 32px; }
section{ position:relative; }
.section-pad{ padding:clamp(64px,9vw,128px) 0; }
.surface-grey{ background:var(--warm-grey); }
.surface-burgundy{ background:var(--burgundy); color:var(--ivory); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:14px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.02em;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s;
  cursor:pointer; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--burgundy); color:var(--ivory); }
.btn-primary:hover{ background:var(--burgundy-700); box-shadow:0 10px 28px rgba(62,15,22,.25); }
.btn-outline{ background:transparent; color:var(--burgundy); border-color:var(--gold); }
.btn-outline:hover{ background:rgba(196,146,58,.08); border-color:var(--gold-deep); }
.btn-ghost{ background:transparent; color:var(--ink); padding-left:8px; padding-right:8px; }
.btn-ghost:hover{ color:var(--gold-deep); }
.btn-light{ background:var(--ivory); color:var(--burgundy); }
.btn-light:hover{ background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.btn-lg{ padding:18px 38px; font-size:16px; }
.btn-block{ width:100%; }
.btn .arrow{ transition:transform .25s; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- cards ---------- */
.card{
  background:var(--white);
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

/* ---------- phulkari motifs ---------- */
/* a thin gold geometric divider — diamonds linked by a hairline */
.phulkari-divider{
  height:22px;
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='22' viewBox='0 0 46 22'%3E%3Cg fill='none' stroke='%23C4923A' stroke-width='1'%3E%3Cpath d='M0 11h13M33 11h13'/%3E%3Crect x='18.5' y='6.5' width='9' height='9' transform='rotate(45 23 11)'/%3E%3Cpath d='M23 1.5v3M23 17.5v3'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.85;
}
.phulkari-divider.on-dark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='22' viewBox='0 0 46 22'%3E%3Cg fill='none' stroke='%23D9B45F' stroke-width='1'%3E%3Cpath d='M0 11h13M33 11h13'/%3E%3Crect x='18.5' y='6.5' width='9' height='9' transform='rotate(45 23 11)'/%3E%3Cpath d='M23 1.5v3M23 17.5v3'/%3E%3C/g%3E%3C/svg%3E");
}
/* centered short divider with a single diamond */
.rule-diamond{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); }
.rule-diamond::before,.rule-diamond::after{ content:''; height:1px; width:54px; background:linear-gradient(90deg,transparent,var(--gold)); }
.rule-diamond::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.rule-diamond .dia{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

/* faint phulkari watermark tile for section backgrounds */
.phulkari-watermark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C4923A' stroke-width='1' opacity='0.5'%3E%3Crect x='52' y='52' width='16' height='16' transform='rotate(45 60 60)'/%3E%3Crect x='46' y='46' width='28' height='28' transform='rotate(45 60 60)'/%3E%3Cpath d='M60 8l6 12-6 4-6-4z M60 112l6-12-6-4-6 4z M8 60l12 6 4-6-4-6z M112 60l-12 6-4-6 4-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* small gold corner flourish (geometric) */
.corner-flourish{ position:absolute; width:60px; height:60px; pointer-events:none; opacity:.8; }

/* ---------- chips / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:.02em;
  padding:7px 15px; border-radius:999px;
  background:rgba(196,146,58,.10); color:var(--gold-deep);
  border:1px solid var(--hairline);
}
.tag{
  display:inline-flex; align-items:center;
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60);
}

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,240,.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hairline-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand .word{ font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:.065em; line-height:1; }
.brand .word small{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-deep); margin-top:3px; font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--ink-60); transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }

/* ---------- mobile nav (circular hamburger + elegant drawer), injected by nav.js ---------- */
.nav-burger{ display:none; flex-direction:column; justify-content:center; gap:4px; width:44px; height:44px; flex:none;
  padding:0; border:0; border-radius:50%; background:var(--burgundy); cursor:pointer; box-shadow:0 6px 18px rgba(44,10,27,.22); }
.nav-burger span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ivory); margin:0 auto;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.nav-burger.on span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger.on span:nth-child(2){ opacity:0; }
.nav-burger.on span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-drawer{ position:fixed; inset:0; z-index:200; background:rgba(44,10,27,.42); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s; }
.nav-drawer.on{ opacity:1; pointer-events:auto; }
.nav-drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,372px);
  background:var(--ivory); box-shadow:-24px 0 60px rgba(44,10,27,.22);
  padding:18px 22px calc(20px + env(safe-area-inset-bottom)); overflow-y:auto;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.8,.2,1); }
.nav-drawer.on .nav-drawer-panel{ transform:none; }
.nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 20px; }
.nav-drawer-head .brand .word{ font-size:18px; letter-spacing:.05em; }
.nav-drawer-head .brand .mark{ width:26px; height:26px; }
.nav-drawer-close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--hairline-soft); flex:none;
  background:var(--white); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.nav-drawer-close svg{ width:20px; height:20px; }
.nav-drawer-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.nav-drawer-cta{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:54px; border-radius:14px;
  background:var(--burgundy); color:var(--ivory); font-weight:500; font-size:16px; letter-spacing:.01em; }
.nav-drawer-cta svg{ width:17px; height:17px; }
.nav-drawer-demo{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; border-radius:14px;
  border:1px solid var(--gold); color:var(--burgundy); font-weight:500; font-size:15.5px; background:transparent; }
.nav-drawer-demo svg{ width:17px; height:17px; color:var(--gold-deep); }
.nav-drawer-label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-40); font-weight:600;
  margin:24px 2px 4px; }
.nav-drawer-links{ display:flex; flex-direction:column; }
.nav-drawer-links a{ display:flex; align-items:center; justify-content:space-between; font-family:var(--serif); font-size:21px;
  font-weight:500; color:var(--ink); padding:15px 2px; border-bottom:1px solid var(--hairline-soft); }
.nav-drawer-links a svg{ width:16px; height:16px; color:var(--ink-40); }
.nav-drawer-links a.cur{ color:var(--gold-deep); }
.nav-drawer-foot{ display:flex; gap:10px; margin-top:auto; padding-top:24px; }
.ndf-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:12px;
  font-size:14.5px; font-weight:500; }
.ndf-btn svg{ width:16px; height:16px; }
.ndf-primary{ background:var(--burgundy); color:var(--ivory); }
.ndf-ghost{ border:1px solid var(--hairline-soft); color:var(--ink); }

/* ---------- persistent sticky bottom CTA (mobile, marketing pages) ---------- */
.sticky-cta{ display:none; }
@media (max-width:760px){
  .sticky-cta{ position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:90;
    display:flex; align-items:center; justify-content:center; gap:12px; height:60px; border-radius:999px;
    background:var(--burgundy); color:var(--ivory); box-shadow:0 14px 36px rgba(44,10,27,.34);
    padding:0 26px; transition:transform .3s, opacity .3s; }
  .sticky-cta .sc-main{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; letter-spacing:.01em; }
  .sticky-cta .sc-main svg{ width:17px; height:17px; color:var(--gold-soft); }
  .sticky-cta .sc-sub{ font-size:13px; opacity:.78; font-weight:400; }
  .nav-drawer.on ~ .sticky-cta{ opacity:0; transform:translateY(20px); pointer-events:none; }
  body.has-sticky-cta{ padding-bottom:92px; }
}

/* ---------- device frames ---------- */
.phone{
  position:relative;
  width:var(--pw,300px);
  height:calc(var(--pw,300px) * 2.1333);
  flex:0 0 auto;
  background:#0e0e10;
  border-radius:42px;
  padding:11px;
  box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
}
.phone .screen{
  position:relative; width:100%; height:100%;
  border-radius:32px; overflow:hidden; background:var(--ivory);
}
.phone .notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:34%; height:22px; background:#0e0e10; border-radius:0 0 14px 14px; z-index:6;
}

/* ---------- footer ---------- */
.site-footer{ background:var(--burgundy-900); color:rgba(250,247,240,.72); }
.site-footer a{ color:rgba(250,247,240,.72); }
.site-footer a:hover{ color:var(--gold-soft); }

/* ---------- utility ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}
.grid{ display:grid; gap:28px; }
.flex{ display:flex; }
.between{ justify-content:space-between; }
.items-center{ align-items:center; }
.gap-sm{ gap:12px; }
.gap-md{ gap:24px; }
.hide-mobile{ }
@media (max-width:760px){
  body{ font-size:16px; }
  .wrap, .wrap-narrow{ padding:0 22px; }
  /* floating pill nav */
  .nav.has-burger{ position:fixed; top:0; left:0; right:0; background:transparent; backdrop-filter:none; border-bottom:none; padding:12px 14px 0; }
  .nav.has-burger .nav-inner{ height:60px; background:var(--ivory); border:1px solid var(--hairline-soft);
    border-radius:999px; padding:0 14px 0 18px; box-shadow:0 8px 26px rgba(44,10,27,.12); }
  body.has-floating-nav{ padding-top:84px; }
  /* flow-page navs (checkout/preview/customize): same floating pill, kept in flow via sticky */
  .nav:not(.has-burger){ position:sticky; top:0; z-index:50; background:transparent; backdrop-filter:none; border-bottom:none; padding:12px 14px 0; }
  .nav:not(.has-burger) .nav-inner{ height:60px; background:var(--ivory); border:1px solid var(--hairline-soft);
    border-radius:999px; padding:0 16px; box-shadow:0 8px 26px rgba(44,10,27,.12); }
  .nav-links{ gap:18px; }
  .nav.has-burger .nav-links a.hide-mobile{ display:none !important; }
  .nav.has-burger .nav-links .btn{ display:none; }   /* CTA lives in the drawer on mobile */
  .nav.has-burger .nav-burger{ display:flex; }
  .hide-mobile{ display:none !important; }
  .brand .word{ font-size:18px; }
  .brand .word small{ font-size:8.5px; letter-spacing:.28em; }
  /* comfortable tap targets */
  .btn{ min-height:46px; }
}
@media (min-width:761px){
  .nav-drawer{ display:none; }
}