/* ==========================================================================
   Yentho Ruchi Ra — stylesheet
   Palette, type and component rules follow design_guidelines.json:
   "Archetype 1: Organic & Earthy". Never pure black, never stark white.
   ========================================================================== */

:root {
  --maroon:        #6C312E;
  --maroon-hover:  #572624;
  --turmeric:      #CD853F;
  --turmeric-deep: #A9682F;

  --bg:        #FDFBF7;   /* main */
  --bg-2:      #F4EFE6;   /* secondary bands */
  --card:      #FFFFFF;
  --dark:      #2C1B1A;   /* dark tint */
  --text:      #2C1B1A;
  --muted:     #5C4A49;
  --inverse:   #FDFBF7;

  --hand:  'Kalam', cursive;          /* expressive headings */
  --body:  'Lora', Georgia, serif;    /* editorial body */
  --ui:    'Outfit', system-ui, sans-serif; /* buttons, labels, dense UI */

  --r-card: 2rem;
  --r-soft: 1rem;
  --shadow:   0 4px 20px -8px rgba(44,27,26,.13);
  --shadow-lg:0 18px 48px -22px rgba(44,27,26,.34);
  --pad-y: clamp(3.5rem, 8vw, 6.5rem);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: clamp(1rem,.96rem + .2vw,1.08rem);
  line-height: 1.75; overflow-x: hidden;
}
/* subtle grain, so the page reads as paper rather than screen */
body::before {
  content:''; position: fixed; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }

img { max-width:100%; display:block; }
a { color: var(--maroon); text-underline-offset:.22em; }
:focus-visible { outline: 3px solid var(--turmeric-deep); outline-offset: 3px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:0; z-index:999; background:var(--maroon);
  color:var(--inverse); padding:.75rem 1.25rem; font-family:var(--ui); }
.skip:focus { left:0; }

/* ----------------------------------------------------------- typography */
h1,h2,h3 { font-family: var(--hand); font-weight:700; color: var(--maroon);
  line-height:1.2; margin:0 0 .5em; }
h1 { font-size: clamp(2.5rem,1.6rem + 4vw,4.4rem); letter-spacing:-.02em; }
h2 { font-size: clamp(2rem,1.4rem + 2.4vw,3.1rem); letter-spacing:-.015em; }
h3 { font-size: clamp(1.35rem,1.1rem + .9vw,1.85rem); }
h4 { font-family: var(--ui); font-weight:600; font-size:1.05rem; color:var(--text); margin:0 0 .4em; }
p  { margin:0 0 1.15em; max-width:68ch; }

.eyebrow { font-family: var(--ui); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color: var(--turmeric-deep); margin:0 0 .9rem; }
.lede { font-size: clamp(1.12rem,1rem + .55vw,1.4rem); line-height:1.65; color: var(--muted); max-width:60ch; }
.note { font-family: var(--hand); color: var(--maroon); font-size:1.15rem; line-height:1.6; }
.hand-accent { font-family: var(--hand); color: var(--turmeric-deep); }

/* --------------------------------------------------------------- layout */
.wrap { width:min(100% - 2.5rem, var(--max)); margin-inline:auto; }
.wrap-narrow { width:min(100% - 2.5rem, 840px); margin-inline:auto; }
section { padding-block: var(--pad-y); position:relative; }
.center { text-align:center; }
.center p, .center .lede { margin-inline:auto; }
.band-2 { background: var(--bg-2); }
.band-dark { background: var(--maroon); color: rgba(253,251,247,.9); }
.band-dark h1,.band-dark h2,.band-dark h3 { color: var(--inverse); }
.band-dark .eyebrow { color: var(--turmeric); }
.band-dark .lede { color: rgba(253,251,247,.82); }
.band-dark a { color: var(--turmeric); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:880px){ .split { grid-template-columns:1fr; } }
.grid { display:grid; gap:clamp(1rem,2.4vw,1.9rem); }
.g2 { grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.g4 { grid-template-columns:repeat(auto-fit,minmax(218px,1fr)); }

/* --------------------------------------------------------------- header */
.site-header { position:sticky; top:0; z-index:60;
  background: rgba(253,251,247,.82); backdrop-filter: blur(20px);
  border-bottom:1px solid rgba(108,49,46,.1); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.55rem; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand img { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.brand-name { font-family:var(--hand); font-weight:700; font-size:1.3rem; color:var(--maroon); line-height:1.1; }
.brand-sub { font-family:var(--ui); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:1.5rem; font-family:var(--ui); }
.nav-links a { text-decoration:none; color:var(--text); font-size:.94rem; transition:color .18s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--maroon); }
.nav-toggle { display:none; background:none; border:1px solid rgba(108,49,46,.25);
  border-radius:100px; padding:.5rem .65rem; cursor:pointer; color:var(--maroon); }
.nav-toggle span { display:block; width:20px; height:2px; background:currentColor; margin:4px 0;
  transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width:980px){
  .nav-toggle{display:block;}
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--bg); padding:.5rem 1.25rem 1.4rem; max-height:0; overflow:hidden;
    transition:max-height .3s ease; box-shadow:var(--shadow); }
  .nav-links[data-open="true"]{ max-height:520px; }
  .nav-links a{ padding:.85rem 0; border-bottom:1px solid rgba(108,49,46,.08); }
  .nav-links .btn{ margin-top:1rem; justify-content:center; }
}

/* -------------------------------------------------------------- buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ui); font-weight:500; font-size:.97rem; padding:.9rem 1.9rem;
  border-radius:100px; border:none; cursor:pointer; text-decoration:none;
  background:var(--maroon); color:var(--inverse);
  transition:transform .18s ease, background .2s ease, box-shadow .25s ease; }
.btn:hover { transform:scale(1.02); background:var(--maroon-hover); box-shadow:var(--shadow-lg); color:var(--inverse); }
.btn:active { transform:scale(.98); }
.btn-turmeric { background:var(--turmeric); color:var(--dark); }
.btn-turmeric:hover { background:var(--turmeric-deep); color:var(--inverse); }
.btn-outline { background:transparent; color:var(--maroon); box-shadow:inset 0 0 0 1.5px var(--maroon); }
.btn-outline:hover { background:var(--maroon); color:var(--inverse); }
.btn-light { background:var(--bg); color:var(--maroon); }
.btn-light:hover { background:#fff; color:var(--maroon); }
.btn-sm { padding:.6rem 1.25rem; font-size:.87rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-row.center { justify-content:center; }

/* WhatsApp buttons carry the platform green so they read instantly */
.btn-wa { background:#25D366; color:#0B3D1F; }
.btn-wa:hover { background:#1EBE5A; color:#08301A; }
.btn-wa svg { width:19px; height:19px; }

/* ---------------------------------------------------------------- cards */
.card { background:var(--card); border-radius:var(--r-card); padding:clamp(1.7rem,3vw,2.4rem);
  box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-tint { background:var(--bg-2); box-shadow:none; }
.card p:last-child { margin-bottom:0; }
.card-icon { width:44px; height:44px; color:var(--turmeric); margin-bottom:1rem; }

.pill { display:inline-block; font-family:var(--ui); font-size:.74rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:.3rem .85rem; border-radius:100px;
  background:rgba(205,133,63,.18); color:var(--turmeric-deep); }
.pill-maroon { background:rgba(108,49,46,.1); color:var(--maroon); }

/* ----------------------------------------------------------------- hero */
.hero { padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem); }
.hero h1 { margin-bottom:.3em; }
.hero h1 .en { display:block; font-size:.42em; color:var(--turmeric-deep); margin-top:.35em; line-height:1.4; }

.hero-art { position:relative; }
.hero-art .shot-main { border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-art .shot-main img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.hero-art .shot-note { position:absolute; left:-6%; bottom:-9%; width:44%;
  border-radius:var(--r-soft); overflow:hidden; box-shadow:var(--shadow-lg);
  transform:rotate(-5deg); border:5px solid var(--bg); }
.hero-art .shot-note img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.hero-art .seal { position:absolute; right:-5%; top:-7%; width:31%; max-width:150px;
  border-radius:50%; box-shadow:var(--shadow-lg); }
@media (max-width:880px){
  .hero-art { margin-bottom:3.5rem; }
  .hero-art .shot-note { width:38%; left:0; bottom:-8%; }
}

.trust-strip { display:flex; flex-wrap:wrap; gap:1.1rem 1.9rem; margin-top:2rem; }
.trust-strip div { font-family:var(--ui); font-size:.9rem; color:var(--muted);
  display:flex; align-items:center; gap:.5rem; }
.trust-strip svg { width:18px; height:18px; flex:none; color:var(--turmeric); }

/* ------------------------------------------------------------ WhatsApp  */
/* The order engine. Deliberately the loudest block on the page. */
.wa-band { background:var(--dark); border-radius:var(--r-card); overflow:hidden;
  padding:clamp(2rem,4.5vw,3.4rem); color:rgba(253,251,247,.86); }
.wa-band h2 { color:var(--inverse); }
.wa-band .eyebrow { color:#25D366; }
.wa-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:2rem 0 2.2rem; }
@media (max-width:720px){ .wa-steps { grid-template-columns:1fr; } }
.wa-step { position:relative; padding-left:3.1rem; }
.wa-step .n { position:absolute; left:0; top:-2px; width:2.2rem; height:2.2rem; border-radius:50%;
  background:rgba(37,211,102,.16); color:#25D366; font-family:var(--ui); font-weight:600;
  display:grid; place-items:center; font-size:.95rem; }
.wa-band .wa-step h4 { color:var(--inverse); }
.wa-step h4 { margin-bottom:.25rem; }
.wa-step p { font-size:.93rem; margin:0; color:var(--muted); }
.wa-band .wa-step p { color:rgba(253,251,247,.72); }

/* --------------------------------------------------------- product tile */
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.6rem; }
.tab { font-family:var(--ui); font-size:.9rem; padding:.6rem 1.35rem; border-radius:100px;
  border:none; cursor:pointer; background:var(--bg-2); color:var(--maroon); transition:all .18s; }
.tab:hover { background:rgba(205,133,63,.25); }
.tab[aria-selected="true"] { background:var(--maroon); color:var(--inverse); }

.tile { background:var(--card); border-radius:var(--r-soft); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease; }
.tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tile-media { aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); display:grid; place-items:center; }
.tile-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile:hover .tile-media img { transform:scale(1.06); }
.tile-media.ph { background:repeating-linear-gradient(45deg,rgba(205,133,63,.06) 0 9px,transparent 9px 18px), var(--bg-2); }
.ph-mark { font-family:var(--hand); font-weight:700; font-size:2.6rem; color:rgba(108,49,46,.3); }
.tile-body { padding:1.15rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.tile-body h4 { font-family:var(--hand); font-weight:700; font-size:1.25rem; color:var(--maroon); margin:0 0 .1rem; }
.tile-te { font-family:var(--ui); font-size:.78rem; color:var(--turmeric-deep); margin:0 0 .5rem; }
.tile-body p { font-size:.9rem; line-height:1.6; color:var(--muted); margin:0 0 .9rem; }
.tile-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; flex-wrap:wrap; }
.tile-price { font-family:var(--ui); font-size:.85rem; font-weight:500; color:var(--turmeric-deep); }

/* ----------------------------------------------------------- photo grid */
.shots { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
@media (max-width:780px){ .shots { grid-template-columns:repeat(2,1fr); } }
.shots figure { margin:0; position:relative; overflow:hidden; border-radius:var(--r-soft); box-shadow:var(--shadow); }
.shots img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s ease; }
.shots figure:hover img { transform:scale(1.06); }
.shots figcaption { position:absolute; inset:auto 0 0 0; font-family:var(--ui); font-size:.82rem;
  color:var(--inverse); padding:1.9rem .85rem .7rem;
  background:linear-gradient(180deg,transparent,rgba(44,27,26,.82)); }

/* --------------------------------------------------------- testimonials */
.quote { background:var(--card); border-radius:var(--r-card); padding:1.9rem; box-shadow:var(--shadow); }
.stars { color:var(--turmeric); font-size:1.05rem; letter-spacing:.12em; margin-bottom:.9rem; }
.quote p { font-style:italic; color:var(--text); margin-bottom:1.1rem; }
.quote footer { font-family:var(--ui); font-weight:600; color:var(--maroon); font-size:.95rem; }
.quote footer span { display:block; font-weight:400; font-size:.8rem; color:var(--muted); }

/* ---------------------------------------------------------------- forms */
.form-card { background:var(--card); border-radius:var(--r-card); padding:clamp(1.7rem,4vw,2.8rem);
  box-shadow:var(--shadow); }
.field { margin-bottom:1.2rem; }
.field label { display:block; font-family:var(--ui); font-size:.85rem; font-weight:500;
  color:var(--maroon); margin-bottom:.4rem; }
.field .req { color:var(--turmeric-deep); }
.field input, .field textarea, .field select {
  width:100%; font-family:var(--ui); font-size:.98rem; padding:.85rem 1.15rem; color:var(--text);
  background:var(--bg-2); border:1px solid transparent; border-radius:100px; transition:all .18s; }
.field textarea { border-radius:var(--r-soft); min-height:112px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus {
  background:var(--card); border-color:var(--turmeric); outline:none; box-shadow:0 0 0 3px rgba(205,133,63,.16); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:620px){ .field-row { grid-template-columns:1fr; } }
.radio-set { display:flex; flex-wrap:wrap; gap:.55rem; }
.radio-set label { font-family:var(--ui); font-size:.88rem; padding:.55rem 1.1rem;
  border-radius:100px; background:var(--bg-2); cursor:pointer; margin:0; color:var(--text); transition:all .16s; }
.radio-set input { position:absolute; opacity:0; width:0; height:0; }
.radio-set label:has(input:checked) { background:var(--turmeric); color:var(--dark); font-weight:600; }
.form-status { margin-top:1rem; font-family:var(--ui); font-size:.93rem; padding:.85rem 1.15rem;
  border-radius:var(--r-soft); display:none; }
.form-status[data-state="ok"]  { display:block; background:rgba(37,211,102,.15); color:#0B3D1F; }
.form-status[data-state="err"] { display:block; background:rgba(108,49,46,.1); color:var(--maroon); }
.form-status[data-state="busy"]{ display:block; background:var(--bg-2); color:var(--muted); }

/* ------------------------------------------------------------ accordion */
.acc-item { border-bottom:1px solid rgba(108,49,46,.14); }
.acc-btn { width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--hand); font-weight:700; font-size:1.2rem; color:var(--maroon);
  padding:1.25rem 2.5rem 1.25rem 0; position:relative; }
.acc-btn::after { content:'+'; position:absolute; right:.3rem; top:50%; transform:translateY(-50%);
  font-size:1.6rem; color:var(--turmeric-deep); transition:transform .22s; }
.acc-btn[aria-expanded="true"]::after { transform:translateY(-50%) rotate(45deg); }
.acc-panel { display:none; padding-bottom:1.4rem; }
.acc-panel[data-open="true"] { display:block; }
.acc-panel p:last-child { margin-bottom:0; }

/* ---------------------------------------------------------- float + foot */
.wa-float { position:fixed; right:20px; bottom:20px; z-index:70; display:inline-flex;
  align-items:center; gap:.6rem; background:#25D366; color:#0B3D1F; padding:.9rem 1.3rem;
  border-radius:100px; text-decoration:none; font-family:var(--ui); font-weight:600; font-size:.93rem;
  box-shadow:0 12px 32px -10px rgba(37,211,102,.75); transition:transform .18s; }
.wa-float:hover { transform:scale(1.05); color:#08301A; }
.wa-float svg { width:22px; height:22px; flex:none; }
@media (max-width:520px){ .wa-float span{display:none;} .wa-float{padding:1rem;} }

.site-footer { background:var(--dark); color:rgba(253,251,247,.72); padding-block:clamp(3.5rem,7vw,5rem) 2rem;
  font-family:var(--ui); font-size:.93rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(1.8rem,4vw,3rem); margin-bottom:2.8rem; }
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.site-footer h4 { font-family:var(--hand); font-weight:700; color:var(--turmeric); font-size:1.2rem; margin-bottom:.9rem; }
.site-footer a { color:rgba(253,251,247,.75); text-decoration:none; }
.site-footer a:hover { color:var(--turmeric); }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom:.55rem; }
.footer-logo { width:92px; border-radius:50%; margin-bottom:1.1rem; }
.footer-bottom { border-top:1px solid rgba(253,251,247,.14); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem;
  color:rgba(253,251,247,.5); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} }

.page-head { padding-block:clamp(2.6rem,6vw,4.4rem) clamp(1.8rem,4vw,2.8rem); }
.notice { display:flex; gap:.9rem; align-items:flex-start; background:var(--bg-2);
  border-radius:var(--r-soft); padding:1.15rem 1.4rem; font-size:.94rem; }
.notice svg { width:21px; height:21px; flex:none; color:var(--turmeric-deep); margin-top:.2rem; }
.notice p { margin:0; }

/* ------------------------------------------------- the plate builder --- */
.plate-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:start; }
@media (max-width:900px){ .plate-wrap { grid-template-columns:1fr; } }
.plate-stage { position:sticky; top:96px; background:var(--card); border-radius:var(--r-card);
  padding:1.8rem; text-align:center; box-shadow:var(--shadow); }
@media (max-width:900px){ .plate-stage { position:static; } }
.plate-svg { width:min(100%,330px); margin:0 auto .9rem; display:block; }
.plate-slot-label { font-family:'Outfit',sans-serif; font-size:11px; fill:var(--muted); }
.plate-fill { transition:opacity .35s ease, transform .35s ease; transform-origin:center; }
.plate-fill[data-filled="false"]{ opacity:0; transform:scale(.7); }
.plate-fill[data-filled="true"] { opacity:1; transform:scale(1); }
.plate-summary { font-family:var(--hand); color:var(--maroon); font-size:1.12rem;
  min-height:3.4em; margin:0 0 1.1rem; max-width:none; }
.picker-group { margin-bottom:2rem; }
.picker-group h4 { font-family:var(--hand); font-weight:700; font-size:1.3rem;
  color:var(--maroon); margin:0 0 .15rem; }
.picker-hint { font-family:var(--ui); font-size:.87rem; color:var(--muted); margin:0 0 .9rem; }
.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chip { font-family:var(--ui); font-size:.89rem; padding:.55rem 1.15rem; border-radius:100px;
  cursor:pointer; border:none; background:var(--card); color:var(--text);
  box-shadow:var(--shadow); transition:all .16s ease; }
.chip:hover { transform:translateY(-2px); }
.chip[aria-pressed="true"]{ background:var(--turmeric); color:var(--dark); font-weight:600; }