/* Pushpa's Boutique — "Silk & Zari" concept (local mockup, 2026-09-30)
   Night-teal hero with a lit silk drape, then ivory pages like good paper.
   Brand tokens from CLAUDE.md: teal #0E4F4C, gold #C9A24E / text gold
   #8A6320, peach #F6E2D6, ground #F2F6F4, ink #142E2A. */
:root{
  --teal:#0E4F4C; --teal-2:#0A3B39; --night:#061917; --night-2:#0B2522;
  --gold:#C9A24E; --gold-hi:#E8C77A; --gold-text:#8A6320;
  --peach:#F6E2D6; --ivory:#FBF7F0; --paper:#F5EFE4; --ground:#F2F6F4;
  --ink:#142E2A; --muted:#51625E; --line:#E3D8C6; --rose:#B5536A;
  --on-night:#F3EBDD; --on-night-muted:#B9C7C2;
  --serif:'Instrument Serif', 'Times New Roman', serif;
  --sans:'Work Sans', system-ui, sans-serif;
  --kn:'Noto Sans Kannada', 'Work Sans', sans-serif;
  --r:18px; --gut:clamp(18px, 4.5vw, 56px); --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ivory:#0F1D1B; --paper:#132522; --ground:#0D1917; --ink:#EDE6DA; --muted:#A9B8B3;
    --line:#2A3F3B; --gold-text:#D8B46A; --peach:#2A211C; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ivory:#0F1D1B; --paper:#132522; --ground:#0D1917; --ink:#EDE6DA; --muted:#A9B8B3;
  --line:#2A3F3B; --gold-text:#D8B46A; --peach:#2A211C; color-scheme: dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* language: every string twice */
.kn{display:none;font-family:var(--kn)}
body.lang-kn .en{display:none}
body.lang-kn .kn{display:revert}
body.lang-kn h1 .kn, body.lang-kn h2 .kn, body.lang-kn h3 .kn{font-family:var(--kn);font-weight:600;letter-spacing:0;font-size:.72em;line-height:1.35}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:600 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.night .eyebrow{color:var(--gold-hi)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.02}
h2 em, h1 em{font-style:italic;color:var(--gold-text)}
.night h1 em,.night h2 em{color:var(--gold-hi)}

/* zari band: gold mango + diamond on teal, the shop's own motif */
.zari{height:14px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 7h28' stroke='%23C9A24E' stroke-width='.8'/%3E%3Cpath d='M14 2l5 5-5 5-5-5z' fill='%23C9A24E'/%3E%3Ccircle cx='3' cy='7' r='1.3' fill='%23E8C77A'/%3E%3Ccircle cx='25' cy='7' r='1.3' fill='%23E8C77A'/%3E%3C/svg%3E") repeat-x center/28px 14px, var(--teal);
  border-block:1px solid #b08a3c}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:0 1.35em;border-radius:999px;
  font:600 .98rem/1 var(--sans);text-decoration:none;border:1px solid transparent;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:none}
.btn-wa{background:linear-gradient(180deg,#E3C173,#C9A24E);color:#1b1407;box-shadow:0 10px 30px -12px rgba(201,162,78,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-wa:hover{box-shadow:0 14px 34px -10px rgba(201,162,78,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-line{border-color:rgba(232,199,122,.55);color:var(--on-night)}
.btn-line:hover{background:rgba(232,199,122,.1)}
.btn-ink{background:var(--teal);color:#fff}
.btn-ink:hover{background:var(--teal-2)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold)}

/* ── header ── */
.top{position:absolute;inset:0 0 auto;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-night)}
.brand img{width:44px;height:44px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand b{display:block;font:400 1.45rem/1 var(--serif);letter-spacing:.01em}
.brand i{display:block;font:500 .66rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);font-style:normal;margin-top:4px}
.nav{display:flex;gap:26px;font:500 .9rem var(--sans)}
.nav a{text-decoration:none;color:var(--on-night-muted);transition:color .2s}
.nav a:hover{color:var(--gold-hi)}
.lang{display:flex;border:1px solid rgba(232,199,122,.4);border-radius:999px;padding:3px}
.lang button{border:0;background:none;color:var(--on-night-muted);padding:7px 13px;border-radius:999px;font:600 .8rem var(--sans)}
.lang button[aria-pressed="true"]{background:var(--gold);color:#1b1407}
.lang button:last-child{font-family:var(--kn)}
@media (max-width:980px){ .nav{display:none} }
@media (max-width:560px){
  .brand i{display:none}
  .brand b{font-size:1.2rem}
  .brand img{width:36px;height:36px}
  .lang button{padding:6px 10px}
}

/* ── hero ── */
.hero{position:relative;min-height:100svh;background:
  radial-gradient(1200px 700px at 78% 30%, #0f3b37 0%, transparent 60%),
  radial-gradient(900px 600px at 10% 90%, #0b2b28 0%, transparent 65%),
  var(--night);
  color:var(--on-night);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
#silk{position:absolute;inset:-4% -6% -4% -6%;width:112%;height:108%;z-index:-1;opacity:0;transition:opacity 1.6s var(--ease)}
#silk[data-ready]{opacity:1}
/* keeps the words readable where the silk passes behind them */
.scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px 520px at 22% 46%, rgba(6,25,23,.78), rgba(6,25,23,.35) 55%, transparent 75%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,72px);
  min-height:100svh;padding-top:110px;padding-bottom:70px}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.7rem);line-height:.98;margin:18px 0 22px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line > span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero h1 .line:nth-child(3) > span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero .eyebrow{display:inline-block;padding:9px 14px;border-radius:999px;background:rgba(6,25,23,.72);
  border:1px solid rgba(232,199,122,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lede{max-width:34ch;font-size:1.08rem;color:var(--on-night-muted);margin:0 0 26px}
.express{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;color:var(--gold-hi);text-decoration:none;font:500 .95rem var(--sans);
  border-bottom:1px solid rgba(232,199,122,.4);padding-bottom:6px}
.express:hover{border-color:var(--gold-hi)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.hours{margin:22px 0 0;font-size:.86rem;color:var(--on-night-muted)}
.fade-in{opacity:0;transform:translateY(14px);animation:fin 1s var(--ease) forwards}
@keyframes fin{to{opacity:1;transform:none}}

/* the mannequin display: an arch, like a temple window, with the real photos */
.arch-box{position:relative}
.display{position:relative;justify-self:center;width:min(430px,100%);animation:fin 1.2s .35s var(--ease) both}
.arch{position:relative;aspect-ratio:4/5.3;border-radius:999px 999px 22px 22px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(232,199,122,.45),0 0 0 9px rgba(6,25,23,.6),0 0 0 10px rgba(232,199,122,.35);
  background:#1a2a28;touch-action:pan-y;cursor:grab;perspective:900px}
.arch:active{cursor:grabbing}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:rotateY(18deg) scale(1.04);
  transition:opacity .7s var(--ease),transform 1s var(--ease)}
.arch img.on{opacity:1;transform:none}
.arch img.off-l{transform:rotateY(-18deg) scale(1.04)}
.arch::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(0,0,0,.35));}
.views{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px;z-index:2;
  background:rgba(6,25,23,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px;border-radius:999px;border:1px solid rgba(232,199,122,.3)}
.views button{border:0;background:none;color:var(--on-night-muted);font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px}
.views button[aria-pressed="true"]{background:var(--gold);color:#1b1407}
.dcode{position:absolute;top:22px;right:-12px;z-index:3;background:var(--ivory);color:var(--ink);font:600 .78rem var(--sans);letter-spacing:.08em;
  padding:9px 14px 9px 22px;border-radius:4px;box-shadow:0 10px 20px -8px rgba(0,0,0,.5);transform:rotate(4deg)}
.dcode::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--night)}
.picks{display:flex;justify-content:center;gap:10px;margin-top:18px}
.picks button{width:54px;height:54px;border-radius:50%;padding:0;border:1px solid rgba(232,199,122,.35);overflow:hidden;background:#1a2a28;
  transition:transform .3s var(--ease),border-color .3s}
.picks button img{width:100%;height:100%;object-fit:cover}
.picks button[aria-pressed="true"]{border:2px solid var(--gold-hi);transform:translateY(-3px)}
.turn-hint{text-align:center;font-size:.78rem;color:var(--on-night-muted);margin-top:10px;letter-spacing:.04em}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:44px;background:linear-gradient(var(--gold-hi),transparent);opacity:.7}
.scroll-cue::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold-hi);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{from{transform:translateY(0);opacity:1}to{transform:translateY(40px);opacity:0}}
@media (max-width:860px){
  .hero-in{grid-template-columns:1fr;padding-top:96px;gap:34px;min-height:auto}
  .display{order:-1;width:min(300px,74%)}
  .scroll-cue{display:none}
}

/* ── promise ribbon ── */
.ribbon{background:var(--teal);color:#F3EBDD;overflow:hidden;border-block:1px solid #b08a3c;position:relative}
.ribbon-track{display:flex;gap:0;width:max-content;animation:slide 48s linear infinite}
.ribbon span{display:inline-flex;align-items:center;gap:22px;padding:17px 0 17px 22px;font:400 1.35rem/1 var(--serif);white-space:nowrap}
.ribbon span::after{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}

section{position:relative}
.sec{padding-block:clamp(72px,11vw,140px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,60px)}
.sec-head p{max-width:40ch;color:var(--muted);margin:0}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── why it fits: the sewing machine ── */
.why{background:var(--paper)}
.why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.usual{margin:28px 0 0;padding:0;list-style:none}
.usual li{position:relative;padding:14px 0 14px 36px;color:var(--muted);border-bottom:1px dashed var(--line)}
.usual li::before{content:"";position:absolute;left:4px;top:25px;width:16px;height:1.5px;background:var(--rose);transform:rotate(-8deg)}
.usual li .en,.usual li .kn{background:linear-gradient(var(--rose),var(--rose)) no-repeat 0 55%/0 1px;transition:background-size 1.2s var(--ease)}
.usual.in li .en,.usual.in li .kn{background-size:100% 1px}
.usual.in li:nth-child(2) .en{transition-delay:.15s}.usual.in li:nth-child(3) .en{transition-delay:.3s}
.usual.in li:nth-child(4) .en{transition-delay:.45s}.usual.in li:nth-child(5) .en{transition-delay:.6s}
.why h3{font-size:1.6rem;margin:40px 0 0}
.here{margin:18px 0 0;padding:0;list-style:none;counter-reset:h}
.here li{position:relative;padding:16px 0 16px 58px;font-size:1.06rem;border-bottom:1px solid var(--line)}
.here li::before{counter-increment:h;content:counter(h);position:absolute;left:0;top:13px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font:400 1.2rem var(--serif);color:var(--gold-text);border:1px dashed var(--gold);transition:background .5s,color .5s}
.here li.done::before{background:var(--teal);color:#fff;border-style:solid;border-color:var(--teal)}
.machine-wrap{position:sticky;top:clamp(20px,8vh,90px)}
.machine{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(20,46,42,.22))}
.machine-cap{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.84rem;color:var(--muted)}
.machine-cap button{border:1px solid var(--line);background:none;border-radius:999px;padding:7px 14px;font-size:.8rem}
.story{margin-top:40px;padding:26px 28px;border-radius:var(--r);background:var(--ivory);border:1px solid var(--line);position:relative;overflow:hidden}
.story .time{font:400 clamp(2rem,4vw,2.8rem)/1 var(--serif);color:var(--gold-text);display:flex;gap:14px;align-items:center}
.story .time i{display:inline-block;width:60px;height:1px;background:var(--gold);position:relative}
.story .time i::after{content:"";position:absolute;right:0;top:-4px;border:4px solid transparent;border-left:7px solid var(--gold);border-right:0}
.story p{margin:12px 0 0;color:var(--muted)}
@media (max-width:860px){ .why-grid{grid-template-columns:1fr} .machine-wrap{position:relative;top:0;order:-1} }

/* ── designs ── */
.gallery{columns:3;column-gap:clamp(12px,1.6vw,22px)}
.gallery .g{break-inside:avoid;margin-bottom:clamp(12px,1.6vw,22px)}
.g{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--paper);text-decoration:none;color:inherit;
  box-shadow:0 1px 0 var(--line);isolation:isolate}
.g img{width:100%;height:100%;object-fit:cover;transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.g img + img{position:absolute;inset:0;opacity:0;pointer-events:none}
.g:hover img:first-child{transform:scale(1.04)}
.g:hover img + img{opacity:1}
.g .tag{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;background:rgba(251,247,240,.92);color:#142E2A;
  font:600 .74rem var(--sans);letter-spacing:.08em;padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.g .tag small{font-weight:500;letter-spacing:0;color:#51625E}
.g .ask{position:absolute;right:14px;bottom:14px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#1b1407;transform:translateY(8px);opacity:0;transition:.4s var(--ease)}
.g:hover .ask,.g:focus-visible .ask{opacity:1;transform:none}
.g img{aspect-ratio:4/5}
.g2 img,.g5 img{aspect-ratio:4/5.8}
.g3 img,.g6 img{aspect-ratio:1/1}
@media (max-width:860px){
  .gallery{columns:2}
  .g .tag small{display:none}
  .g .ask{opacity:1;transform:none;width:34px;height:34px}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chips a{text-decoration:none;padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;transition:.25s}
.chips a:hover{border-color:var(--gold);background:var(--paper)}
.chips b{align-self:center;font:600 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* ── never "not possible" ── */
.never{background:var(--night);color:var(--on-night);overflow:hidden}
.never-in{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.never-img{position:relative;overflow:hidden}
.never-img img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.never-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--night))}
.never-tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vw,100px)}
.never-tx h2{font-size:clamp(2.6rem,5.6vw,4.8rem)}
.never-tx p{color:var(--on-night-muted);max-width:40ch;font-size:1.08rem}
@media (max-width:860px){ .never-in{grid-template-columns:1fr} .never-img{min-height:460px} .never-img::after{background:linear-gradient(180deg,transparent 60%,var(--night))} }

/* ── offer: a paper swing tag on a thread ── */
.offer{background:var(--peach);overflow:hidden}
.offer-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.swing-wrap{position:relative;transform-origin:50% -70px;animation:sway 6s ease-in-out infinite;filter:drop-shadow(0 26px 28px rgba(20,46,42,.3))}
.swing{position:relative;width:250px;padding:64px 26px 30px;background:var(--ivory);border-radius:14px 14px 16px 16px;
  clip-path:polygon(22% 0,78% 0,100% 16%,100% 100%,0 100%,0 16%);text-align:center}
.swing::before{content:"";position:absolute;top:20px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--peach);box-shadow:inset 0 0 0 3px var(--gold)}
.swing-thread{position:absolute;left:50%;top:-80px;width:2px;height:110px;z-index:2;margin-left:-1px;background:linear-gradient(var(--gold),#a88237);transform-origin:top}
.swing b{display:block;font:400 3rem/1 var(--serif);color:var(--rose)}
.swing small{display:block;font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-top:8px}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.offer h2{font-size:clamp(2rem,4.4vw,3.3rem)}
.offer p{color:var(--muted);max-width:52ch}
@media (max-width:700px){ .offer-in{grid-template-columns:1fr;justify-items:center;text-align:center} }

/* ── rates: the tailor's bill book ── */
.bill{position:relative;max-width:980px;margin:0 auto;background:#FFFDF8;color:#142E2A;border-radius:6px;
  box-shadow:0 1px 0 #e7dccb,0 30px 60px -30px rgba(20,46,42,.35);padding:clamp(28px,5vw,56px)}
.rl{border-bottom:1px solid #efe5d4}
.bill::before{content:"";position:absolute;left:clamp(18px,3.5vw,40px);top:0;bottom:0;width:1px;background:#e7b3a8}
.bill-head{display:flex;justify-content:space-between;align-items:start;gap:20px;border-bottom:2px solid #142E2A;padding-bottom:18px;margin-bottom:10px}
.bill-head h2{font-size:clamp(2rem,4.4vw,3.2rem);color:#142E2A}
.bill-head h2 em{color:#8A6320}
.bill-no{text-align:right;font:500 .78rem var(--sans);letter-spacing:.12em;color:#51625E}
.bill-no b{display:block;font:400 1.5rem var(--serif);color:#B5536A;letter-spacing:0}
.bill-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,64px)}
.bill h3{font:600 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#8A6320;margin:26px 0 4px}
.rl{display:flex;align-items:baseline;gap:10px;height:44px;margin:0;font-size:1.02rem}
.rl span:first-child{white-space:nowrap}
.rl i{flex:1;border-bottom:2px dotted #c8b89c;transform:translateY(-4px)}
.rl b{font:400 1.35rem var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl b small{font:500 .72rem var(--sans);color:#51625E;margin-right:4px}
.rl.fast{color:#0E4F4C}
.stamp{flex:none;transform:rotate(-9deg);
  border:2.5px solid #B5536A;color:#B5536A;border-radius:10px;padding:10px 16px;text-align:center;font:700 .8rem/1.25 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.stamp small{display:block;font-size:.62rem;letter-spacing:.2em}
.bill-foot{margin-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.92rem;color:#51625E}
.bill-foot a{color:#0E4F4C;font-weight:600}
@media (max-width:760px){ .bill-cols{grid-template-columns:1fr} .bill-head{flex-direction:column} }

/* ── how to order: along the measuring tape ── */
.order{background:var(--ivory)}
.tape{position:relative;height:74px;margin:10px 0 48px;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#F4D98E,#E9C66B);box-shadow:0 12px 26px -14px rgba(138,99,32,.6),inset 0 -2px 0 rgba(0,0,0,.08);
  transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.tape.in{transform:none}
.tape svg{position:absolute;inset:0;width:100%;height:100%}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);counter-reset:s}
.step{position:relative;padding-top:10px}
.step .n{font:400 4.2rem/1 var(--serif);color:var(--gold-text);opacity:.9}
.step h3{font-size:1.5rem;margin:10px 0 8px}
.step p{margin:0;color:var(--muted);font-size:.98rem}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ── visit ── */
.visit{background:var(--paper)}
.visit-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,60px);align-items:stretch}
.addr{font:400 clamp(1.5rem,2.6vw,2rem)/1.25 var(--serif);margin:18px 0 12px}
.land{color:var(--muted);margin:0 0 24px}
.facts{display:grid;gap:0;margin:0 0 26px;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{font:600 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);padding-top:4px}
.facts dd{margin:0;text-align:right}
.facts dd small{display:block;color:var(--muted)}
.map{position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;border:1px solid var(--line);background:var(--ground)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.75) contrast(1.02)}
.map .pin{position:absolute;left:16px;bottom:16px;right:16px;background:var(--ivory);border-radius:12px;padding:14px 16px;font-size:.9rem;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.35);border:1px solid var(--line)}
@media (max-width:860px){ .visit-grid{grid-template-columns:1fr} .map{min-height:340px} }

/* ── bulk + abroad ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px)}
.card{border-radius:var(--r);padding:clamp(26px,4vw,44px);background:var(--ivory);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.card h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.card p{margin:0;color:var(--muted)}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.card li{padding-left:26px;position:relative}
.card li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.card .btn{align-self:flex-start;margin-top:auto}
.card.dark{background:var(--teal);color:#F3EBDD;border-color:transparent}
.card.dark p{color:#C9D8D3}
.card.dark .eyebrow{color:var(--gold-hi)}
@media (max-width:860px){ .two{grid-template-columns:1fr} }

/* ── footer ── */
.foot{background:var(--night);color:var(--on-night-muted);padding:60px 0 120px;font-size:.9rem}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:end}
.foot b{font:400 1.8rem var(--serif);color:var(--on-night);display:block}
.foot a{color:var(--gold-hi)}

/* ── phone dock ── */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;gap:10px;padding:8px;border-radius:999px;
  background:rgba(6,25,23,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(232,199,122,.3);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .5s var(--ease)}
.dock.show{transform:none}
.dock a{flex:1;justify-content:center;min-height:50px}
@media (max-width:860px){ .dock{display:flex} }

.motion-toggle{position:fixed;right:16px;bottom:16px;z-index:30;border:1px solid var(--line);background:var(--ivory);color:var(--ink);border-radius:999px;
  padding:8px 14px;font:500 .78rem var(--sans);box-shadow:0 8px 20px -10px rgba(0,0,0,.3)}
@media (max-width:860px){ .motion-toggle{bottom:84px} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero h1 .line > span{transform:none}
  .reveal{opacity:1;transform:none}
  .tape{transform:none}
}
body.still .ribbon-track,body.still .swing-wrap{animation-play-state:paused}

/* ════════════════════ shared tailoring pieces (tailor.js) ════════════════════ */

/* measuring-tape rail on the left edge */
.tape-rail{position:fixed;left:0;top:0;bottom:0;width:40px;z-index:35;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.tape-strip{position:absolute;left:6px;top:0;width:34px;border-radius:3px 3px 0 0;will-change:transform;
  background:linear-gradient(90deg,#e9c664,#f6dd92 40%,#efcf78 70%,#d9b252);box-shadow:2px 0 10px -3px rgba(0,0,0,.45),inset -1px 0 0 rgba(0,0,0,.12)}
.tape-tip{height:30px;background:linear-gradient(90deg,#8d9694,#eef1f0 45%,#9aa3a1);border-radius:3px 3px 0 0;border-bottom:2px solid #6b7472}
.tape-pin{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:3px}
.tape-pin i{display:block;width:44px;height:2px;background:#b3312b;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.tape-pin i::after{content:"";position:absolute;left:40px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff9b8f,#b3312b 60%,#6d1612);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.tape-pin b,.tape-pin small{display:none}
.tape-top{position:fixed;left:0;right:0;top:0;height:7px;z-index:36;pointer-events:none;display:none}
.tape-top i{display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:repeating-linear-gradient(90deg,#2b1f08 0 1px,transparent 1px 6px) bottom/100% 3px no-repeat,linear-gradient(#f6dd92,#e1bd5c);
  box-shadow:0 1px 4px rgba(0,0,0,.3)}
@media (max-width:1023px){ .tape-rail{display:none} .tape-top{display:block} }
@media (min-width:1024px){ body{padding-left:0} .wrap{padding-left:max(var(--gut),64px)} }

/* silk curtain between pages */
/* lifts by itself on arrival (pure CSS, so a busy page can never leave it down) */
.curtain{position:fixed;inset:0;z-index:100;pointer-events:none;transform:translateY(-104%);animation:curtainUp .8s cubic-bezier(.7,0,.2,1) .1s both}
@keyframes curtainUp{from{transform:none}to{transform:translateY(-104%)}}
.curtain.drop{animation:none;transform:none;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.curtain.drop.go{transform:none}
.curtain-silk{position:absolute;inset:0;background:
  repeating-linear-gradient(95deg,rgba(255,255,255,.0) 0 40px,rgba(255,255,255,.06) 60px,rgba(0,0,0,.08) 90px,rgba(255,255,255,0) 120px),
  radial-gradient(900px 600px at 70% 30%,#15605b,#0a3b39 60%,#061917)}
.curtain-hem{position:absolute;left:0;right:0;bottom:-2px;height:38px;border-top:1px solid #f2d58c;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='38'%3E%3Crect width='44' height='38' fill='%23b8913f'/%3E%3Cpath d='M0 3h44M0 35h44' stroke='%23f3d78e'/%3E%3Cpath d='M18 21c0-4 3-6.5 6.2-6.5 3.6 0 5.4 2.8 5.4 5.6 0 4.6-4.6 7-9.8 4.9 2.2-.3 4-1.4 4-3.5 0-1.4-1-2.3-2.3-2.3-2 0-3.5 1.5-3.5 1.8Z' fill='%23f6e0a2'/%3E%3Ccircle cx='4' cy='19' r='1.8' fill='%23f6e0a2'/%3E%3C/svg%3E") repeat-x}
.curtain-mark{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;opacity:.9;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.6}}

/* seams */
.seam{position:relative;height:44px;margin:0 auto;max-width:var(--max);padding:0 var(--gut);overflow:visible}
.seam > svg:first-child{width:100%;height:44px;display:block;overflow:visible}
.seam-chalk{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 6}
.seam-thread{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;clip-path:inset(0 calc(100% - var(--sewn,0%)) 0 0)}
.seam.sewn .seam-thread{clip-path:none}
.seam-needle{position:absolute;left:var(--gut);top:14px;width:60px;height:16px;opacity:0;transition:opacity .3s}
.seam.in:not(.sewn) .seam-needle{opacity:1}
.night .seam-chalk{stroke:rgba(232,199,122,.25)}

/* chalk underline */
.chalk{position:relative;display:inline-block}
.chalk-line{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.36em;overflow:visible;pointer-events:none}
.chalk-line path{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;
  transition:stroke-dashoffset 1.1s var(--ease) .35s;filter:url(#none)}
.chalk-line path + path{stroke-width:2;transition-delay:.7s}
.chalk.in .chalk-line path{stroke-dashoffset:0}
.night .chalk-line path{stroke:var(--gold-hi)}

/* stitched hover on buttons */
.btn{position:relative}
.btn::after{content:"";position:absolute;inset:4px;border-radius:inherit;border:1.3px dashed currentColor;opacity:0;transition:opacity .25s,inset .25s}
.btn:hover::after{opacity:.45;inset:5px}

/* scissors cut reveal: --p (0…1) is how far the scissors have cut */
.cut-reveal{position:relative;isolation:isolate;--p:0}
.cut-cover{position:absolute;inset:-10px;z-index:5;cursor:pointer}
.cut-cloth{position:absolute;inset:0;border-radius:18px;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0 30px,rgba(255,255,255,.07) 45px,rgba(0,0,0,.08) 70px,rgba(255,255,255,0) 95px),
  linear-gradient(160deg,#17645e,#0b3f3c 55%,#082f2d)}
.cut-cloth::before,.cut-cloth::after{content:"";position:absolute;left:0;right:0;height:22px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Crect width='30' height='22' fill='%23b8913f'/%3E%3Cpath d='M0 2h30M0 20h30' stroke='%23f3d78e'/%3E%3Cpath d='M15 6l5 5-5 5-5-5z' fill='%23f6e0a2'/%3E%3C/svg%3E") repeat-x}
.cut-cloth::before{top:26px}
.cut-cloth::after{bottom:26px}
/* the uncut cloth ahead of the scissors */
.cut-whole{clip-path:inset(0 0 0 calc(var(--p) * 100%));box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.cut-guide{position:absolute;left:3%;right:3%;top:50%;border-top:2px dashed rgba(246,224,162,.75)}
/* the two halves behind the scissors, pulled a little apart so the cut opens */
/* each half hinges at the scissors' tip, so the cut opens in a V: wide behind, shut at the blades */
.cut-top{clip-path:inset(0 calc(100% - var(--p) * 100% - 6px) 50% 0);transform-origin:calc(var(--p) * 100%) 50%;transform:rotate(calc(1.4deg * min(1, var(--p) * 4)))}
.cut-bot{clip-path:inset(50% calc(100% - var(--p) * 100% - 6px) 0 0);transform-origin:calc(var(--p) * 100%) 50%;transform:rotate(calc(-1.4deg * min(1, var(--p) * 4)))}
.cut-top,.cut-bot{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.scissors{position:absolute;z-index:3;top:50%;width:150px;height:88px;margin-top:-44px;left:calc(var(--p) * 100% - 104px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.cut-hint{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);color:#f6e0a2;font:600 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:opacity .3s}
.cut-reveal.cutting .cut-hint,.cut-reveal.opened .cut-hint{opacity:0}
/* the offer shows through the opening as it is cut */
.cut-reveal > :not(.cut-cover){opacity:calc(.25 + var(--p) * .75)}
/* when the scissors reach the end, the halves drop away */
.cut-reveal.opened .cut-top{transition:transform 1s cubic-bezier(.6,0,.3,1),opacity 1s;transform:translate(-3%,-70%) rotate(-5deg);opacity:0}
.cut-reveal.opened .cut-bot{transition:transform 1s cubic-bezier(.6,0,.3,1),opacity 1s;transform:translate(3%,70%) rotate(4deg);opacity:0}
.cut-reveal.opened .scissors{transition:opacity .5s .2s,transform .6s;opacity:0;transform:translateX(40px) rotate(-20deg)}
.cut-reveal.opened .cut-cover{pointer-events:none}
.cut-reveal.opened > :not(.cut-cover){opacity:1;transition:opacity .6s}

/* ── order slip ── */
[data-slip]{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(22px,4vw,48px);align-items:start}
.slip-book{background:#FFFDF8;color:#142E2A;border-radius:6px;padding:clamp(22px,4vw,44px);box-shadow:0 1px 0 #e7dccb,0 30px 60px -30px rgba(20,46,42,.35);position:relative}
.slip-book::before{content:"";position:absolute;left:clamp(12px,2.4vw,26px);top:0;bottom:0;width:1px;background:#e7b3a8}
.slip-head h3{font:600 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#8A6320;margin:22px 0 6px}
.slip-head:first-child h3{margin-top:0}
.slip-row{border-bottom:1px solid #efe5d4}
.slip-pick{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 4px;background:none;border:0;text-align:left;color:inherit;font-size:1rem}
.slip-pick:hover{background:#fbf3e3}
.slip-pick .tick{flex:none;width:24px;height:24px;border:1.5px dashed #c8b89c;border-radius:6px;display:grid;place-items:center;transition:.25s}
.slip-pick .tick svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease) .05s}
.slip-row.on .tick{background:#0E4F4C;border:1.5px solid #0E4F4C}
.slip-row.on .tick svg{stroke-dashoffset:0}
.slip-pick .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-pick i{flex:1;border-bottom:2px dotted #c8b89c;transform:translateY(4px);min-width:12px}
.slip-pick .pr{font:400 1.3rem var(--serif);white-space:nowrap}
.slip-pick .pr small{font:500 .7rem var(--sans);color:#51625E;margin-right:4px}
.slip-opts{display:none;gap:10px;align-items:center;padding:0 0 12px 36px;flex-wrap:wrap}
.slip-row.on .slip-opts{display:flex}
.qty{display:inline-flex;align-items:center;border:1px solid #e0d3bd;border-radius:999px;overflow:hidden}
.qty button{width:36px;height:34px;border:0;background:#fbf3e3;font-size:1.1rem}
.qty output{min-width:28px;text-align:center;font-weight:600}
.fast{border:1px solid #e0d3bd;background:none;border-radius:999px;padding:7px 12px;font:600 .8rem var(--sans);color:#0E4F4C}
.fast[aria-pressed="true"]{background:#0E4F4C;color:#fff;border-color:#0E4F4C}
.slip-note{margin:16px 0 0;font-size:.88rem;color:#51625E}
.slip{position:sticky;top:90px}
.slip-paper{background:#fffdf6;color:#142E2A;padding:22px 22px 18px;border-radius:6px 6px 0 0;box-shadow:0 30px 60px -30px rgba(20,46,42,.45);
  background-image:radial-gradient(#0001 1px,transparent 1.2px);background-size:16px 16px}
.slip-paper.bump{animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:translateY(-4px) rotate(-.4deg)}}
.slip-edge{height:14px;background:linear-gradient(-45deg,transparent 7px,#fffdf6 0) 0 0/14px 14px repeat-x,linear-gradient(45deg,transparent 7px,#fffdf6 0) 0 0/14px 14px repeat-x;filter:drop-shadow(0 6px 6px rgba(20,46,42,.12))}
.slip-top{display:flex;align-items:center;gap:10px;border-bottom:2px solid #142E2A;padding-bottom:12px}
.slip-top img{width:34px;height:34px}
.slip-top b{display:block;font:400 1.25rem/1 var(--serif)}
.slip-top small{font:600 .66rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8A6320}
.slip-no{margin-left:auto;font:400 1.1rem var(--serif);color:#B5536A}
.slip-lines{list-style:none;margin:10px 0 0;padding:0;min-height:60px}
.slip-lines li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #e0d3bd;animation:typein .4s var(--ease)}
.slip-lines li b{font:400 1.15rem var(--serif);white-space:nowrap}
.slip-lines li b small{font:500 .68rem var(--sans);color:#51625E;margin-right:3px}
.slip-lines li em{font-style:normal;color:#0E4F4C;font-weight:600;font-size:.8rem}
.slip-lines li.empty{color:#8b958f;font-size:.92rem;border:0;justify-content:center;padding:22px 0;text-align:center}
@keyframes typein{from{opacity:0;transform:translateX(-8px)}}
.slip-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 6px;border-top:2px solid #142E2A;margin-top:6px}
.slip-total span{font:600 .74rem var(--sans);letter-spacing:.2em;text-transform:uppercase}
.slip-total b{font:400 2rem var(--serif)}
.slip-total b small{font:500 .8rem var(--sans);color:#51625E;margin-right:4px}
.slip-fine{font-size:.8rem;color:#51625E;margin:4px 0 14px;min-height:1em}
.slip-send{width:100%;justify-content:center}
[data-slip]:not(.has) .slip-send{filter:saturate(.3);opacity:.7}
@media (max-width:860px){ [data-slip]{grid-template-columns:1fr} .slip{position:relative;top:0} }

/* ════════════════════ inner pages ════════════════════ */
.top.solid{position:sticky;background:rgba(6,25,23,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(232,199,122,.18)}
.phead{position:relative;background:radial-gradient(900px 500px at 80% 20%,#0f3b37,transparent 60%),var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.phead #silk{inset:-20% -6% -30% -6%;height:150%;opacity:0}
.phead #silk[data-ready]{opacity:.9}
.phead .scrim{background:linear-gradient(90deg,rgba(6,25,23,.85),rgba(6,25,23,.4) 60%,transparent)}
.phead-in{padding-block:clamp(40px,7vw,90px) clamp(50px,8vw,100px)}
.crumb{font-size:.84rem;color:var(--on-night-muted);margin:0 0 18px}
.crumb a{color:var(--gold-hi);text-decoration:none}
.phead h1{font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.02;max-width:18ch}
.phead .lead{max-width:60ch;color:var(--on-night-muted);font-size:1.08rem;margin:20px 0 0}
.phead .lead b{color:var(--on-night)}
.phead .upd{font-size:.82rem;color:var(--on-night-muted);margin-top:16px}
.phead .ctas{margin-top:26px}

.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:56px 0 14px}
.prose h3{font-size:1.45rem;margin:30px 0 8px}
.prose p,.prose li{line-height:1.75}
.prose > p:first-of-type::first-letter{float:left;font:400 4.2em/.8 var(--serif);color:var(--gold-text);padding:.06em .1em 0 0}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:8px 0}
.prose ol li::marker{font-family:var(--serif);color:var(--gold-text);font-size:1.2em}
.prose ul li::marker{color:var(--gold)}
.prose a{color:var(--teal);text-decoration-color:var(--gold);text-underline-offset:3px}
.prose .answer{font-size:1.12rem;background:var(--paper);border-radius:var(--r);padding:22px 24px;border:1px solid var(--line);position:relative}
.prose .answer::before{content:"";position:absolute;inset:7px;border:1.3px dashed var(--line);border-radius:12px;pointer-events:none}
.tablewrap{overflow-x:auto;margin:18px 0;border-radius:10px;border:1px solid var(--line);background:#FFFDF8}
table{width:100%;border-collapse:collapse;font-size:.95rem;color:#142E2A}
th,td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid #efe5d4}
thead th{font:600 .7rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8A6320;background:#fbf3e3}
tbody th{font-weight:600;white-space:nowrap}
td.amt,th.amt{text-align:right;white-space:nowrap}
td.amt b{font:400 1.25rem var(--serif)}
.inc{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.inc li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 18px 18px 20px;margin:0;position:relative}
.inc li b{display:block;font:400 1.3rem var(--serif);margin-bottom:6px}
.inc li::before{content:"";position:absolute;right:14px;top:14px;width:18px;height:18px;border:1.3px dashed var(--gold);border-radius:50%}
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;position:relative;font:400 1.3rem/1.35 var(--serif)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1.3px dashed var(--gold);
  background:linear-gradient(var(--gold-text),var(--gold-text)) center/10px 1.5px no-repeat,linear-gradient(var(--gold-text),var(--gold-text)) center/1.5px 10px no-repeat;transition:transform .35s var(--ease)}
.qa[open] summary::after{transform:rotate(135deg)}
.qa p{margin:0 0 18px;color:var(--muted)}
.qa[open] p{animation:unfold .45s var(--ease)}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.cta .btn.primary{background:var(--teal);color:#fff}
.cta .btn.ghost{border-color:var(--line);color:var(--ink)}
.more{display:grid;gap:10px;margin-top:10px}
.more a{color:var(--teal);font-weight:600}

/* ════════════════════ home extras ════════════════════ */

/* promise icons, drawn as the machine sews each line */
.here li{padding-left:112px}
.here li .pi{position:absolute;left:50px;top:12px;width:44px;height:44px;fill:none;stroke:var(--gold-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.35;transition:opacity .5s}
.here li.done .pi{opacity:1;stroke:var(--teal)}
/* each icon keeps working, as long as it is on screen */
.pi *{transform-box:view-box}
.pi .cloth{stroke:#d9b252;stroke-width:2.4}
/* scissors: snip their way along the cloth */
.pi-cut .pb1,.pi-cut .pb2{transform-origin:18px 20px}
.pi-cut .pb1{animation:snipA 1s ease-in-out infinite}
.pi-cut .pb2{animation:snipB 1s ease-in-out infinite}
.pi-cut .snip{animation:snipWalk 3s ease-in-out infinite}
@keyframes snipA{50%{transform:rotate(12deg)}}
@keyframes snipB{50%{transform:rotate(-12deg)}}
@keyframes snipWalk{0%,100%{transform:translateX(-3px)}50%{transform:translateX(5px)}}
/* iron: glides back and forth, steam rises */
.pi-iron .ib{animation:glide 2.4s ease-in-out infinite}
@keyframes glide{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.pi-iron .steam path{opacity:0;animation:steam 2.4s ease-out infinite}
.pi-iron .steam path:nth-child(2){animation-delay:.5s}
.pi-iron .steam path:nth-child(3){animation-delay:1s}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-6px)}}
/* dress form: the measuring tape goes round, again and again */
.pi .tape-line{stroke:#d9b252;stroke-width:3;stroke-dasharray:30;stroke-dashoffset:30;animation:tapeRound 2.8s ease-in-out infinite}
@keyframes tapeRound{0%{stroke-dashoffset:30}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
.pi-form .fm{transform-origin:20px 36px;animation:formSway 4s ease-in-out infinite}
@keyframes formSway{50%{transform:rotate(2deg)}}
/* double check: the lens looks it over, then the tick is written */
.pi-check .lens{animation:scan 3s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-2px)}50%{transform:translate(2px,3px)}75%{transform:translate(-3px,1px)}}
.pi .ck{stroke-dasharray:24;stroke-dashoffset:24;animation:tickLoop 3s ease-in-out infinite}
@keyframes tickLoop{0%,30%{stroke-dashoffset:24}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
/* calendar: the day's page turns over, then it's ticked ready */
.pi-cal .leaf{fill:rgba(201,162,78,.25);transform-origin:20px 9px;animation:leafFlip 3s ease-in-out infinite}
@keyframes leafFlip{0%,20%{transform:none}35%{transform:scaleY(-1);opacity:.3}36%{transform:scaleY(1);opacity:0}50%,100%{opacity:1}}
.pi-cal .ck{animation-delay:.6s}
.here li:not(.done) .pi *{animation-duration:3.6s}
body.still .pi *{animation:none!important}
@media (max-width:560px){ .here li{padding-left:100px} .here li .pi{left:46px;width:40px;height:40px} }

/* pin travelling along the order tape */
.tape-marker{position:absolute;top:-6px;left:0;width:18px;height:86px;transform:translateX(-9px);transition:left .5s var(--ease)}
.tape-marker::before{content:"";position:absolute;left:8px;top:10px;width:2px;height:70px;background:linear-gradient(#b3312b,#6d1612)}
.tape-marker::after{content:"";position:absolute;left:1px;top:0;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9b8f,#b3312b 60%,#6d1612);box-shadow:0 3px 6px rgba(0,0,0,.35)}
.tape{overflow:visible}
.step{transition:opacity .4s}
.steps.tracking .step{opacity:.45}
.steps.tracking .step.cur{opacity:1}

/* offer sits inside the cut cover */
.offer-cut{padding:26px 10px}
.sec-head .stamp{margin-right:6px}
.bill-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
.bill-foot a{color:var(--teal);font-weight:600}

/* ════════════════════ content pages ════════════════════ */
.page-main{padding-top:clamp(40px,6vw,70px);padding-bottom:40px}
.page-main .sec{padding-block:clamp(36px,5vw,60px)}
.page-main .sec-head h2,.prose h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.prose .byline,.phead .byline{font-size:.86rem;color:var(--on-night-muted);margin-top:14px}
.phead .crumb{font-size:.84rem}
.phead h1 .kn{font-family:var(--kn)}
.motion-inline{margin-top:10px;background:none;border:1px solid rgba(232,199,122,.35);color:var(--on-night-muted);border-radius:999px;padding:6px 12px;font-size:.78rem}
.sources{font-size:.85rem;color:var(--muted);margin-top:34px}

/* 24-hour clock */
.xc{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,44px)}
.xc-l{font:600 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin:22px 0 10px}
.xc-l:first-child{margin-top:0}
.xc-l b{font:400 1.5rem var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-left:8px}
.xc-days,.xc-types{display:flex;flex-wrap:wrap;gap:8px}
.xc-days button,.xc-types button{min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--ivory);font-weight:600}
.xc-days button[aria-pressed="true"],.xc-types button[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.xc-days .sun{opacity:.5;text-decoration:line-through;cursor:not-allowed}
.xc-types b{font:400 1.2rem var(--serif);margin-left:6px}
.xc-range{width:100%;accent-color:var(--teal);height:30px}
.xc-scale{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted)}
.xc-dial{text-align:center}
.xc-dial svg{width:min(280px,100%);height:auto;filter:drop-shadow(0 20px 30px rgba(20,46,42,.25))}
.xc-ring{fill:#0E4F4C;stroke:#c9a24e;stroke-width:3}
.xc-face{fill:#FFFDF8}
.xc-ticks line{stroke:#142E2A}
.xc-sweep{fill:none;stroke:#c9a24e;stroke-width:7;stroke-linecap:round;opacity:.85}
.xc-hh{stroke:#142E2A;stroke-width:6;stroke-linecap:round}
.xc-mh{stroke:#b3312b;stroke-width:3;stroke-linecap:round}
.xc-ready{margin:14px 0 16px;min-height:96px;transition:opacity .3s}
[data-express-clock]:not(.done) .xc-ready{opacity:.25}
.xc-ready small{display:block;font:600 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.xc-ready b{display:block;font:400 2.2rem/1.1 var(--serif)}
.xc-ready span{font:400 1.4rem var(--serif);color:var(--teal)}
.xc-ready em{display:block;font-style:normal;font-size:.84rem;color:var(--muted);margin-top:6px}
@media (max-width:760px){ .xc{grid-template-columns:1fr} }

/* parcel journey (outside-India guide) */
.journey{margin:28px 0;padding:18px;border-radius:18px;background:var(--night);color:var(--on-night)}
.journey svg{width:100%;height:auto;display:block}
.journey figcaption{font-size:.9rem;color:var(--on-night-muted);text-align:center;margin-top:6px}
.journey .parcel{offset-path:path("M110 200 C 260 20, 460 20, 600 110");offset-rotate:0deg;animation:fly 5s cubic-bezier(.5,0,.3,1) infinite}
.journey .pin{transform-origin:600px 110px;animation:pinDrop 5s ease-out infinite}
@keyframes fly{0%{offset-distance:0%;opacity:0}8%{opacity:1}80%{offset-distance:100%;opacity:1}92%,100%{offset-distance:100%;opacity:0}}
@keyframes pinDrop{0%,70%{transform:translateY(-30px);opacity:0}80%{transform:none;opacity:1}100%{opacity:1}}
body.still .journey *{animation-play-state:paused}

/* 404: the thread came loose */
.lost{min-height:calc(100svh - 80px);display:grid;place-items:center;align-content:center;text-align:center;padding:40px var(--gut);background:var(--ivory)}
.lost-art{width:min(360px,80vw);height:auto;overflow:visible}
.lost-thread{fill:none;stroke:#b5536a;stroke-width:3;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;animation:loose 4s ease-in-out infinite alternate}
.lost-dot{fill:#b5536a}
.lost-needle{offset-path:path("M40 180 C 70 120, 20 80, 80 60 S 170 40, 160 90 S 110 130, 150 150 L 150 165");offset-rotate:auto;animation:needleRun 4s ease-in-out infinite alternate}
@keyframes loose{to{stroke-dashoffset:0}}
@keyframes needleRun{from{offset-distance:0%}to{offset-distance:100%}}
.lost h1{font-size:clamp(2.4rem,6vw,4rem);margin:20px 0}

/* ════════════════════ the clothes rail (catalog) ════════════════════ */
.rack-tools{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-bottom:34px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.swatches button{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 15px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--ivory);font-size:.9rem}
.swatches button::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.25);}
.swatches button[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);background:var(--paper)}
.rack-find{display:flex;align-items:center;gap:10px;font:600 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.rack-find input{min-height:42px;border:1px dashed var(--gold);border-radius:999px;padding:0 16px;background:var(--ivory);color:var(--ink);font:500 .95rem var(--sans);width:150px}
.rack-count{margin:0 0 0 auto;color:var(--muted);font-size:.9rem}
.rack{--sway:0deg;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:64px clamp(14px,2vw,26px);padding-top:34px;position:relative}
/* each hanger brings its own length of brass rail; side by side they make one rail per row */
.hang::before{content:"";position:absolute;left:calc(clamp(14px,2vw,26px) / -2 - 1px);right:calc(clamp(14px,2vw,26px) / -2 - 1px);top:-49px;height:9px;
  background:linear-gradient(#f5e0a4,#b8913f 55%,#7a561b);box-shadow:0 6px 10px -4px rgba(0,0,0,.35);transform:rotate(calc(var(--sway) * -1));z-index:1}
@media (max-width:560px){ .hang::before{left:-7px;right:-7px;top:-40px} }
.hang{position:relative;display:block;text-decoration:none;color:inherit;transform-origin:50% -26px;transform:rotate(var(--sway));
  animation:hangIn .8s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes hangIn{from{opacity:0;transform:translateY(-24px) rotate(-6deg)}}
.hang:hover{animation:hangSwing 1.4s ease-in-out}
@keyframes hangSwing{25%{transform:rotate(3deg)}55%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}
.hanger{position:absolute;left:50%;top:-44px;width:120px;height:56px;margin-left:-60px;overflow:visible;z-index:2;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.hang-card{position:relative;display:block;border-radius:10px 10px 14px 14px;overflow:hidden;background:var(--paper);aspect-ratio:3/4;
  box-shadow:0 22px 34px -22px rgba(20,46,42,.55),0 0 0 1px var(--line)}
.hang-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,transform 1s var(--ease)}
.hang-card .alt{opacity:0}
.hang:hover .hang-card .alt{opacity:1}
.hang:hover .hang-card img:first-child{transform:scale(1.04)}
.swing-tag{position:absolute;right:14px;top:30px;z-index:3;background:#FFFDF8;color:#142E2A;border-radius:4px;padding:8px 12px 8px 22px;font-size:.72rem;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.45);transform-origin:90% -20px;transform:rotate(5deg);transition:transform .5s var(--ease)}
.swing-tag::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ivory);box-shadow:inset 0 0 0 1.5px #c9a24e}
.swing-tag::after{content:"";position:absolute;left:10px;top:-28px;width:1.5px;height:30px;background:#c9a24e;transform:rotate(-12deg);transform-origin:bottom}
.swing-tag b{display:block;font:600 .8rem var(--sans);letter-spacing:.08em}
.swing-tag small{color:#51625E}
.hang:hover .swing-tag{transform:rotate(-4deg)}
.rack-empty{grid-column:1/-1;text-align:center;color:var(--muted)}
.rack-more{margin-top:40px}
body.still .hang{animation:none!important;transform:none}
@media (max-width:560px){ .rack{grid-template-columns:repeat(2,1fr);gap:56px 12px} .hanger{width:92px;margin-left:-46px;top:-36px} .swing-tag{right:8px;top:18px;padding:6px 8px 6px 18px} .swing-tag small{display:none} }

/* one design */
.dz{display:grid;grid-template-columns:1fr minmax(280px,420px);gap:clamp(24px,5vw,70px);align-items:center}
.dz h1{margin-top:12px}
.dz-price{font-size:1.1rem;color:var(--on-night-muted);margin:16px 0 6px}
.dz-price b{font:400 2rem var(--serif);color:var(--gold-hi);margin-left:6px}
.dz-fast a{color:var(--gold-hi)}
.dz .display{width:100%}
@media (max-width:860px){ .dz{grid-template-columns:1fr} .dz .display{order:-1;width:min(320px,80%)} }
.mcard{max-width:820px;margin:0 auto;background:#FFFDF8;color:#142E2A;border-radius:8px;padding:clamp(22px,4vw,40px);
  box-shadow:0 30px 60px -30px rgba(20,46,42,.35);border:1px solid #efe5d4;position:relative;
  background-image:linear-gradient(90deg,transparent 58px,#e7b3a8 58px 59px,transparent 59px)}
.mcard-top{display:flex;align-items:center;gap:10px;border-bottom:2px solid #142E2A;padding:0 0 14px 70px;margin-bottom:8px}
.mcard-top img{width:30px;height:30px}
.mcard-top b{font:400 1.3rem var(--serif)}
.mcard-code{margin-left:auto;font:400 1.4rem var(--serif);color:#B5536A}
.mrow{display:flex;align-items:baseline;gap:10px;padding:12px 0 12px 70px;border-bottom:1px solid #efe5d4}
.mrow dt{font:600 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8A6320;white-space:nowrap}
.mrow i{flex:1;border-bottom:2px dotted #c8b89c}
.mrow dd{margin:0;font:400 1.3rem var(--serif);text-align:right}
.mcard-note{padding-left:70px;color:#51625E;font-size:.92rem;margin-top:14px}
.similar{padding-block:30px 70px}
@media (max-width:560px){ .mcard{background-image:linear-gradient(90deg,transparent 30px,#e7b3a8 30px 31px,transparent 31px)} .mcard-top,.mrow,.mcard-note{padding-left:40px} .mrow{flex-wrap:wrap} .mrow dd{font-size:1.15rem} }
.similar h2{margin-bottom:40px}

/* ── full-screen photo viewer ── */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:120;background:rgba(4,16,15,.96);display:grid;place-items:center;animation:lbIn .3s ease}
@keyframes lbIn{from{opacity:0}}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.lb-img{max-width:94vw;max-height:84vh;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;transform-origin:center;
  transition:opacity .35s,transform .35s var(--ease);cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.lb-img.in{opacity:1}
.lb.zoomed .lb-img{cursor:zoom-out;transition:opacity .35s,transform .35s var(--ease),transform-origin .08s linear}
.lb-x{position:absolute;right:16px;top:16px;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(232,199,122,.45);background:rgba(6,25,23,.7);color:#F3EBDD;font-size:1.2rem}
.lb-nav{position:absolute;top:50%;z-index:2;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:1px solid rgba(232,199,122,.45);background:rgba(6,25,23,.7);color:#F3EBDD;font-size:2rem;line-height:1}
.lb-prev{left:16px}.lb-next{right:16px}
.lb.single .lb-nav,.lb.zoomed .lb-nav{display:none}
.lb-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:14px 16px 20px;color:#B9C7C2;font-size:.9rem;
  background:linear-gradient(transparent,rgba(4,16,15,.9))}
.lb-bar a{color:#E8C77A;font-weight:600}
.lb-cap b{color:#F3EBDD}
[data-zoom]{cursor:zoom-in}
@media (max-width:560px){ .lb-nav{top:auto;bottom:64px;margin:0} }
.arch{cursor:zoom-in}
.never-img img{cursor:zoom-in}

/* ════════════════════ festivals (festivals.js) ════════════════════ */
.fest-chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 14px 8px 10px;border-radius:999px;
  background:rgba(6,25,23,.72);border:1px solid rgba(232,199,122,.35);color:#F3EBDD;font:600 .82rem var(--sans);letter-spacing:.04em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fin .8s var(--ease) both}
.fest-chip i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 14px var(--fest)}
.hero .fest-chip + .eyebrow{margin-left:8px}
.phead .fest-chip{display:flex;width:max-content}
body.fest .btn-wa{background:linear-gradient(180deg,color-mix(in srgb,var(--fest) 30%,#E3C173),#C9A24E)}
body.fest .seam-thread{stroke:var(--fest)}

/* marigold toran */
.fest-toran{position:absolute;left:0;right:0;top:0;height:130px;z-index:3;pointer-events:none}
.hero .fest-toran{top:78px}
.fest-toran svg{width:100%;height:100%;display:block;overflow:visible}
.fest-toran .drop{transform-box:fill-box;transform-origin:50% 0;animation:tsway 4.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tsway{50%{transform:rotate(3deg)}}
.hero.night:has(.fest-toran) .hero-in{padding-top:190px}
.phead:has(.fest-toran) .phead-in{padding-top:clamp(120px,12vw,150px)}
@media (max-width:860px){ .fest-toran{height:84px} .hero .fest-toran{top:68px} .hero.night:has(.fest-toran) .hero-in{padding-top:150px} }

/* Deepavali: lanterns, diyas, rangoli, sparkles */
.fest-lanterns{position:absolute;right:0;top:0;width:100%;height:360px;z-index:2;pointer-events:none}
.fest-lanterns svg{width:100%;height:100%;overflow:visible}
.kandil{animation:ksway 5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ksway{50%{transform:rotate(-3deg)}}
.fest-diyas{position:absolute;left:0;right:0;bottom:0;height:110px;z-index:3;pointer-events:none}
.fest-diyas svg{width:100%;height:100%;overflow:visible}
.fest-diyas.small{position:relative;height:70px;margin-top:20px;opacity:.9}
.fest-diyas .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.3s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes flick{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.08) skewX(3deg)}60%{transform:scale(1.05,.94) skewX(-4deg)}100%{transform:scale(.97,1.05) skewX(2deg)}}
.fest-rangoli{position:absolute;left:-90px;bottom:-110px;width:360px;height:360px;z-index:-1;pointer-events:none;opacity:.55}
.fest-rangoli svg{width:100%;height:100%}
.fest-rangoli .rg path,.fest-rangoli .rg circle{stroke-dasharray:420;stroke-dashoffset:420;fill-opacity:0;animation:rdraw 3.4s ease forwards}
.fest-rangoli .rg2 path{animation-delay:.6s}.fest-rangoli .rg3 path{animation-delay:1.2s}
@keyframes rdraw{70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:.9}}
.fest-sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fest-sparkles i{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(#fff6cc 0 18%,rgba(255,207,90,.55) 30%,transparent 65%);transform:scale(var(--s));will-change:opacity;
  opacity:0;animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{50%{opacity:1}}
.phead .fest-lanterns{height:300px}
@media (max-width:860px){ .fest-lanterns{height:300px} .fest-rangoli{width:240px;height:240px;left:-70px;bottom:-80px} .fest-diyas{height:70px} }
.offscreen .fest-toran *,.offscreen .fest-lanterns *,.offscreen .fest-diyas *,.offscreen .fest-sparkles *,.offscreen .ribbon-track,.offscreen .pi *,
body.still .fest-toran *,body.still .fest-lanterns *,body.still .fest-diyas *,body.still .fest-rangoli *,body.still .fest-sparkles *{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .fest-rangoli .rg path,.fest-rangoli .rg circle{stroke-dashoffset:0;fill-opacity:.9} .fest-sparkles i{opacity:.8} }

/* mockup-only festival preview switch */
.fp{position:fixed;left:52px;bottom:16px;z-index:60;font:500 .84rem var(--sans)}
.fp-t{border:1px solid rgba(232,199,122,.5);background:rgba(6,25,23,.9);color:#F3EBDD;border-radius:999px;padding:9px 14px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.fp-p{position:absolute;left:0;bottom:48px;width:280px;background:#FFFDF8;color:#142E2A;border-radius:14px;padding:12px;box-shadow:0 20px 50px -14px rgba(0,0,0,.45);display:grid;gap:6px}
.fp-p[hidden]{display:none}
.fp-h{margin:6px 0 0;font:600 .66rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8A6320}
.fp-p > a{display:block;padding:9px 12px;border-radius:10px;border:1px solid #efe5d4;text-decoration:none}
.fp-p a.on{background:#0E4F4C;color:#fff;border-color:#0E4F4C}
.fp-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fp-days a{display:grid;place-items:center;height:36px;border-radius:9px;text-decoration:none;font-weight:700;color:#142E2A;background:color-mix(in srgb,var(--c) 30%,#fff);border:2px solid var(--c)}
.fp-days a.on{outline:3px solid #142E2A;outline-offset:1px}
.fp-admin{background:#fbf3e3}
@media (max-width:1023px){ .fp{left:12px;bottom:84px} }

/* more festival looks (fest-data.js) */
.fest-bunting,.fest-rakhi{position:absolute;left:0;right:0;top:0;height:80px;z-index:3;pointer-events:none}
.hero .fest-bunting,.hero .fest-rakhi{top:78px}
.fest-bunting svg,.fest-rakhi svg,.fest-moon svg,.fest-kites svg,.fest-feathers svg{width:100%;height:100%;display:block;overflow:visible}
.fest-bunting .flag{transform-box:fill-box;transform-origin:50% 0;animation:tsway 3.5s ease-in-out infinite;animation-delay:var(--d)}
.fest-rakhi .drop{transform-box:fill-box;transform-origin:50% 0;animation:tsway 4.5s ease-in-out infinite;animation-delay:var(--d)}
.hero.night:has(.fest-bunting) .hero-in,.hero.night:has(.fest-rakhi) .hero-in{padding-top:170px}
.phead:has(.fest-bunting) .phead-in,.phead:has(.fest-rakhi) .phead-in{padding-top:clamp(100px,10vw,130px)}
.fest-moon{position:absolute;right:2%;top:70px;width:min(420px,60vw);height:300px;z-index:0;pointer-events:none}
.fest-moon .twk{animation:twinkle 2.6s ease-in-out infinite;animation-delay:var(--d)}
.fest-kites,.fest-feathers{position:absolute;right:0;top:0;width:100%;height:360px;z-index:0;pointer-events:none}
.fest-kites .kite{animation:kite 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes kite{50%{transform:translate(-14px,10px) rotate(-4deg)}}
.fest-feathers .feather{animation:float 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes float{50%{transform:translateY(-12px)}}
.fest-colours{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fest-colours i{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(var(--c),transparent 68%);opacity:0;
  transform:scale(var(--s));animation:puff 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes puff{0%{opacity:0;transform:scale(calc(var(--s) * .6))}40%{opacity:.38}100%{opacity:0;transform:scale(calc(var(--s) * 1.3))}}
.offscreen .fest-bunting *,.offscreen .fest-rakhi *,.offscreen .fest-moon *,.offscreen .fest-kites *,.offscreen .fest-feathers *,.offscreen .fest-colours *,
body.still .fest-bunting *,body.still .fest-rakhi *,body.still .fest-moon *,body.still .fest-kites *,body.still .fest-feathers *,body.still .fest-colours *{animation-play-state:paused}
@media (max-width:860px){ .fest-bunting,.fest-rakhi{height:56px} .hero .fest-bunting,.hero .fest-rakhi{top:68px} .hero.night:has(.fest-bunting) .hero-in,.hero.night:has(.fest-rakhi) .hero-in{padding-top:130px} }

/* back to top: a spool of thread that winds the page back up */
.to-top{position:fixed;right:16px;bottom:16px;z-index:45;width:52px;height:52px;border-radius:50%;border:1px solid rgba(232,199,122,.5);
  background:rgba(6,25,23,.9);color:#F3EBDD;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:26px;height:26px}
.to-top:hover{background:#0E4F4C}
@media (max-width:860px){ .to-top{bottom:84px;right:12px;width:46px;height:46px} }
/* festival decorations always sit behind the words and buttons */
.hero-in,.phead-in{position:relative;z-index:2}
.fest-lanterns{z-index:1}
@media (max-width:860px){ .fest-lanterns{height:170px!important;opacity:.9} .phead .fest-lanterns{height:150px!important} .fest-moon{top:60px;width:52vw;height:170px} }

/* gallery placeholders while the ★ designs load */
.g-wait{aspect-ratio:4/5;background:linear-gradient(100deg,var(--paper) 30%,#efe6d6 50%,var(--paper) 70%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite}
.g-wait:nth-child(2n){aspect-ratio:4/5.8}
@keyframes shimmer{to{background-position:-300% 0}}

.foot-links{margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(232,199,122,.18);font-size:.86rem;line-height:2}
.foot-links a{color:var(--on-night-muted);text-decoration:none}.foot-links a:hover{color:var(--gold-hi)}