:root{
  /* One measure ladder for the whole site. Before this there were thirteen
     different max-widths in this file and four more in the satellite sheet,
     so no two sections agreed on a line length. */
  --m-lede:60ch; --m-body:66ch; --m-narrow:46ch;

  /* Warm paper, not black. The elevation ladder and the metal gold survived the
     flip; everything that carried light on a dark ground had to be re-derived.
     Contrast figures are measured against --paper unless noted. */
  --paper:#F7F3E9; --paper2:#FFFCF4; --paper3:#EFE8D8; --paper4:#E8DFC9;
  --ink:#14110D;             /* 16.99:1 */
  --ink2:#4A443A;            /*  8.70:1 */
  --muted:#6E6659;           /*  5.11:1 — floor for small text */
  --amber:#7A5312;           /*  6.17:1 — links and accent TEXT */
  --amber-ui:#A9761F;        /*  3.58:1 — borders and non-text UI only */
  --amber-lt:#D9A441;        /*  decorative fills only, never text on paper */
  --gold:linear-gradient(135deg,#F9EDC6 0%,#E3B457 44%,#B07F22 100%);
  --gold-ink:linear-gradient(135deg,#A9761F 0%,#7A5312 58%,#5C3E0D 100%);
  --on-gold:#170F02;         /*  5.34:1 at the gradient's darkest stop */
  --line:rgba(20,17,13,.13); --line2:rgba(122,83,18,.34);
  --star:#B49A63;            /*  the sky marks, now drawn dark on light */
  --z-sky:-1; --z-base:1; --z-grain:2; --z-sweep:3; --z-head:60; --z-fab:80;
  --z-scrim:90; --z-drawer:100; --z-panel:110; --z-toast:130; --z-prog:200;
  --lift:0 1px 2px rgba(20,17,13,.04), 0 14px 32px -20px rgba(60,44,16,.32);
  --lift2:0 1px 2px rgba(20,17,13,.05), 0 26px 54px -24px rgba(60,44,16,.40);
  --good:#1E7A46;            /*  4.9:1 — the dark-theme mint fails on paper */
  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --body:'EB Garamond',Georgia,serif;
  --label:'Jura',ui-monospace,monospace;
  --sp:clamp(18px,4.2vw,32px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-duration:.01ms!important}.card:hover{transform:none}.card:hover .viz img{transform:none}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .72s ease-out,transform .72s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
:focus{outline:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;z-index:var(--z-prog);background:var(--amber);color:var(--paper);padding:12px 18px;font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
.lbl{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:12px}
.lbl::after{content:"";width:46px;height:1px;background:var(--gold);opacity:.75}

/* warm single-source light, no starfield, no purple */
/* ── the sky ──────────────────────────────────────────────────────────
   Astronomy as instrument, not as wallpaper: orbital rings, an ephemeris
   tick scale and a small number of deliberately placed stars. No nebula,
   no glitter, nothing scattered at random. */
.lightfield{position:fixed;inset:0;z-index:var(--z-sky);pointer-events:none;overflow:hidden}
.lightfield svg{position:absolute;left:50%;top:-16vh;width:min(1500px,150vw);
  height:min(1500px,150vw);transform:translateX(-50%);opacity:.30}
.orbits{transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .orbits{animation:wheel 260s linear infinite}
  .orbits-b{animation:wheel 420s linear infinite reverse}
}
@keyframes wheel{to{transform:rotate(360deg)}}
.stars circle{fill:var(--star)}
@media (prefers-reduced-motion:no-preference){
  .stars circle{animation:tw 7s ease-in-out infinite}
  .stars circle:nth-child(3n){animation-duration:11s;animation-delay:-3s}
  .stars circle:nth-child(4n){animation-duration:9s;animation-delay:-5s}
}
@keyframes tw{0%,100%{opacity:.28}50%{opacity:.9}}
.grainy{position:fixed;inset:0;z-index:var(--z-sky);pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── header ── */
header{position:sticky;top:0;z-index:var(--z-head);background:rgba(247,243,233,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{min-height:44px;display:flex;align-items:center;gap:11px}
.brand .mark{width:34px;height:34px;flex:0 0 auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
/* "White Magic" is 9 characters longer than the old wordmark and
   wrapped to three lines at 360px. nowrap plus a fluid size keeps it on one
   line from 320px up; the qualifier is not optional, so the type gives way. */
.brand .wm .n{font-family:var(--display);font-weight:500;font-size:19px;
  letter-spacing:0.09em;text-transform:uppercase;white-space:nowrap;display:block}
.brand .wm .s{font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--amber);margin-top:4px}
.navlinks{display:none;margin-left:auto;gap:22px;font-family:var(--label);font-size:12px;
  font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink2)}
.navlinks a.nvout{color:var(--amber);border-color:transparent}
.navlinks a.nvout:hover{border-color:var(--line2)}
.navlinks a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s,background-color .2s}
.navlinks a:hover{color:var(--amber);border-color:var(--line2)}
.navlinks a[aria-current="location"]{color:var(--amber);border-color:var(--amber)}
@media(min-width:1080px){.navlinks{display:flex}}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:9px}
@media(min-width:940px){.hdr-right{margin-left:0}}
.iconbtn{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:3px;
  border:1px solid var(--line);color:var(--ink2);transition:color .2s,border-color .2s,background-color .2s}
.iconbtn:hover{border-color:var(--line2);color:var(--amber)}
.cartbtn{position:relative;display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 17px;
  border:1px solid var(--line2);background:rgba(217,164,65,.08);font-family:var(--label);
  font-size:11.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  transition:color .2s,border-color .2s,background-color .2s}
.cartbtn:hover{background:rgba(217,164,65,.16)}
.cnt{min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;
  background:var(--amber);color:var(--paper);font-size:12px;font-weight:600;font-family:var(--label)}

/* thin announcement */
.announce{background:rgba(217,164,65,.09);border-bottom:1px solid var(--line);
  font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--amber);text-align:center;padding:9px 16px}
.announce a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  border-bottom:1px solid var(--line2)}

/* ── hero: left aligned, type in shadow ── */
/* one warm practical source, anchored top-left, for the whole page */
/* one warm practical source — and it follows the pointer, because a lamp does */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(760px 620px at var(--mx,26%) var(--my,12%),rgba(217,164,65,.20),transparent 64%),
  radial-gradient(1100px 780px at 84% 96%,rgba(169,122,38,.10),transparent 66%),
  linear-gradient(180deg,#FBF8F0 0%,#F7F3E9 46%,#F1EADC 100%);
  transition:background .9s cubic-bezier(.16,1,.3,1)}
/* Stacking context for the page bands. It must NOT touch the header: this
   rule sits after `header{position:sticky}`, matches with the same
   specificity, and therefore won every store page, silently demoting the
   header to position:relative. The cart button scrolled off the top of the
   page on exactly the five pages that have a cart, while the satellite
   pages (no cart, no store.css) stayed correctly sticky, which is why it
   read as a design choice rather than a bug. */
body>*:not(header){position:relative;z-index:var(--z-base)}
/* film grain — the thing that stops a dark screen reading as dead flat */
body::after{content:"";position:fixed;inset:-50%;z-index:var(--z-grain);pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){body::before{animation:breathe 19s ease-in-out infinite}}

/* ── scroll progress: a filament across the top ── */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:var(--z-prog);pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--gold);
  box-shadow:0 0 14px rgba(217,164,65,.55)}

/* ── section index numerals, set into the margin and overlapping ── */
.shead[data-n]::before{content:attr(data-n);position:absolute;left:-2px;top:-.52em;
  font-family:var(--display);font-size:clamp(88px,13vw,190px);line-height:1;font-weight:400;
  color:transparent;-webkit-text-stroke:1px rgba(122,83,18,.20);pointer-events:none;z-index:var(--z-sky);
  letter-spacing:-.04em}
@media(min-width:1080px){.shead[data-n]::before{left:-96px;top:-.34em}}

/* ── hero: words rise on their own timing ── */
.w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.4deg);
  transition:opacity .85s ease-out,transform .95s cubic-bezier(.16,1,.3,1)}
.w.up{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.w{opacity:1;transform:none}}

/* ── magnetic buttons ── */
.btn,.add{will-change:transform}
.mag{transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* ── gold sweep across a card on hover ── */
.card,.rit,.svc,.set{position:relative}
.card::after,.rit::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:var(--z-sweep);
  background:linear-gradient(105deg,transparent 38%,rgba(122,83,18,.07) 48%,transparent 58%);
  transform:translateX(-120%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.card:hover::after,.rit:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){.card::after,.rit::after{display:none}}

/* ── the ticker: practice names drifting past ── */

/* ── break the grid: not every card is the same height ── */
/* Break the even rhythm by DISPLACING cards, never by stretching them —
   the photographs are 512px square and cannot fill a taller box. */
@media(min-width:1060px){
  .grid .card:nth-child(4n+2){transform:translateY(30px)}
  .grid .card:nth-child(4n+3){transform:translateY(14px)}
  .grid .card:nth-child(4n+2):hover{transform:translateY(25px)}
  .grid .card:nth-child(4n+3):hover{transform:translateY(9px)}
  .grid{padding-bottom:34px}
}
@media(min-width:700px) and (max-width:1059px){
  .grid .card:nth-child(2n){transform:translateY(24px)}
  .grid .card:nth-child(2n):hover{transform:translateY(19px)}
  .grid{padding-bottom:28px}
}
@media(min-width:760px){
  .ladder .svc:nth-child(2){transform:translateY(26px)}
  .ladder .svc:nth-child(2):hover{transform:translateY(20px)}
  .rgrid .rit:nth-child(even){transform:translateY(34px)}
  .rgrid .rit:nth-child(even):hover{transform:translateY(28px)}
}
.hnote{font-size:14.5px;color:var(--muted);margin:26px 0 0;line-height:1.6}
.lede2b{color:var(--muted);font-size:16px;line-height:1.65;max-width:44ch;margin:16px 0 0}
.btn-quiet{background:transparent;border:1px solid transparent;color:var(--muted)}
.btn-quiet:hover{color:var(--ink2);border-color:var(--line)}
.announce .adim{color:var(--muted)}
/* three lines of shipping detail is a poor first impression on a phone */
@media(max-width:640px){.announce .adim{display:none}}

/* the promise, before anything is for sale */
.vow{padding:clamp(44px,6.5vw,82px) clamp(24px,4vw,56px);margin:0 0 8px;
  background:linear-gradient(168deg,var(--paper3),var(--paper2) 62%);
  border:1px solid var(--line);border-left:2px solid transparent;
  border-image:var(--gold) 1;border-right:0;border-top:0;border-bottom:0;
  box-shadow:var(--lift)}
.vow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)}
.vow h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,4.4vw,42px);
  margin:12px 0 0;line-height:1.12;letter-spacing:-.012em}
.vgrid{display:grid;grid-template-columns:1fr;gap:26px 44px;margin-top:38px}
@media(min-width:720px){.vgrid{grid-template-columns:1fr 1fr}}
.vgrid>div{display:flex;flex-direction:column;gap:8px;padding-left:20px;position:relative}
.vgrid>div::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border:1px solid var(--amber-ui);transform:rotate(45deg)}
.vgrid b{font-family:var(--display);font-size:21.5px;font-weight:500;letter-spacing:-.006em;
  color:var(--ink)}
.vgrid span{color:var(--ink2);font-size:15.5px;line-height:1.68;max-width:46ch}

.hero{padding:clamp(76px,13vw,150px) 0 clamp(48px,7vw,84px);min-height:78vh;
  display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px);align-items:center}
@media(min-width:960px){.hero{grid-template-columns:1.06fr .94fr}}
h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,9vw,96px);line-height:.98;
  letter-spacing:-.018em;margin:20px 0 0;max-width:13ch}
/* Gold-clipped text, on the element that actually HOLDS the glyphs.
   The headline word-splitter wraps each word in <span class="w">, including the
   word inside <em>. background-clip:text only paints the box's own background
   behind its own text — with the text one level down in a span that has no
   background of its own and inherits color:transparent, the word rendered as
   nothing. "long" was invisible in this headline in every build until now.
   The gradient is also darker than the button gold: #F9EDC6 does not exist on
   paper. This one runs 3.58:1 to 8.82:1. */
h1 em{font-style:italic;color:inherit;background:none}
h1 em .w, h1 em{background:var(--gold-ink);-webkit-background-clip:text;
  background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  h1 em, h1 em .w{color:var(--amber);background:none}}
.lede{color:var(--ink2);font-size:clamp(17px,2.1vw,20px);line-height:1.68;max-width:46ch;margin:22px 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:15px 28px;font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;border:1px solid transparent;
  transition:background-color .3s cubic-bezier(.16,1,.3,1),border-color .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1),filter .3s cubic-bezier(.16,1,.3,1),
             transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--gold);color:var(--on-gold);
  box-shadow:0 1px 0 rgba(255,251,236,.6) inset,var(--lift)}
.btn-amber:hover{background:var(--amber-lt);filter:brightness(1.07)}
.btn-line{border-color:var(--line2);color:var(--ink);background:rgba(20,17,13,.02)}
.btn-line:hover{background:rgba(122,83,18,.08)}
.btn-wa{background:#17803F;color:#fff}
.btn-wa:hover{background:#126832}
.hero-art{position:relative;min-height:300px;overflow:hidden;border:1px solid var(--line)}
.hero-art img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block}
.hero-art figcaption{position:absolute;left:0;right:0;bottom:0;padding:54px 20px 15px;
  font-family:var(--label);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink2);
  background:linear-gradient(to top,rgba(247,243,233,.97) 0%,rgba(247,243,233,.86) 45%,transparent 100%)}
.hero-art::after{content:"";position:absolute;inset:8% 6%;z-index:var(--z-sky);
  background:radial-gradient(circle at 46% 40%,rgba(217,164,65,.20),transparent 66%)}

/* ── proof bar ── */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof div{padding:22px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:820px){.proof div{border-bottom:0}.proof div:last-child{border-right:0}}
.proof div:nth-child(2n){border-right:0}
@media(min-width:820px){.proof div:nth-child(2n){border-right:1px solid var(--line)}}
.proof .h{display:flex;align-items:center;gap:9px;font-family:var(--label);font-size:12px;
  font-weight:600;letter-spacing:0.15em;text-transform:uppercase}
.proof .h svg{color:var(--amber);flex:0 0 auto}
.proof .d{color:var(--muted);font-size:14.5px;margin-top:7px;line-height:1.5}

section{padding:clamp(64px,9vw,116px) 0}
.shead{position:relative;max-width:60ch;margin-bottom:46px}
.ritmore{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;align-self:flex-start}
.ritmore:hover{color:var(--amber);border-color:var(--line2)}
.rdev{font-family:var(--body);font-size:15px;color:var(--amber);opacity:.82;margin-top:5px;line-height:1.5}
.shead p.hindi{font-size:16px;color:var(--muted);margin-top:12px}
.shead h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.6vw,58px);
  line-height:1.1;letter-spacing:-.014em;margin:13px 0 0}
.shead p{color:var(--ink2);font-size:17px;margin:16px 0 0;line-height:1.7}

/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 16px;margin-bottom:24px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:44px;padding:11px 20px;border:1px solid var(--line);
  background:transparent;font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink2);white-space:nowrap;
  transition:color .2s,border-color .2s,background-color .2s}
.chip:hover{border-color:var(--line2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--paper)}

/* services ladder */
.ladder{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
@media(min-width:760px){.ladder{grid-template-columns:repeat(3,1fr)}}
.svc{border:1px solid var(--line);background:var(--paper2);padding:26px 24px 24px;
  display:flex;flex-direction:column;position:relative;box-shadow:var(--lift);
  transition:.45s cubic-bezier(.16,1,.3,1)}
.svc:hover{border-color:var(--line2);background:var(--paper3);transform:translateY(-4px);
  box-shadow:var(--lift2)}
.svc.hi{border-color:var(--amber-ui);background:linear-gradient(168deg,rgba(217,164,65,.10),var(--paper2) 62%)}
.svc .rule{width:34px;height:2px;background:var(--amber);margin-bottom:16px}
.svc h3{font-family:var(--display);font-size:23px;font-weight:500;margin:0 0 5px;line-height:1.15}
.svc .si{font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:13px}
.svc .sd{color:var(--ink2);font-size:15.5px;line-height:1.62;flex:1;margin:0}
.svc ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px}
.svc li{font-size:14px;color:var(--muted);line-height:1.5;padding-left:16px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border:1px solid var(--amber-ui);transform:rotate(45deg)}
.svc .sp{font-family:var(--display);font-size:29px;font-weight:500;margin:20px 0 2px}
.svc .sn{font-family:var(--body);font-size:13.5px;letter-spacing:0;
  color:var(--muted);margin-bottom:16px}
.svcflag{position:absolute;top:0;right:0;background:var(--amber);color:var(--paper);font-family:var(--label);
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;padding:6px 12px}
.ladstep{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:22px 0 0;
  font-family:var(--label);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.ladstep b{color:var(--ink2);font-weight:500}
.ladstep span{color:var(--amber)}
.privacy-note{margin:26px 0 0;padding:16px 18px;border-left:2px solid var(--amber-ui);
  background:rgba(217,164,65,.05);font-size:14.5px;color:var(--ink2);line-height:1.65;max-width:68ch}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:1060px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);background:var(--paper2);display:flex;flex-direction:column;
  box-shadow:var(--lift);
  transition:border-color .4s,transform .55s cubic-bezier(.16,1,.3,1),box-shadow .5s,background .4s}
.card .viz{aspect-ratio:1;position:relative;overflow:hidden;background:var(--paper3);
  border-bottom:1px solid var(--line)}
.card .viz::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 46px 4px rgba(60,44,16,.09)}
.card .viz img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.card:hover{border-color:var(--line2);transform:translateY(-5px);background:var(--paper3);
  box-shadow:var(--lift2)}
.tag{position:absolute;top:11px;left:11px;font-family:var(--label);font-size:11px;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);
  background:rgba(255,252,244,.88);color:var(--ink2)}
.card .body{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--display);font-size:19px;font-weight:500;margin:0;letter-spacing:-.005em}
.card .int{font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--muted);margin-top:6px;min-height:2.4em;line-height:1.5}
.card .price{font-family:var(--display);font-size:27px;font-weight:500;letter-spacing:-.01em}
.lsvc{width:100%;height:100%;display:grid;place-items:center;background:rgba(217,164,65,.07);
  border:1px solid var(--line);font-family:var(--label);font-size:11.5px;font-weight:600;
  letter-spacing:0.14em;color:var(--amber)}
.card .spec{font-family:var(--label);font-size:11.5px;letter-spacing:0.10em;color:var(--muted);
  margin-top:7px;text-transform:uppercase}
.prow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:10px}
.mrp{font-size:14px;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.ssave{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.planets{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.planets button{border:1px solid var(--line);background:transparent;color:var(--ink2);
  font-family:var(--label);font-size:12px;letter-spacing:0.13em;text-transform:uppercase;
  padding:9px 14px;min-height:44px;transition:color .2s,border-color .2s,background-color .2s}
.planets button:hover{border-color:var(--amber);color:var(--amber)}
.planets button b{color:var(--muted);font-weight:400;margin-left:7px;text-transform:none;letter-spacing:0;
  font-family:var(--body);font-size:13px}
.parent{border:1px solid var(--line2);padding:clamp(30px,4.8vw,56px);box-shadow:var(--lift2);
  background:linear-gradient(150deg,rgba(217,164,65,.20),var(--paper4) 52%,var(--paper2))}
.ptop{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media(min-width:900px){.ptop{grid-template-columns:1.5fr auto}}
.parent h2{font-family:var(--display);font-weight:400;font-size:clamp(27px,4.2vw,40px);
  margin:12px 0 0;line-height:1.14}
.parent p{color:var(--ink2);margin:15px 0 0;font-size:16.5px;line-height:1.68;max-width:56ch}
.parent .ptag{font-family:var(--display);font-size:19px;color:var(--amber);font-style:italic;
  margin-top:18px}
.pcta{display:flex;flex-direction:column;gap:10px;min-width:220px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:32px;
  background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.pgrid{grid-template-columns:repeat(5,1fr)}}
.pcell{background:var(--paper);padding:20px 18px 22px;min-height:108px;
  transition:background-color .4s,border-color .4s,transform .4s}
.pcell:hover{background:var(--paper3)}
.pcell b{display:block;font-family:var(--display);font-size:17.5px;font-weight:500;margin-bottom:5px}
.pcell span{font-size:13.5px;color:var(--muted);line-height:1.5}
.pnote2{font-size:14px;color:var(--muted);margin:22px 0 0;max-width:62ch;line-height:1.65}
.benediction{padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px);text-align:center;
  border-top:1px solid var(--line)}
.benediction p{font-family:var(--display);font-size:clamp(19px,2.6vw,25px);line-height:1.55;
  color:var(--ink2);max-width:34ch;margin:0 auto;font-style:italic;letter-spacing:-.004em}
.fmeta{color:var(--muted);font-size:13.5px;line-height:1.8;margin:14px 0 0}
.fmeta a{color:var(--ink2)}
.rgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:700px){.rgrid{grid-template-columns:1fr 1fr}}
.rit{position:relative;border:1px solid var(--line);background:
  linear-gradient(168deg,rgba(224,179,86,.07),var(--paper2) 58%);
  padding:28px 26px 26px;display:flex;flex-direction:column;box-shadow:var(--lift);
  transition:.45s cubic-bezier(.16,1,.3,1);overflow:hidden}
.rit:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:var(--lift2)}
.rit .moons{display:flex;gap:7px;margin-bottom:18px}
.rit .moons i{width:9px;height:9px;border-radius:50%;border:1px solid var(--amber-ui);display:block}
.rit .moons i:nth-child(1){background:transparent}
.rit .moons i:nth-child(2){background:linear-gradient(90deg,transparent 50%,var(--amber) 50%)}
.rit .moons i:nth-child(3){background:var(--amber)}
.rit .moons i:nth-child(4){background:linear-gradient(90deg,var(--amber) 50%,transparent 50%)}
.rit .moons i:nth-child(5){background:transparent}
.rit .ri{font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:11px}
.rit h3{font-family:var(--display);font-size:27px;font-weight:500;margin:0 0 10px;line-height:1.12}
.rit .rd{color:var(--ink2);font-size:15.5px;line-height:1.68;margin:0;flex:1}
.rit ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.rit li{font-size:14px;color:var(--muted);line-height:1.55;padding-left:18px;position:relative}
.rit li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.rit .rfoot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:22px 0 16px;flex-wrap:wrap}
.rit .rp{font-family:var(--display);font-size:31px;font-weight:500;letter-spacing:-.01em}
.rit .rdays{font-family:var(--label);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.rlegal{font-size:14px;color:var(--muted);line-height:1.68;max-width:70ch;margin:30px 0 0;
  padding-left:18px;border-left:1px solid var(--line2)}
.pnote{font-size:14px;color:var(--muted);margin:20px 0 0;max-width:62ch;line-height:1.7}
.pnote em{font-style:italic;color:var(--ink2)}
.opennote{border:1px dashed var(--line2);padding:18px 20px;margin:0 0 26px;
  font-size:15px;line-height:1.65;color:var(--ink2);background:rgba(217,164,65,.045)}
.opennote b{color:var(--amber);font-weight:400;font-family:var(--display);font-size:17px}
.addr{color:var(--ink2);font-size:14.5px;line-height:1.75;font-style:normal}
.addr a{display:inline-flex;align-items:center;min-height:44px}
.addr .hrs{color:var(--muted);font-size:13.5px}
.add{margin-top:15px;min-height:46px;border:1px solid var(--line);background:transparent;
  color:var(--ink2);font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;transition:.34s cubic-bezier(.16,1,.3,1)}
.add:hover{background:var(--gold);color:var(--on-gold);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,251,236,.55) inset,var(--lift)}
.add.done{background:var(--good);border-color:var(--good);color:#FFFFFF}

/* sets */
.sets{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.sets{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.sets{grid-template-columns:repeat(3,1fr)}}
.set{border:1px solid var(--line);background:var(--paper2);display:flex;flex-direction:column;
  position:relative;box-shadow:var(--lift);transition:.45s cubic-bezier(.16,1,.3,1)}
.set:hover{border-color:var(--line2);background:var(--paper3);transform:translateY(-4px);
  box-shadow:var(--lift2)}
.set.hi{border-color:var(--line2);background:linear-gradient(170deg,rgba(217,164,65,.09),var(--paper2) 60%)}
.set .sviz{height:210px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper3)}
.set .sviz img{width:100%;height:100%;object-fit:cover;display:block}
.set .sb{padding:22px;display:flex;flex-direction:column;flex:1}
.set h3{font-family:var(--display);font-size:24px;font-weight:500;margin:0 0 4px}
.set .occ{font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:11px}
.set .sd{color:var(--ink2);font-size:15.5px;line-height:1.62;flex:1}
.set .contains{font-family:var(--label);font-size:12px;letter-spacing:0.09em;color:var(--muted);
  margin-top:13px;line-height:1.7;text-transform:uppercase}
.set .sp{font-family:var(--display);font-size:27px;font-weight:500;margin:15px 0 3px}
.set .sfree{font-family:var(--label);font-size:11.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--good);margin-bottom:16px}
.flag{position:absolute;top:0;right:0;background:var(--amber);color:var(--paper);font-family:var(--label);
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;padding:6px 12px;z-index:var(--z-grain)}

/* kit feature */
.kit{border:1px solid var(--line2);display:grid;grid-template-columns:1fr;overflow:hidden;
  box-shadow:var(--lift2);
  background:linear-gradient(160deg,rgba(217,164,65,.22),var(--paper4) 54%,var(--paper2))}
@media(min-width:920px){.kit{grid-template-columns:1.02fr .98fr}}
.kit .txt{padding:clamp(28px,4.6vw,52px)}
.kit h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.7vw,46px);margin:14px 0 0;line-height:1.1}
.kit .lede2{color:var(--ink2);margin:18px 0 0;font-size:17px;line-height:1.72}
.kit ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.kit li{display:flex;gap:12px;font-size:16px;color:var(--ink2);align-items:flex-start;line-height:1.55}
.kit li svg{flex:0 0 auto;margin-top:5px;color:var(--amber)}
.kitp{display:flex;align-items:baseline;gap:14px;margin:28px 0 18px;flex-wrap:wrap}
.kitp b{font-family:var(--display);font-size:34px;font-weight:500}
.kitp span{font-family:var(--label);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:var(--good)}
.kit .kviz{min-height:300px;overflow:hidden;background:var(--paper3);position:relative}
.kit .kviz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* steps */
.steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:30px 26px 30px 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){.step{border-bottom:0;border-right:1px solid var(--line);padding:32px 30px}
  .step:first-child{padding-left:0}.step:last-child{border-right:0}}
.step .num{font-family:var(--display);font-size:15px;color:var(--amber);letter-spacing:0.10em}
.step h3{font-family:var(--display);font-size:22px;font-weight:500;margin:12px 0 9px}
.step p{color:var(--ink2);font-size:15.5px;margin:0;line-height:1.65}

/* trust panel */
.trustpanel{border:1px solid var(--line);background:var(--paper2);
  display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:860px){.trustpanel{grid-template-columns:repeat(3,1fr)}}
.tp{padding:30px 26px;border-bottom:1px solid var(--line)}
@media(min-width:860px){.tp{border-bottom:0;border-right:1px solid var(--line)}.tp:last-child{border-right:0}}
.tp:last-child{border-bottom:0}
.tp svg{color:var(--amber);margin-bottom:14px}
.tp h3{font-family:var(--display);font-size:21px;font-weight:500;margin:0 0 9px}
.tp p{color:var(--ink2);font-size:15px;margin:0;line-height:1.62}

/* wellness band */
.wband{border:1px solid var(--line2);padding:clamp(30px,5vw,54px);
  background:linear-gradient(135deg,rgba(217,164,65,.11),transparent 70%);
  display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:860px){.wband{grid-template-columns:1.4fr auto}}
.wband h2{font-family:var(--display);font-weight:400;font-size:clamp(27px,4.2vw,40px);margin:12px 0 0;line-height:1.14}
.wband p{color:var(--ink2);margin:15px 0 0;font-size:16.5px;line-height:1.68;max-width:52ch}

/* faq */
.faq{max-width:820px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{padding:22px 0;font-family:var(--display);font-weight:500;font-size:20px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--amber);font-size:24px;font-weight:400;flex:0 0 auto;transition:transform .22s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 0 22px;color:var(--ink2);font-size:16.5px;line-height:1.72;max-width:70ch;margin:0}

/* footer */
footer{border-top:1px solid var(--line);padding:52px 0 36px;background:var(--paper3)}
.fgrid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:820px){.fgrid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.fgrid h3{font-family:var(--label);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--amber);margin:0 0 16px;font-weight:600}
.fgrid ul{list-style:none;padding:0;margin:0}
.fgrid li{margin-bottom:2px}
.fgrid li a{display:inline-flex;align-items:center;min-height:44px}
.fgrid li button{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.fgrid a{color:var(--ink2);font-size:15.5px}
.fgrid a:hover{color:var(--amber)}
.legal{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.75;max-width:86ch}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(30,22,8,.42);z-index:var(--z-scrim);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:var(--z-drawer);background:var(--paper2);
  border-left:1px solid var(--line2);display:flex;flex-direction:column;transform:translateX(101%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom)}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}
.dhead h2{font-family:var(--display);font-weight:500;font-size:24px;margin:0}
.ditems{flex:1;overflow-y:auto;padding:16px 22px;display:grid;gap:12px;align-content:start}
.empty{text-align:center;color:var(--muted);padding:64px 20px;font-size:16px;line-height:1.7}
.li{display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center;
  border:1px solid var(--line);padding:12px;background:var(--paper2)}
.li .lv{width:54px;height:54px;display:grid;place-items:center;background:var(--paper3);overflow:hidden}
.li .lv svg{width:100%;height:100%}
.li .ln{font-family:var(--display);font-size:16px;font-weight:500;line-height:1.25}
.li .lp{font-family:var(--label);font-size:12px;letter-spacing:0.10em;color:var(--muted);margin-top:4px;text-transform:uppercase}
.qty{display:flex;align-items:center;border:1px solid var(--line)}
.qty button{width:34px;height:36px;color:var(--ink2);font-size:17px}
.qty button:hover{background:rgba(217,164,65,.12);color:var(--amber)}
.qty span{min-width:26px;text-align:center;font-family:var(--label);font-size:13px;font-weight:600}
.dfoot{border-top:1px solid var(--line);padding:20px 22px;display:grid;gap:10px}
.row{display:flex;justify-content:space-between;font-size:15.5px;color:var(--ink2)}
.row.tot{font-family:var(--display);font-size:22px;font-weight:500;color:var(--ink);
  padding-top:12px;border-top:1px solid var(--line);margin-top:5px}
.shipnote{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--amber);text-align:center;padding:11px;border:1px solid var(--line2);background:rgba(217,164,65,.07)}
.dfoot .btn{width:100%}
.fine{font-size:13px;color:var(--muted);text-align:center;line-height:1.6}

/* toast */
/* translate(-220%) is relative to the element's own height, so a short empty
   toast never travelled far enough to leave the screen. Hide it outright. */
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-14px);z-index:var(--z-toast);background:var(--ink);
  color:var(--paper);box-shadow:var(--lift2);
  border:1px solid var(--ink);padding:14px 26px;font-family:var(--label);font-size:11.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease,visibility 0s linear .3s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s,0s,0s}
@media(min-width:760px){.toast{top:auto;bottom:28px;transform:translate(-50%,14px)}
  .toast.on{transform:translate(-50%,0)}}

/* ── guide / chatbot ── */
/* the assistant offers help; it does not demand attention */
.guidebtn{position:fixed;right:18px;bottom:18px;z-index:var(--z-fab);display:flex;align-items:center;gap:10px;
  min-height:52px;padding:14px 20px;background:rgba(255,252,244,.94);backdrop-filter:blur(8px);
  border:1px solid var(--line2);color:var(--ink2);font-family:var(--label);
  font-size:11.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  box-shadow:var(--lift2);transition:.32s cubic-bezier(.16,1,.3,1)}
.guidebtn:hover{border-color:var(--amber-ui);color:var(--amber)}
.guidebtn svg{color:var(--amber)}
.guidebtn.hide{opacity:0;pointer-events:none;transform:translateY(12px)}
.guide{position:fixed;right:0;bottom:0;z-index:var(--z-panel);width:min(400px,100%);height:min(620px,88vh);
  background:var(--paper2);border:1px solid var(--line2);display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .36s cubic-bezier(.32,.72,0,1);
  padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:640px){.guide{right:18px;bottom:18px}}
.guide.on{transform:none}
.ghead{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,rgba(217,164,65,.13),transparent)}
.ghead .gm{width:32px;height:32px;flex:0 0 auto}
.ghead .gt{flex:1;min-width:0}
.ghead .gt b{display:block;font-family:var(--display);font-size:17px;font-weight:500}
.ghead .gt i{display:block;font-family:var(--label);font-size:11px;font-style:normal;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--good);margin-top:3px}
.ghead .gt i::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);margin-right:6px;vertical-align:middle}
.gbody{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:13px 16px;font-size:15.5px;line-height:1.6}
.msg.bot{background:var(--paper2);border:1px solid var(--line);align-self:flex-start}
.msg.you{background:rgba(217,164,65,.14);border:1px solid var(--line2);align-self:flex-end;color:var(--ink)}
.msg b{color:var(--amber);font-weight:600}
.gchips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.gchip{border:1px solid var(--line2);padding:9px 14px;min-height:40px;font-family:var(--label);
  font-size:12px;font-weight:600;letter-spacing:0.11em;text-transform:uppercase;color:var(--amber);
  background:rgba(217,164,65,.06);transition:color .2s,border-color .2s,background-color .2s}
.gchip:hover{background:var(--amber);color:var(--paper)}
.gform{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.gform input{flex:1;min-height:46px;background:var(--paper2);border:1px solid var(--line);
  color:var(--ink);padding:12px 14px;font:inherit;font-size:15.5px}
.gform input::placeholder{color:var(--muted)}
.gform input:focus{outline:none;border-color:var(--line2)}
.gform button{min-width:46px;min-height:46px;background:var(--amber);color:var(--paper);display:grid;place-items:center}
.typing{display:flex;gap:4px;padding:15px 16px;background:var(--paper2);border:1px solid var(--line);align-self:flex-start}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── the home page's four doors ── */
.doorgrid{display:grid;gap:14px}
@media(min-width:760px){.doorgrid{grid-template-columns:repeat(2,1fr)}}
.door{position:relative;display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);background:var(--paper2);padding:26px 26px 24px;
  box-shadow:var(--lift);overflow:hidden;
  transition:border-color .35s,background-color .35s,box-shadow .45s,transform .45s cubic-bezier(.16,1,.3,1)}
.door:hover{border-color:var(--line2);background:#fff;box-shadow:var(--lift2);transform:translateY(-3px)}
.door .dn{position:absolute;right:16px;top:6px;font-family:var(--display);
  font-size:62px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(122,83,18,.20);
  pointer-events:none}
.door b{font-family:var(--display);font-weight:500;font-size:23px;letter-spacing:-.008em;
  max-width:22ch}
.door .dd{color:var(--ink2);font-size:16.5px;line-height:1.6;max-width:44ch}
.door .dgo{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--amber);margin-top:6px}

/* ── segment page heading ── */
.phead{max-width:66ch;padding:34px 0 4px}
.phead h1{font-family:var(--display);font-weight:400;font-size:clamp(33px,5.6vw,54px);
  line-height:1.08;letter-spacing:-.018em;margin:14px 0 0}
.phead .lede{color:var(--ink2);font-size:19px;line-height:1.7;margin:18px 0 0;max-width:var(--m-lede)}


/* ── Product detail pages (/stones/<slug>/) ──────────────────────────────────
   Two columns on a wide screen, stacked on a phone, image first either way.
   Colours are the existing tokens only, so contrast is inherited rather than
   re-argued: .pbody uses --ink2 (8.70:1 on paper), .pdpspec uses --ink2 too,
   and the buy column sits on --paper2 with the same hairline as .trustpanel. */
.pdp{display:grid;grid-template-columns:1fr;gap:26px;align-items:start;margin-top:8px}
.pdpviz{border:1px solid var(--line);background:var(--paper3);overflow:hidden;aspect-ratio:1}
.pdpviz img{width:100%;height:100%;object-fit:cover;display:block}
.pdpbuy{border:1px solid var(--line);background:var(--paper2);padding:24px}
.pdpbuy .int{font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.pdpbuy .prow{margin-top:12px}
.pdpbuy .price{font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:-.01em}
.pdpbuy .tag{font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--line2);padding:3px 8px}
.pdpbuy .add{margin-top:20px;width:100%}
.pdpspec{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line)}
.pdpspec li{color:var(--ink2);font-size:15px;line-height:1.6;padding:11px 0;
  border-bottom:1px solid var(--line);max-width:none}
.pbody{color:var(--ink2);max-width:var(--m-body);font-size:19px;line-height:1.75;margin:0}
#pdp .shead{margin-bottom:14px}
#pdp .cta-row .add{width:auto}
@media(min-width:820px){
  .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .pdpviz{position:sticky;top:96px}
}

/* The card image is a link now; it must not pick up the underline or the amber
   that .card a inherits from body copy, and the title link keeps the card's own
   colour so the grid still reads as a grid. */
.card .cardlink{display:block;color:inherit;text-decoration:none}
.card .body h3 a{color:inherit;text-decoration:none;background:none}
.card .body h3 a:hover,.card .body h3 a:focus-visible{text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* WCAG 2.5.8 target size. The breadcrumb link and the card title link were both
   under 24px tall. Padding raises the hit area without changing the type size or
   the grid rhythm. The links inside running prose (.pnote, .lede2) are left
   alone — the success criterion exempts targets inline in a sentence. */
.crumb a{display:inline-block;padding:5px 0}
.card .body h3 a{display:block;padding:2px 0}

/* The one-line "who picks this" under the product lede, and its shorter twin on
   the grid card. --ink2 is 8.70:1 on paper; it sits between the lede and the buy
   column without competing with either. */
.phead .pwho{color:var(--ink2);font-size:19px;line-height:1.7;margin:12px 0 0;max-width:var(--m-lede)}
.card .body .who{color:var(--ink2);font-size:14.5px;line-height:1.55;margin:7px 0 0}

/* The card body is already a flex column, but nothing claimed the slack, so a
   two-line intention tag or a three-line "who" pushed the price and button
   down and the row stopped lining up. Pushing the price block to the bottom
   makes every Add button in a row sit on the same line regardless of how much
   text is above it. */
.card .body .who{flex:1}
.card .body .prow{margin-top:14px}
.card .body .add{margin-top:12px}

/* .tag is position:absolute because on a grid card it pins to the corner of
   .viz. Reused inside the product page's price row it had no positioned
   ancestor, so it escaped to the top-left of the page and sat on top of the
   breadcrumb. Static here, inline with the price where it belongs. */
.pdpbuy .tag{position:static;padding:4px 8px;background:var(--paper3);
  border-color:var(--line2);color:var(--amber);white-space:nowrap}


/* ── The nine grahas ──────────────────────────────────────────────────────
   A medallion carries the Devanagari name; selecting one opens a panel with the
   uparatna we stock for that graha. Tap-driven, not hover: on a phone there is
   no hover, and a control that only reveals its content to a mouse is a control
   half the traffic cannot use. Contrast: .gk is --ink (16.99:1), .gen and .gd
   are --ink2 (8.70:1), the selected rim is --amber-ui, which is a non-text UI
   colour and only ever used as a border here. */
.planets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
@media(min-width:620px){.planets{grid-template-columns:repeat(5,1fr)}}
@media(min-width:980px){.planets{grid-template-columns:repeat(9,1fr)}}
.planets button.graha{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:1px solid var(--line);background:var(--paper2);padding:14px 6px 12px;
  min-height:96px;text-transform:none;letter-spacing:0;
  transition:border-color .2s,background-color .2s,transform .2s}
.planets button.graha:hover{border-color:var(--amber-ui);transform:translateY(-2px)}
.planets button.graha.on{border-color:var(--amber-ui);background:var(--paper3);
  box-shadow:inset 0 0 0 1px var(--amber-ui)}
.graha .gdev{font-family:var(--body);font-size:21px;line-height:1.15;color:var(--amber);
  display:block}
.graha .gk{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.graha .gen{font-family:var(--body);font-size:12.5px;color:var(--ink2)}

.grahadetail{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px;
  border:1px solid var(--line);background:var(--paper2);padding:20px}
@media(min-width:700px){.grahadetail{grid-template-columns:190px 1fr;gap:26px;align-items:start}}
.grahadetail .gviz{border:1px solid var(--line);background:var(--paper3);aspect-ratio:1;
  overflow:hidden;max-width:190px}
.grahadetail .gviz img{width:100%;height:100%;object-fit:cover;display:block}
.grahadetail .glbl{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0}
.grahadetail h3{font-family:var(--display);font-weight:500;font-size:24px;margin:6px 0 0}
.grahadetail .gd{color:var(--ink2);font-size:16.5px;line-height:1.65;margin:10px 0 0;
  max-width:60ch}
.gcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.gcta .btn{min-height:44px;display:inline-flex;align-items:center}


/* ── Door tiles ───────────────────────────────────────────────────────────
   The homepage carried exactly one photograph, which is why it read as a wall
   of type. Each door now leads with an image. Three use real product
   photography; the puja door uses a drawn diya mark rather than a generated
   photograph, because a synthetic picture of a rite on a page whose whole
   promise is "we film the actual rite" would be the one dishonest image on
   the site. */
.door{padding-top:0!important;overflow:hidden}
.door .dviz{display:block;margin:-1px -1px 14px;aspect-ratio:16/9;overflow:hidden;
  background:var(--paper3);border-bottom:1px solid var(--line)}
.door .dviz img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.door:hover .dviz img{transform:scale(1.04)}
.door .dviz-art{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--paper2) 0%,var(--paper3) 60%,var(--paper4) 100%)}
.door .dviz-art svg{width:96px;height:96px}
.door .dn{top:auto;bottom:14px;right:16px}
.door>b,.door>.dd,.door>.dgo{padding-left:18px;padding-right:18px}
.door>.dgo{padding-bottom:18px}


/* The "Part of White Magic" band was the only section on the homepage with no
   image at all. A photograph rather than a graphic, and a caption rather than
   text laid over the picture: type on a photograph is where contrast quietly
   fails, and this palette has no colour that clears 4.5:1 against warm paper
   at every pixel of an image. */
.pviz{margin:30px 0 0;border:1px solid var(--line)}
.pviz img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.pviz figcaption{font-family:var(--label);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:var(--paper2);
  padding:11px 14px;border-top:1px solid var(--line);line-height:1.55}
@media(min-width:820px){
  .pviz{display:grid;grid-template-columns:1fr;max-width:520px}
}


/* Set-based pairings and the returns panel on a product page. */
.pairs{list-style:none;padding:0;margin:18px 0 0;max-width:var(--m-body)}
.pairs li{border:1px solid var(--line);background:var(--paper2);padding:14px 16px;margin:0 0 10px}
.pairs li b{font-family:var(--display);font-weight:500;font-size:19px;margin-right:8px}
.pairs li span{display:block;color:var(--ink2);font-size:16px;line-height:1.6;margin-top:5px}
.pret{border-top:1px solid var(--line);margin:16px 0 0;padding-top:14px;color:var(--ink2);
  font-size:15px;line-height:1.62}
.pret b{color:var(--ink)}

/* The stone names inside a pairing are links in a sentence, but at 17px tall
   they were the smallest targets on the page. Padding lifts the hit area to
   24px without moving the line. */
.pairs li span a{display:inline-block;padding:4px 0}

/* The header is sticky again, so anything an in-page link jumps to has to stop
   clear of it. Without this, every #anchor lands with its heading tucked under
   the bar. */
:target,section[id],h2[id],h3[id],[id]{scroll-margin-top:88px}