:root{
/* Kesari Dawn — saffron, turmeric, sandalwood */
--void:#FFFFFF; /* white — page surface */
--void2:#FBF6EC; /* chandan — tiles, panels, menus */
--chalk:#3D1F14; /* rakta chandan — primary text */
--dim:#6B4F3D; /* secondary text */
--faint:#E3D5BB; /* hairlines */
--amber:#B85321; /* kesari — accent, text-safe on cream */
--amber-dim:#95431B; /* haldi-deep — borders, secondary */
--haldi:#E8B33C; /* turmeric — decorative fills only */
--tulsi:#1E6B45; /* favourable */
--alert:#A83A1E; /* caution */
--edge:#948055; /* form-control borders — 3.83:1 on white, 3.56:1 on cream */
--r:5px; /* corner radius, sitewide */
/* ---------- The logo, measured from the file ----------
Sampled from the mark itself, not matched by eye. These two are the
brand and they never change with the theme — the emblem must look the
same everywhere or it stops being a logo.
They are for the MARK ONLY. Neither is safe as text: the blue is
3.19:1 on white, well under the 4.5:1 that readable body text needs.
The themes below carry darkened and lightened versions for that. */
/* Text that sits ON a filled control — button, chosen slot, badge.
Six rules were each hard-coding this and each getting it wrong in
one theme or another: cream on a light gold is 1.83:1, white on a
pale green is 1.90:1. One token, decided per palette, verified. */
--on-fill:#FFFFFF;
/* Hover moves the accent AWAY from the surface — darker on a light
page, lighter on a dark one. The tinted hover background costs
about 0.4 of contrast, which was enough to drop four controls
under 4.5:1 in three themes. Direction has to flip per theme,
which is why this cannot be one shared value. */
--amber-hover:#A74B1E;
/* Placeholder text, deliberately faint.
It sits at 3:1 rather than the 4.5:1 text normally needs, and that is
only defensible because EVERY field on this site has a permanent
visible label. The placeholder is a specimen answer, not the label —
nothing is lost if it is hard to read, because the label above it
never disappears.
tools/label-check.py enforces that condition. If a field ever ships
without a label, the check fails and this value has to go back up. */
--hint:#AC866E;
--brand-blue:#0698E1;
--brand-red:#E11B25;
color-scheme:light;
--max:1080px;
--serif:'Fraunces',Georgia,'Times New Roman',serif;
--sans:'Inter','Noto Sans','Noto Sans Devanagari','Noto Sans Gujarati','Noto Sans Bengali','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Malayalam','Noto Sans Gurmukhi',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;
/* Always reserve the scrollbar. Without this a short page (privacy, a
product) is 15px wider than a long one and the whole centred header
shifts as you move between them. */
scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){ html{overflow-y:scroll} }
body{
font-family:var(--sans);color:var(--chalk);background:var(--void);
line-height:1.7;font-size:16px;font-weight:400;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
/* keyboard focus — was entirely missing (WCAG 2.4.7) */
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible{outline-offset:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
/* Was #7F6D5B, fixed — 3.11:1 on the dark themes, under the 4.5:1
placeholder text needs. --dim is set per palette and never
drops below 5.88:1. */
::placeholder{color:var(--hint);opacity:1}
/* Display type — the whole personality lives here */
h1,h2,h3,.display{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.25rem;line-height:1.3;font-weight:500}
em{font-style:italic;color:var(--amber)}
/* Eyebrow label — tiny, tracked-out, used instead of badges */
.eyebrow{
font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--dim);font-weight:400;display:block;
}
.eyebrow.amber{color:var(--amber)}
.sec{padding:130px 0;position:relative}
.sec-head{margin-bottom:70px;max-width:660px}
.sec-head h2{margin-top:18px}
.sec-head p{color:var(--dim);margin-top:22px;font-size:1.02rem;max-width:520px}
hr.hair{border:0;border-top:1.5px solid var(--faint)}
/* ---------- Starfield ---------- */
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16}
/* ---------- Top bar ---------- */
.topbar{font-size:.82rem;letter-spacing:.06em;padding:14px 0;color:var(--dim)}
.topbar .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.topbar a:hover{color:var(--amber)}
/* ---------- Language switcher ---------- */
.langbox{position:relative}
.langbtn{
background:none;color:var(--dim);border:0;border-bottom:1.5px solid var(--faint);
padding:3px 0;font:inherit;font-size:0.76rem;letter-spacing:.06em;cursor:pointer;
display:flex;align-items:center;gap:9px;transition:color .2s,border-color .2s;
}
.langbtn:hover{color:var(--amber-hover);border-color:var(--amber-dim)}
.langmenu{
position:absolute;right:0;top:calc(100% + 18px);background:var(--void2);color:var(--chalk);
border:1.5px solid var(--faint);padding:8px;min-width:230px;max-height:330px;
overflow-y:auto;display:none;z-index:200;border-radius:var(--r)}
.langmenu.open{display:block}
.langmenu button{
display:flex;width:100%;gap:10px;align-items:baseline;background:none;border:0;
font-family:var(--sans);font-size:.92rem;font-weight:400;
padding:10px 14px;cursor:pointer;text-align:left;color:var(--chalk);transition:background .15s;
}
.langmenu button:hover{background:color-mix(in srgb, var(--amber) 9%, transparent)}
.langmenu button[aria-current="true"]{color:var(--amber)}
.langmenu button[aria-current="true"]::before{content:'—';margin-right:-4px;color:var(--amber)}
.langmenu .en{color:var(--dim);font-size:0.75rem;margin-left:auto;letter-spacing:.04em}
/* ---------- Header ---------- */
header{
position:sticky;top:0;z-index:100;border-top:1.5px solid var(--faint);
/* A visible rule from the start. It used to appear only once you scrolled,
so at the top of the page the header had no edge and the menu ran into
the hero with nothing between them. */
border-bottom:1.5px solid var(--faint);
background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
transition:border-color .3s,background .3s,box-shadow .3s;
}
/* Once you leave the top the header is overlapping content, so it earns a
little more separation than a hairline. */
header.scrolled{border-bottom-color:var(--edge);background:rgba(255,255,255,.96);
box-shadow:0 1px 14px rgba(0,0,0,.06)}
/* ============================================================
Two-row header, logo centred.
Row one an empty spacer, the lockup, the controls
Row two the menu, centred beneath
Why two rows. Six menu items, five controls and the WhatsApp button do
not fit either side of a centred logo — not on a 13-inch laptop, and
certainly not in Hindi or Tamil where the words are longer. Splitting
them gives the mark real prominence and leaves everything room, at the
cost of about 36px of height.
The spacer is what actually centres the lockup. Three columns of
1fr / auto / 1fr put the middle one dead centre no matter how wide the
controls grow — so the logo does not drift left when a longer language
is chosen. It is aria-hidden and empty on purpose.
============================================================ */
/* The header is the one thing on the page that should NOT be 1080px wide.
Capping it there is what made the two-row version look lopsided: the
controls ended at the column edge while a third of the screen sat empty
to the left. Given the full width, three menu items fit either side of a
centred mark with room to spare — which is exactly what the reference
does. 1560 stops it stretching absurdly on a very wide monitor. */
header .wrap{max-width:none;padding-left:clamp(22px,3.2vw,52px);
padding-right:clamp(22px,3.2vw,52px);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:20px;padding-top:14px;padding-bottom:14px;
transition:padding .3s cubic-bezier(.2,.7,.3,1)}
header.scrolled .wrap{padding-top:9px;padding-bottom:9px}
/* Menu left, mark centre, controls right.
Splitting the six items either side of the mark left three of them
stranded — 700px of nothing between the last one and the logo, while
the right-hand side was packed. All six on the left is roughly 460px
and the controls are roughly 470px, so the two sides now weigh about
the same and the mark sits between them rather than adrift.
1fr / auto / 1fr keeps it centred however wide either side grows, so it
will not shift when somebody switches to a language with longer words. */
.nav-l{justify-self:start}
.head-right{justify-self:end}
/* The lockup: mark above the name, matching how the logo file is built.
The name is wrapped in its own span, and it has to be. A flex container
makes every child its own item — INCLUDING bare text. So "Gautam " and
Speaks were two separate items, and a column direction duly
stacked them one above the other. One span, one item, one line. */
.brand{font-family:var(--serif);font-size:1.22rem;letter-spacing:.01em;white-space:nowrap;
display:flex;flex-direction:column;align-items:center;gap:7px;justify-self:center;
transition:font-size .3s,gap .3s}
header.scrolled .brand{font-size:1.02rem;gap:5px}
.brand-name{display:block;white-space:nowrap;line-height:1.1}
/* One colour, one style — as in the logo, where GAUTAMSPEAKS is set in a
single weight and a single colour. "Speaks" used to be amber and italic,
which made the wordmark disagree with the mark sitting directly above it.
It follows the text colour, so it is near-white on the dark themes and
dark on the light ones, and stays readable either way. */
.brand em{font-style:normal;color:inherit}
.head-right{justify-self:end}
nav{display:flex;gap:26px;font-size:.87rem;letter-spacing:.04em}
nav a{color:var(--dim);transition:color .2s;white-space:nowrap;position:relative;padding-bottom:3px}
nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);
transform:scaleX(0);transform-origin:left;transition:transform .28s}
nav a:hover{color:var(--chalk)}
nav a:hover::after{transform:scaleX(1)}
.head-right{display:flex;align-items:center;gap:22px;flex-shrink:0}
.head-right .btn{white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;font-size:1.25rem;cursor:pointer;color:var(--chalk);
line-height:1;padding:4px}
/* ---------- Buttons — flat, hairline, no shadows ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:16px 34px;font-family:var(--sans);font-size:0.82rem;font-weight:400;
letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--faint);
background:none;color:var(--chalk);cursor:pointer;transition:all .25s;border-radius:var(--r)}
.btn:hover{border-color:var(--amber);color:var(--amber)}
.btn-fill{background:var(--amber);border-color:var(--amber);color:var(--on-fill);font-weight:500;border-radius:var(--r)}
.btn-fill:hover{background:transparent;color:var(--amber)}
.btn-sm{padding:11px 22px;font-size:0.75rem;border-radius:var(--r)}
/* The WhatsApp button: mark plus one word. The glyph is drawn inline as a
path rather than loaded from Meta — an image from their CDN would be a
request to Meta on every page view, before anyone has chosen to contact
anybody. The icon inherits currentColor, so it follows the theme and the
hover state without a second rule. */
.btn-wa{display:inline-flex;align-items:center;gap:8px;padding-left:17px;padding-right:19px}
.btn-wa svg{flex:none;opacity:.92}
.btn-block{width:100%}
.btn-bare{border:0;border-bottom:1.5px solid var(--faint);padding:10px 0;letter-spacing:.12em}
.btn-bare:hover{border-color:var(--amber)}
/* ---------- Hero ---------- */
.hero{padding:110px 0 130px;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.hero h1{margin:26px 0 0;max-width:11ch}
.hero .sub{max-width:44ch;margin-top:34px;color:var(--dim);font-size:1.06rem}
.hero .ctas{display:flex;gap:18px;flex-wrap:wrap;margin-top:46px;align-items:center}
.hero .note{margin-top:34px;font-size:.87rem;color:var(--dim);letter-spacing:.03em;max-width:40ch}
/* ---------- Hero portrait ---------- */
.portrait{position:relative;width:430px;flex-shrink:0;isolation:isolate;margin:0}
.portrait .frame{position:relative;z-index:2;display:block;padding:0;background:none;border:0;
animation:rise 1.1s cubic-bezier(.2,.7,.3,1) both}
.portrait img{display:block;width:100%;height:auto;border:0;border-radius:0}
/* warm light spilling from behind the head and shoulders */
.portrait::before{
content:'';position:absolute;inset:-10% -8% -2%;z-index:0;
background:radial-gradient(46% 40% at 52% 34%,color-mix(in srgb, var(--amber) 13%, transparent),transparent 70%);
filter:blur(8px);
}
.wheel{
position:absolute;z-index:1;top:-2%;left:50%;width:96%;height:auto;
transform:translateX(-50%);opacity:.22;animation:spin 240s linear infinite;
}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.wheel{animation:none}
.portrait .frame{animation:none}
}
.portrait figcaption{
position:relative;z-index:4;text-align:center;margin:0;padding-top:38px;
}
.portrait .nm{display:block;font-family:var(--serif);font-size:1.62rem;font-weight:500;
color:var(--chalk);letter-spacing:-.01em;line-height:1.2}
.portrait .rl{display:block;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
color:var(--amber);margin-top:9px}
/* ---------- Trust — inline, typographic ---------- */
.trust{border-block:1.5px solid var(--faint);padding:0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-grid.trust-3{grid-template-columns:repeat(3,1fr)}
.trust-grid > div{padding:44px 24px;text-align:center;border-left:1.5px solid var(--faint)}
.trust-grid > div:first-child{border-left:0}
.trust-grid strong{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:400;color:var(--amber);line-height:1}
.trust-grid span{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:12px;display:block}
/* ---------- Services — tiles ---------- */
.svc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border:0}
.svc{
display:flex;flex-direction:column;padding:32px 28px 28px;
border:1.5px solid var(--faint);background:var(--void2);position:relative;
transition:border-color .25s,transform .25s,box-shadow .25s;border-radius:var(--r)}
.svc:hover{border-color:var(--amber);transform:translateY(-4px);
box-shadow:0 14px 30px rgba(61,31,20,.09)}
.svc::before{display:none}
.svc .num{flex-direction:row;align-items:center;gap:13px;margin-bottom:22px;padding-top:0}
.svc .num .gl{width:38px;height:38px;opacity:.9}
.svc:hover .num .gl{transform:rotate(-6deg)}
.svc .num i{font-style:normal;font-family:var(--serif);font-size:.8rem;color:var(--dim);letter-spacing:.1em}
.svc h3{margin-bottom:11px;font-size:1.2rem}
.svc p{color:var(--dim);font-weight:400;font-size:.94rem;flex:1;max-width:none}
/* ------------------------------------------------------------------
The brand red, used the only way it can be used.
As TEXT it fails everywhere — 4.79:1 at best on white, 3.73:1 on the
dark navy, against a 4.5:1 requirement. Measured on all five themes;
it passes on none. That is why the blue carries the accent role and
the red does not.
But WHITE ON RED is 4.79:1, which passes. So the red works as a solid
fill rather than as ink — which is precisely how it appears in the
logo: the filled figure inside the blue ring. Outline is blue's job,
fill is red's.
These badges are the right place for it. They exist to interrupt a
scan, they carry their own words, and they are small enough that a
saturated red reads as emphasis rather than alarm.
------------------------------------------------------------------ */
.tag{display:inline-flex;align-items:center;gap:7px;
font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
background:var(--brand-red);color:#fff;border:1.5px solid transparent;font-weight:500;
padding:4px 13px 4px 10px;margin-bottom:13px;border-radius:999px}
/* Same star and same diamond as the card badge, so somebody moving from the
listing to the detail page sees one mark, not two treatments of it. */
.tag::before{content:'\2605';font-size:.84rem;line-height:1}
.tag[data-i18n="tag_best"]::before{content:'\2726'}
.svc-right{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-top:26px;padding-top:20px;border-top:1.5px solid var(--faint);text-align:left}
.price{margin:0}
.price b{color:var(--brand-red);font-family:var(--serif);font-size:1.7rem;font-weight:400;display:block;line-height:1}
.price small{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--dim);margin-top:7px}
.svc-right .btn{margin-top:0;flex-shrink:0}
/* ---------- Free strip ---------- */
.free{border-block:1.5px solid var(--faint);padding:120px 0;text-align:center;
background:radial-gradient(660px 300px at 50% 50%,color-mix(in srgb, var(--amber) 9%, transparent),transparent 70%)}
.free h2{max-width:16ch;margin:22px auto 0}
.free p{max-width:50ch;margin:28px auto 44px;color:var(--dim)}
/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:0 28px;border-left:1.5px solid var(--faint)}
.step:first-child{border-left:0;padding-left:0}
.step .n{font-family:var(--serif);font-size:3.2rem;font-weight:400;color:var(--chalk);opacity:.85;line-height:1;margin-bottom:22px;display:block}
.step h3{font-size:1.05rem;margin-bottom:12px}
.step p{color:var(--dim);font-size:.95rem}
/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;background:var(--faint);border:1.5px solid var(--faint);border-radius:var(--r)}
.why-card{padding:48px 40px;background:var(--void)}
.why-card .mark{color:var(--amber);font-family:var(--serif);font-size:1.1rem;display:block;margin-bottom:20px}
.why-card h3{font-size:1.15rem;margin-bottom:14px}
.why-card p{color:var(--dim);font-size:.96rem}
/* ---------- Testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.tst q{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:400;line-height:1.5;
color:var(--chalk);margin-bottom:28px;quotes:none}
.tst q::before{content:'';display:block;width:26px;border-top:2px solid var(--haldi);margin-bottom:24px}
.who b{display:block;font-size:0.88rem;font-weight:400}
.who span{font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
/* ---------- FAQ ---------- */
.faq{border-top:1.5px solid var(--faint)}
details{border-bottom:1.5px solid var(--faint);border-radius:var(--r)}
summary{padding:30px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
gap:28px;align-items:baseline;font-family:var(--serif);font-size:1.18rem;font-weight:400;transition:color .2s}
summary:hover{color:var(--amber)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:1.1rem;color:var(--amber);flex-shrink:0;font-family:var(--sans)}
details[open] summary{color:var(--amber)}
details[open] summary::after{content:'\2212'}
details p{padding:0 0 30px;color:var(--dim);font-size:0.95rem;max-width:64ch}
/* ---------- Form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}
form{width:100%}
.field{margin-bottom:32px}
label{display:block;font-size:0.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
input,select,textarea{
width:100%;padding:12px 0;border:0;border-bottom:1.5px solid var(--faint);border-radius:0;
font-family:var(--sans);font-size:1rem;font-weight:400;background:none;color:var(--chalk);
transition:border-color .25s;
}
input:focus,select:focus,textarea:focus{border-color:var(--amber)}
select{cursor:pointer}
select option{background:var(--void2);color:var(--chalk)}
textarea{resize:vertical;min-height:70px}
.form-note{font-size:.83rem;color:var(--dim);margin-top:20px;letter-spacing:.03em}
/* ---------- Footer ---------- */
footer{border-top:1.5px solid var(--faint);padding:90px 0 110px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
footer h4{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:22px;font-weight:400}
footer p,footer li{font-size:0.9rem;color:var(--dim);list-style:none;margin-bottom:12px}
footer a:hover{color:var(--amber)}
.f-bottom{border-top:1.5px solid var(--faint);margin-top:70px;padding-top:32px;font-size:0.75rem;color:var(--dim);
display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.f-bottom p{margin:0;max-width:62ch}
/* ---------- Service glyphs ---------- */
.svc .num{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--amber);padding-top:2px}
.svc .num .gl{width:34px;height:34px;opacity:.85;transition:opacity .3s,transform .4s}
.svc:hover .num .gl{opacity:1;transform:rotate(-6deg)}
.svc .num i{font-style:normal;font-family:var(--serif);font-size:0.78rem;color:var(--dim);letter-spacing:.1em}
/* ---------- Rashi strip ---------- */
.rashi-grid{
display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
background:var(--faint);border:1.5px solid var(--faint);border-radius:var(--r)}
.rashi{
background:var(--void);padding:30px 12px 26px;text-align:center;color:inherit;
transition:background .28s;position:relative;
}
.rashi:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
.rashi .sym{
display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--amber);
transition:transform .3s;
}
.rashi:hover .sym{transform:translateY(-3px)}
.rashi .sa{display:block;font-size:0.86rem;margin-top:14px;color:var(--chalk)}
.rashi .en2{display:block;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.rashi-note{margin-top:34px;font-size:.89rem;color:var(--dim);letter-spacing:.02em;max-width:56ch}
@media(max-width:900px){
.rashi-grid{grid-template-columns:repeat(3,1fr)}
.rashi{padding:22px 8px 20px}
.rashi .sym{font-size:1.6rem}
}
/* ---------- Products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:none;border:0;border-radius:var(--r)}
.prod{background:var(--void2);border:1.5px solid var(--faint);padding:30px 24px 26px;display:flex;
flex-direction:column;align-items:flex-start;color:inherit;
transition:border-color .25s,transform .25s,box-shadow .25s;border-radius:var(--r)}
.prod:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
.pgw{color:var(--amber);opacity:.8;transition:opacity .3s,transform .5s;margin-bottom:24px}
.prod:hover .pgw{opacity:1;transform:rotate(8deg)}
.pg{width:58px;height:58px;display:block}
.prod .cat{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.prod .pn{font-family:var(--serif);font-size:1.02rem;line-height:1.3;margin-top:10px;color:var(--chalk)}
.prod .pd{font-size:.82rem;color:var(--dim);margin-top:6px}
.prod .pp{font-family:var(--serif);font-size:1.4rem;color:var(--amber);margin-top:16px}
/* ---------- Calculator ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:start}
.calc-out{margin-top:38px;padding-top:30px;border-top:1.5px solid var(--faint);
animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.cres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);margin-bottom:24px;border-radius:var(--r)}
.cres > div{background:var(--void);padding:22px 14px;text-align:center}
.cres .cl{display:block;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cres b{display:block;font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--amber);
line-height:1.1;margin-top:8px}
.cres em{display:block;font-style:normal;font-size:0.75rem;letter-spacing:.1em;color:var(--dim);margin-top:4px}
.verdict{font-size:0.92rem;color:var(--chalk);margin-bottom:22px;padding-left:16px;
border-left:2px solid var(--amber)}
input[type="date"]{color-scheme:light}
@media(max-width:900px){
.prod-grid{grid-template-columns:repeat(2,1fr)}
.prod{padding:26px 18px 24px}
.pg{width:46px;height:46px}
.calc-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:520px){ .cres{grid-template-columns:1fr} }
/* ---------- Tools: tabs ---------- */
.tabs{display:flex;gap:0;border:1.5px solid var(--faint);margin-bottom:0;flex-wrap:wrap;border-radius:var(--r)}
.tab{flex:1;min-width:150px;background:none;border:0;border-left:1.5px solid var(--faint);
font-family:var(--sans);font-size:0.75rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
color:var(--dim);padding:18px 14px;cursor:pointer;transition:color .25s,background .25s;border-radius:var(--r)}
.tab:first-child{border-left:0}
.tab:hover{color:var(--chalk)}
.tab.is-on{color:var(--on-fill);background:var(--amber);font-weight:500}
.panel{display:none;border:1.5px solid var(--faint);border-top:0;padding:38px 34px;border-radius:var(--r)}
.panel.is-on{display:block;animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
/* ---------- Panchang ---------- */
.pan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;
flex-wrap:wrap;margin-bottom:30px}
.pan-date{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--chalk)}
.pan-city{display:block;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--dim);margin-top:8px}
#panPlace{width:auto;min-width:160px;padding:8px 0;font-size:0.9rem}
.pan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);border-radius:var(--r)}
.pcell{background:var(--void);padding:20px 18px}
.pcell .pl{display:block;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pcell b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:400;
color:var(--chalk);margin-top:9px;line-height:1.25}
.pcell em{display:block;font-style:normal;font-size:0.75rem;color:var(--dim);margin-top:5px;letter-spacing:.06em}
.pcell.warn b{color:var(--alert)}
/* ---------- Moon & your sign ---------- */
.moon-intro{font-family:var(--serif);font-size:1.28rem;font-weight:400;line-height:1.45;
color:var(--chalk);max-width:52ch;margin-bottom:32px;padding-left:16px;border-left:2px solid var(--amber)}
.moon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);border-radius:var(--r)}
.mrow{background:var(--void);padding:18px 16px;display:flex;align-items:center;gap:13px;
transition:background .25s;color:inherit}
.mrow:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
.mrow .ms{font-family:var(--serif);font-size:1.25rem;color:var(--amber);line-height:1}
.mrow .mn{font-size:.92rem;color:var(--chalk);display:block}
.mrow .mv{font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:3px}
.mv.good{color:var(--tulsi)}.mv.mixed{color:var(--dim)}.mv.bad{color:var(--alert)}
.mrow .dot{width:6px;height:6px;border-radius:50%;margin-left:auto;flex-shrink:0}
.dot.good{background:var(--tulsi)}.dot.mixed{background:var(--amber-dim)}.dot.bad{background:var(--alert)}
.calc-lead{font-family:var(--serif);font-size:1.22rem;font-weight:400;line-height:1.45;
color:var(--chalk);margin-bottom:20px;max-width:38ch}
@media(max-width:900px){
.panel{padding:26px 18px}
.pan-grid{grid-template-columns:repeat(2,1fr)}
.moon-grid{grid-template-columns:repeat(2,1fr)}
.tab{min-width:0;flex:1 1 100%;border-left:0;border-top:1.5px solid var(--faint)}
.tab:first-child{border-top:0}
}
@media(max-width:520px){ .moon-grid{grid-template-columns:1fr} }
/* ---------- Consultation modes ---------- */
.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);border-radius:var(--r)}
.mode{background:var(--void);padding:34px 26px 30px;display:flex;flex-direction:column;
align-items:flex-start;color:inherit;transition:background .28s;border-radius:var(--r)}
.mode:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
.miw{color:var(--amber);opacity:.85;margin-bottom:22px;transition:transform .4s}
.mode:hover .miw{transform:translateY(-3px)}
.mi{width:34px;height:34px;display:block}
.mode .mt{font-family:var(--serif);font-size:1.15rem;color:var(--chalk)}
.mode .md{font-size:.91rem;color:var(--dim);margin-top:10px;flex:1}
.mode .mp{margin-top:22px}
.mode .mp b{font-family:var(--serif);font-size:1.55rem;font-weight:400;color:var(--amber);display:block;line-height:1}
.mode .mp small{display:block;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--dim);margin-top:8px}
/* ---------- Topic chips ---------- */
.topics{margin-top:64px;padding-top:44px;border-top:1.5px solid var(--faint)}
.topics h3{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.topics > p{color:var(--dim);margin-top:12px;max-width:50ch;font-size:0.95rem}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.chip{border:1.5px solid var(--faint);padding:12px 22px;font-size:.89rem;color:var(--dim);
transition:all .25s;white-space:nowrap;border-radius:var(--r)}
.chip:hover{border-color:var(--amber-hover);color:var(--amber);background:color-mix(in srgb, var(--amber) 7%, transparent)}
/* ---------- Store: report group ---------- */
.store-sub{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin-top:64px}
.store-lead{color:var(--dim);margin:12px 0 30px;max-width:52ch;font-size:0.95rem}
@media(max-width:900px){
.mode-grid{grid-template-columns:repeat(2,1fr)}
.mode{padding:26px 20px 24px}
.topics{margin-top:44px;padding-top:34px}
.chip{padding:10px 17px;font-size:0.8rem}
}
@media(max-width:520px){ .mode-grid{grid-template-columns:1fr} }
/* ---------- Mega menu ---------- */
header{overflow:visible}
.navgrp{position:static}
/* The panel is a full-width band under the header, and it can only be that
if the header row is NOT its containing block. `.wrap{position:relative}`
further down — added to lift page content above the cosmic backdrop —
applies to the header's wrap too, which quietly trapped the panel inside
the 1080px content column. The backdrop rule wants section wraps, not
this one; the header already has its own stacking context. */
/* Descendant, not child. The wraps now sit inside .head-top and .head-bottom,
so the old child selector stopped matching and the panel got trapped in the
content column again — the exact bug fixed two commits ago, reintroduced by
nesting. The header row must never be the panel's containing block. */
header .wrap{position:static}
.navtop{display:inline-flex;align-items:center;gap:6px}
.navtop svg{opacity:.55;transition:transform .3s}
.navgrp.is-open .navtop{color:var(--chalk)}
.navgrp.is-open .navtop::after{transform:scaleX(1)}
.navgrp.is-open .navtop svg{transform:rotate(180deg);opacity:1}
.mega{
position:absolute;left:0;right:0;top:100%;
background:var(--void2);border-top:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
box-shadow:0 22px 46px rgba(61,31,20,.13);
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.3,1),visibility .26s;
z-index:110;border-radius:0}
.navgrp.is-open .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* `nav a{white-space:nowrap}` is right for the six top-level items and wrong
for everything in the panel — .mfeat is itself a link, so its paragraph was
being forced onto one unbreakable line that ran straight out of the panel
and off the side of the screen. The rule needs the direct children only.
Same for the sliding amber underline: inside the panel it drew a second
line across items that already carry a divider. */
.mega a{white-space:normal}
.mega a::after{display:none}
.mega-in{
max-width:var(--max);margin:0 auto;padding:44px 28px 46px;
display:grid;grid-template-columns:1.2fr .9fr 1.05fr;gap:44px;align-items:start;
}
.mcol{display:flex;flex-direction:column;gap:2px}
/* Two lines' worth of room, with the rule pinned to the bottom of it, so the
dividers line up across the columns whatever the translation does to the
label length. Ten languages — this cannot be left to chance. */
.mh{font-size:0.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);
padding-bottom:14px;margin-bottom:10px;border-bottom:1.5px solid var(--faint);
min-height:calc(2 * 1.35em + 14px);display:flex;align-items:flex-end;line-height:1.35}
.mcol > a{padding:11px 0;display:block;border-bottom:1.5px solid rgba(227,213,187,.75);transition:padding .25s}
.mcol > a:last-child{border-bottom:0}
.mcol > a:hover{padding-left:9px}
.ml-t{display:block;font-family:var(--serif);font-size:1rem;color:var(--chalk);transition:color .2s}
.mcol > a:hover .ml-t{color:var(--amber)}
/* Now that these actually wrap, one line cuts most of them mid-sentence. */
.ml-d{display:block;font-size:.82rem;color:var(--dim);margin-top:4px;line-height:1.5;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* topic tags inside the mega */
.mtags{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.mtags a{border:1.5px solid var(--faint);padding:8px 15px;font-size:0.78rem;color:var(--dim);transition:all .22s;border-radius:var(--r)}
.mtags a:hover{border-color:var(--amber-hover);color:var(--amber);background:color-mix(in srgb, var(--amber) 7%, transparent)}
/* featured tile */
/* The featured item used to be a filled, bordered card. Inside a mega panel
that is already a raised surface it read as a box floating on a box — and
on Midnight the fill landed a shade darker than the panel, so it looked
like a blue block dropped into the menu. It is a column, not a card:
a single divider rule separates it and nothing else does. */
.mfeat{display:flex;flex-direction:column;padding:0 0 0 30px;background:none;
border:0;border-left:1.5px solid var(--faint);align-self:stretch;border-radius:0;
transition:border-color .25s}
.mfeat:hover{border-left-color:var(--amber)}
.mfeat:hover .fx-k{color:var(--amber)}
.fx-k{transition:color .2s}
@media(max-width:900px){
.mfeat{padding:16px 0 0;border-left:0;border-top:1.5px solid var(--faint);margin-top:14px}
}
.fx-k{font-family:var(--serif);font-size:1.22rem;color:var(--chalk);line-height:1.3}
/* `flex:1` here pushed the call to action to the foot of the tallest column.
On the Consult panel that is four items tall, so the link ended up marooned
300px below the sentence it belongs to. It follows its own paragraph. */
.fx-d{font-size:.84rem;color:var(--dim);margin-top:12px;line-height:1.6;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.fx-c{font-size:0.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-top:18px}
@media(max-width:900px){
header{overflow:visible}
.navgrp{width:100%}
.navtop{width:100%;justify-content:space-between;color:var(--chalk);padding-bottom:10px;
border-bottom:1.5px solid var(--faint)}
.navtop::after{display:none}
.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
border:0;background:none;max-height:0;overflow:hidden;transition:max-height .35s ease}
.navgrp.is-open .mega{max-height:1200px}
.mega-in{grid-template-columns:1fr;gap:24px;padding:16px 0 22px;max-width:none}
.mh{padding-bottom:10px;margin-bottom:4px}
.ml-d{display:none}
.mfeat{display:none}
nav.open{gap:6px;max-height:74vh;overflow-y:auto}
}
/* ---------- Sticky mobile CTA ---------- */
.sticky{position:fixed;bottom:0;left:0;right:0;background:var(--void2);border-top:1.5px solid var(--faint);
padding:0;display:none;z-index:150}
.sticky .btn{flex:1;border:0;border-left:1.5px solid var(--faint);padding:20px 10px}
.sticky .btn:first-child{border-left:0}
@media(max-width:1000px){.svc-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
.wrap{padding:0 22px}
.sec{padding:84px 0}
.hero{padding:70px 0 84px}
.hero-grid{grid-template-columns:1fr;gap:36px}
.hero-grid > div{order:2}
.portrait{order:1;width:min(80vw,340px);margin:0 auto}
.portrait figcaption{padding-top:30px}
header .wrap{gap:12px;padding-left:22px;padding-right:22px}
/* THE DRAWER.
It takes a second grid row in normal flow rather than being absolutely
positioned. That means the header grows to contain it, so nothing has
to know the drawer's height and nothing can end up underneath it. */
/* Logo hard left, controls hard right — two columns, not three.
A centred mark needs an empty column to balance against, and on a
phone there is no width to spare for one: it pushed the logo into the
middle of the row with nothing on its left. Left-aligned is also
where a thumb expects to find the way home. */
header .wrap{grid-template-columns:auto 1fr;row-gap:0}
.brand{grid-column:1;grid-row:1;justify-self:start}
.head-right{grid-column:2;grid-row:1;justify-self:end}
.nav-l{grid-column:1/-1;grid-row:2}
nav{display:none}
nav.open{display:flex;position:static;flex-direction:column;gap:19px;
font-size:1rem;margin-inline:0;padding:22px 0;margin-top:14px;
border-top:1.5px solid var(--faint)}
nav.open a{color:var(--chalk)}
.menu-toggle{display:block}
.head-right{gap:14px}
.head-right .btn{display:none}
/* Side by side on a phone: two stacked rows plus a drawer is too much
furniture before any content appears. */
.brand{flex-direction:row;gap:9px;font-size:1.1rem}
.brand-mark{width:30px;height:30px}
header.scrolled .brand-mark{width:26px;height:26px}
}
/* ============================================================
PHONES — the header did not fit, and that is what pushed it out of line.
Measured on a 360px Android: brand 147px, six controls 214px, gaps 70,
padding 44 = 475px. It overflowed by 115px, and by 85px on an iPhone.
Nothing can be aligned inside a row that is wider than the screen.
Two controls earn their place elsewhere and go:
the phone icon — the sticky bar at the foot of every page already
offers Call, in a larger target
the theme toggle — a preference, not a task. It stays available on
the design panel and on any larger screen.
The language button keeps its globe but drops the code, which is the
least useful two characters in the row.
============================================================ */
@media(max-width:620px){
.head-right{gap:8px}
.head-right .hicon[href^="tel:"]{display:none}
.theme-toggle{display:none}
.langbtn span,.langbtn b{display:none}
.langbtn{padding-left:6px;padding-right:6px;min-width:0}
.brand{font-size:1rem;gap:8px}
.brand-mark{width:27px;height:27px}
header .wrap{padding-left:16px;padding-right:16px;gap:8px}
}
/* Back to the 900px breakpoint. Opening the phone query in the middle of
this block would have quietly moved everything below it from 900px to
620px — the single-column service list, the stacked steps, the sticky
call bar — so a 700px tablet would have lost the lot. */
@media(max-width:900px){
.trust-grid,.trust-grid.trust-3{grid-template-columns:repeat(2,1fr)}
.trust-grid > div{border-left:0;border-top:1.5px solid var(--faint);padding:32px 12px}
.trust-grid > div:nth-child(-n+2){border-top:0}
.trust-grid > div:nth-child(even){border-left:1.5px solid var(--faint)}
.svc-list{grid-template-columns:1fr;gap:16px}
.svc{padding:26px 22px 24px}
.svc-right{flex-wrap:wrap;gap:14px}
.steps{grid-template-columns:1fr}
.step{border-left:0;border-top:1.5px solid var(--faint);padding:32px 0 0}
.step:first-child{border-top:0;padding-top:0}
.why-grid,.tst-grid,.form-grid,.f-grid{grid-template-columns:1fr}
.tst-grid{gap:44px}
.why-card{padding:36px 26px}
.form-grid{gap:44px}
.sticky{display:flex}
footer{padding-bottom:110px}
h1{font-size:clamp(2.4rem,10vw,3.4rem)}
}
/* ---------- Shop page ---------- */
.shop-hero{padding:64px 0 46px;border-bottom:1.5px solid var(--faint);
background:radial-gradient(760px 320px at 50% 0,color-mix(in srgb, var(--amber) 7%, transparent),transparent 70%)}
.shop-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:18px 0 0;max-width:16ch}
.shop-hero .sub{max-width:52ch;margin-top:20px;color:var(--dim);font-size:1.02rem}
.fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:34px;
padding-bottom:22px;border-bottom:1.5px solid var(--faint)}
.fchip{background:none;border:1.5px solid var(--faint);padding:11px 20px;font-family:var(--sans);
font-size:.83rem;letter-spacing:.06em;color:var(--dim);cursor:pointer;transition:all .22s;border-radius:var(--r)}
.fchip:hover{border-color:var(--amber-dim);color:var(--chalk)}
.fchip.is-on{background:var(--amber);border-color:var(--amber);color:var(--on-fill);font-weight:500}
.fcount{margin-left:auto;font-size:.8rem;letter-spacing:.1em;color:var(--dim)}
.prod[hidden]{display:none}
@media(max-width:900px){
.shop-hero{padding:44px 0 34px}
.fcount{width:100%;margin:6px 0 0;text-align:left}
}
/* ---------- Search + autosuggest ---------- */
.searchbox{position:relative;display:flex;align-items:center;gap:9px;
border:1.5px solid var(--faint);padding:0 13px;height:40px;min-width:236px;
transition:border-color .22s,box-shadow .22s;background:var(--void);border-radius:var(--r)}
.searchbox:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 10%, transparent)}
.searchbox > svg{width:15px;height:15px;color:var(--dim);flex-shrink:0}
#searchInput{border:0;padding:0;height:100%;background:none;border-radius:0;font-size:.87rem;
font-family:var(--sans);color:var(--chalk);width:100%}
#searchInput:focus{outline:0}
#searchInput::-webkit-search-cancel-button{-webkit-appearance:none}
.sx-panel{position:absolute;top:calc(100% + 8px);left:-1.5px;right:-1.5px;background:var(--void2);
border:1.5px solid var(--faint);box-shadow:0 18px 42px rgba(61,31,20,.13);
max-height:min(60vh,420px);overflow-y:auto;z-index:130;padding:6px;border-radius:var(--r)}
.sx-item{display:flex;align-items:baseline;gap:12px;padding:11px 14px;color:var(--chalk);
font-size:.9rem;transition:background .15s;border-radius:var(--r)}
.sx-item:hover,.sx-item.is-on{background:color-mix(in srgb, var(--amber) 8%, transparent)}
.sx-item.is-on{outline:1.5px solid var(--amber);outline-offset:-1.5px}
.sx-l{flex:1}
.sx-l mark{background:color-mix(in srgb, var(--haldi) 45%, transparent);color:inherit;padding:0 1px;border-radius:2px}
.sx-g{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
flex-shrink:0;white-space:nowrap}
.sx-empty{padding:16px 14px;font-size:.87rem;color:var(--dim)}
@media(max-width:1100px){.searchbox{min-width:170px}}
@media(max-width:900px){
/* These are left over from when the search was a full-width field rather
than a collapsing icon. width:100% and order:-1 are overridden further
down, but the bottom margin was not — it pushed the search box 4px
below the other icons, which is the misalignment. And flex-wrap let
the controls drop onto a second line, making the row taller than the
logo beside it. */
.searchbox{min-width:0;margin:0}
.head-right{flex-wrap:nowrap}
.sx-panel{left:0;right:0}
}
/* ---------- Rashi pages ---------- */
.crumb{font-size:.78rem;color:var(--dim);margin-bottom:26px;display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.crumb a:hover{color:var(--amber)}
.crumb span{opacity:.5}
.crumb em{font-style:normal;color:var(--chalk)}
.rashi-hero{padding:52px 0 46px;border-bottom:1.5px solid var(--faint);
background:radial-gradient(720px 300px at 30% 0,color-mix(in srgb, var(--amber) 7%, transparent),transparent 70%)}
.rh-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.rashi-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:16px 0 0}
.rashi-hero .sub{max-width:56ch;margin-top:18px;color:var(--dim);font-size:1.02rem}
.rashi-hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;align-items:center}
.rh-sym{font-family:var(--serif);font-size:clamp(5rem,13vw,9rem);color:var(--amber);
line-height:1;opacity:.9}
.pcell em{font-weight:500}
@media(max-width:900px){
.rh-grid{grid-template-columns:1fr;gap:20px}
.rh-sym{font-size:4.4rem}
.rashi-hero{padding:36px 0 34px}
}
/* ---------- Legal pages ---------- */
.legal{max-width:68ch}
.legal h2{font-size:1.35rem;margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--dim);margin-bottom:14px;line-height:1.75}
.legal a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.legal code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--void2);
padding:2px 6px;border:1.5px solid var(--faint);border-radius:var(--r)}
.legal strong{color:var(--chalk);font-weight:500}
/* ---------- Product imagery ---------- */
.pgw img{display:block;width:100%;height:auto;border:1.5px solid var(--faint);background:var(--void);border-radius:var(--r)}
.prod .pgw{width:100%;margin-bottom:18px;transition:transform .3s}
.prod:hover .pgw{transform:none}
.prod:hover .pgw img{border-color:var(--amber-dim)}
/* ---------- Back link ---------- */
.crumb-back{display:inline-flex;align-items:center;gap:7px;color:var(--amber)}
.crumb-back:hover{text-decoration:underline;text-underline-offset:3px}
/* ---------- Booking modal ---------- */
.bk-scrim{position:fixed;inset:0;background:rgba(61,31,20,.42);backdrop-filter:blur(3px);
z-index:400;display:flex;align-items:flex-start;justify-content:center;padding:5vh 20px 40px;overflow-y:auto}
.bk-scrim[hidden]{display:none}
.bk{position:relative;background:var(--void);border:1.5px solid var(--faint);width:100%;
max-width:720px;min-height:min(600px,86vh);max-height:90vh;display:flex;flex-direction:column;
padding:34px 0 0;box-shadow:0 30px 70px rgba(61,31,20,.24);border-radius:var(--r);
animation:rise .34s cubic-bezier(.2,.7,.3,1) both;overflow:hidden}
.bk-x{position:absolute;top:14px;right:18px;z-index:2;background:none;border:0;font-size:1rem;color:var(--dim);
cursor:pointer;padding:9px;line-height:1}
.bk-x:hover{color:var(--amber)}
.bk h2{font-size:1.7rem;margin:12px 0 0}
/* every direct region carries the gutter, so nothing touches the scrollbar */
.bk > .eyebrow,.bk > h2,.bk > .bk-sub{padding-inline:44px}
#bkForm{flex:1;min-height:0;overflow-y:auto;margin-top:24px;
padding:4px 44px 34px;scrollbar-gutter:stable}
#bkForm::-webkit-scrollbar{width:10px}
#bkForm::-webkit-scrollbar-track{background:transparent;margin:6px 0}
#bkForm::-webkit-scrollbar-thumb{background:var(--faint);border-radius:99px;
border:3px solid var(--void);background-clip:padding-box}
#bkForm::-webkit-scrollbar-thumb:hover{background:var(--amber-dim);background-clip:padding-box;
border:3px solid var(--void)}
#bkForm{scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.bk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.bk-sub{color:var(--dim);font-size:.9rem;margin-top:10px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bk-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
margin:-4px 0 24px;padding:15px 18px;background:var(--void2);
border:1.5px solid var(--faint);border-radius:var(--r)}
.bk-total span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.bk-total b{font-family:var(--serif);font-size:1.55rem;font-weight:400;color:var(--amber)}
.bk-paynote{font-size:.8rem;color:var(--dim);margin-top:12px;padding-left:13px;
border-left:2px solid var(--haldi);line-height:1.55}
.bk-slots{max-height:190px;overflow-y:auto}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:4px}
.bk-slot{background:none;border:1.5px solid var(--faint);padding:10px 4px;font-family:var(--sans);
font-size:.83rem;color:var(--chalk);cursor:pointer;transition:all .18s;border-radius:var(--r)}
.bk-slot:hover{border-color:var(--amber-dim)}
.bk-slot.is-on{background:var(--amber);border-color:var(--amber);color:var(--on-fill);font-weight:500}
.bk-slot.bad{color:var(--alert);border-color:rgba(168,58,30,.4)}
.bk-slot.bad.is-on{background:var(--alert);border-color:var(--alert);color:var(--on-fill)}
.bk-slot.good{border-color:var(--tulsi);color:var(--tulsi)}
.bk-slot.good.is-on{background:var(--tulsi);border-color:var(--tulsi);color:var(--on-fill)}
.bk-legend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;
font-size:.75rem;color:var(--dim)}
.bk-legend i{font-style:normal}
.lg{width:11px;height:11px;display:inline-block;flex-shrink:0;border-radius:2px}
.lg.bad{background:var(--alert)}
.lg.good{background:var(--tulsi)}
.bk-err{color:var(--alert);font-size:.85rem;margin-bottom:14px}
.bk .field{margin-bottom:24px}
.bk-consent{margin:10px 0 24px}
@media(max-width:760px){
.bk{padding:28px 0 0;min-height:0;max-height:92vh}
.bk > .eyebrow,.bk > h2,.bk > .bk-sub{padding-inline:24px}
#bkForm{padding:4px 24px 28px}
.bk-row,.bk-grid2{grid-template-columns:1fr;gap:0}
.bk h2{font-size:1.4rem}
.bk-slots{max-height:none}
}
/* ---------- Rashi modal ---------- */
.rm{max-width:600px;padding:36px 40px 32px;overflow-y:auto}
.rm-head{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.rm-sym{font-family:var(--serif);font-size:3.4rem;color:var(--amber);line-height:1}
.rm-head h2{font-size:1.9rem;margin:0}
.rm-en{color:var(--dim);font-size:.85rem;letter-spacing:.06em;margin-top:5px}
.rm-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);margin-bottom:28px;border-radius:var(--r)}
.rm-f{background:var(--void2);padding:14px 16px}
.rm-f span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rm-f b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:400;margin-top:5px}
.rm-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
margin:26px 0 10px;font-family:var(--sans);font-weight:500}
.rm-p{color:var(--dim);font-size:.94rem;line-height:1.7}
.rm-days{font-family:var(--serif);font-size:1.12rem;color:var(--tulsi);line-height:1.6}
.rm-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;padding-top:24px;
border-top:1.5px solid var(--faint)}
.rm-cta .btn{flex:1;min-width:170px}
/* ---------- Month events ---------- */
.ev-block{margin-top:56px;padding-top:44px;border-top:1.5px solid var(--faint)}
.ev-block h3{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.ev-sub{color:var(--dim);font-size:.92rem;margin-top:10px;max-width:52ch}
.ev-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);margin-top:26px;border-radius:var(--r)}
.ev{background:var(--void2);padding:20px 18px;display:flex;flex-direction:column;gap:2px}
.ev b{font-family:var(--serif);font-size:1.9rem;font-weight:400;color:var(--amber);line-height:1}
.ev span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ev em{font-style:normal;font-size:.88rem;margin-top:8px}
/* ---------- Consent ---------- */
.bk-consent{margin:6px 0 22px;display:flex;flex-direction:column;gap:12px}
.cbx{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--dim);
line-height:1.55;cursor:pointer;letter-spacing:0;text-transform:none}
.cbx input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--amber);
border:1.5px solid var(--faint);padding:0;border-radius:3px}
.rashi{cursor:pointer}
@media(max-width:900px){
.ev-list{grid-template-columns:repeat(2,1fr)}
.rm-facts{grid-template-columns:1fr}
}
/* ---------- Product card actions ---------- */
.prod{position:relative}
.prod-a{display:flex;flex-direction:column;align-items:flex-start;color:inherit;width:100%}
.prod-cta{display:flex;flex-direction:column;gap:8px;margin-top:18px;width:100%}
.prod-cta .btn{width:100%}
.prod-more{font-size:.8rem;letter-spacing:.06em;color:var(--dim);text-align:center;
padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.prod-more:hover{color:var(--amber)}
/* ---------- Product detail ---------- */
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pdp-img img{width:100%;height:auto;border:1.5px solid var(--faint);border-radius:var(--r)}
.pdp-info h1{font-size:clamp(1.8rem,4vw,2.7rem);margin:12px 0 0}
.pdp-tag{color:var(--dim);font-size:.9rem;margin-top:10px}
.pdp-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:26px 0 24px;
padding-bottom:24px;border-bottom:1.5px solid var(--faint)}
.pdp-price b{font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--brand-red);line-height:1}
.pdp-price small{font-size:.76rem;color:var(--dim);letter-spacing:.04em}
.pdp-about{color:var(--dim);line-height:1.8}
.pdp-suits{margin-top:18px;font-size:.92rem;padding-left:14px;border-left:2px solid var(--haldi)}
.pdp-suits span{color:var(--amber)}
.pdp-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 18px}
.pdp-cta .btn{flex:1;min-width:170px}
.pdp-specs{margin-top:70px}
.pdp-specs h2{font-size:1.6rem;margin-bottom:22px}
.pdp-specs dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;background:var(--faint);
border:1.5px solid var(--faint);border-radius:var(--r);overflow:hidden}
.pdp-specs dl > div{background:var(--void2);padding:16px 20px}
.pdp-specs dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pdp-specs dd{font-family:var(--serif);font-size:1.05rem;margin-top:5px}
/* ---------- Cart ---------- */
.cart-open{position:relative;background:none;border:0;cursor:pointer;color:var(--chalk);
padding:5px;display:flex;align-items:center}
.cart-open:hover{color:var(--amber-hover)}
.cart-badge{position:absolute;top:-3px;right:-4px;background:var(--amber);color:#fff;
font-size:.62rem;min-width:16px;height:16px;border-radius:99px;display:flex;
align-items:center;justify-content:center;font-weight:600;padding:0 4px}
.cart-scrim{position:fixed;inset:0;background:rgba(61,31,20,.42);z-index:420;display:flex;
justify-content:flex-end}
.cart-scrim[hidden]{display:none}
.cart{background:var(--void);width:min(430px,100%);height:100%;display:flex;flex-direction:column;
border-left:1.5px solid var(--faint);animation:slidein .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:26px 28px 20px;
border-bottom:1.5px solid var(--faint)}
.cart-top h2{font-size:1.4rem}
.cart-top .bk-x{position:static}
.cart-body{flex:1;overflow-y:auto;padding:10px 28px}
.cart-empty{color:var(--dim);padding:40px 0;text-align:center;font-size:.92rem}
.ci{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
padding:18px 0;border-bottom:1.5px solid var(--faint)}
.ci img{border:1.5px solid var(--faint);border-radius:var(--r)}
.ci-m b{display:block;font-family:var(--serif);font-size:.98rem;font-weight:400;line-height:1.3}
.ci-m span{font-size:.85rem;color:var(--amber)}
.ci-q{display:flex;align-items:center;gap:2px;border:1.5px solid var(--faint);border-radius:var(--r)}
.ci-q button{background:none;border:0;width:28px;height:30px;cursor:pointer;color:var(--chalk);font-size:.95rem}
.ci-q button:hover{color:var(--amber)}
.ci-q i{font-style:normal;font-size:.88rem;min-width:18px;text-align:center}
.ci-x{background:none;border:0;color:var(--dim);cursor:pointer;padding:6px;font-size:.8rem}
.ci-x:hover{color:var(--alert)}
.cart-foot{padding:22px 28px 26px;border-top:1.5px solid var(--faint);background:var(--void2)}
.cart-sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.cart-sum span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.cart-sum b{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--amber)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--chalk);
color:var(--void);padding:13px 22px;border-radius:var(--r);font-size:.88rem;z-index:500;
opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
.pdp-grid{grid-template-columns:1fr;gap:32px}
.pdp-specs dl{grid-template-columns:1fr}
.cart{width:100%}
}
/* ---------- First block under the header ----------
.sec carries 130px for rhythm between mid-page sections, but that is far
too much directly under a sticky header. Any first block gets a tighter
top so the page starts where the eye expects it. */
header + section,
header + .cart-scrim + section,
.pdp{padding-top:40px}
.pdp .crumb{margin-bottom:22px}
.shop-hero{padding-top:44px}
.rashi-hero{padding-top:38px}
.hero{padding-top:72px}
@media(max-width:900px){
header + section,
header + .cart-scrim + section,
.pdp{padding-top:26px}
.shop-hero{padding-top:28px}
.rashi-hero{padding-top:24px}
.hero{padding-top:40px}
}
/* ---------- Header, refined ----------
Was: topbar row + 6 nav items + a 236px search field + cart + language
name + CTA. Now one row, four nav items, and compact icon controls. */
header{border-top:0}
header .wrap{gap:22px}
.head-right{gap:14px}
.hicon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
color:var(--chalk);border-radius:var(--r);transition:color .2s,background .2s}
.hicon:hover{color:var(--amber-hover);background:color-mix(in srgb, var(--amber) 7%, transparent)}
.cart-open{width:34px;height:34px;justify-content:center;border-radius:var(--r);transition:background .2s}
.cart-open:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
/* search collapses to an icon and expands on demand */
.searchbox{min-width:0;width:34px;height:34px;padding:0;border-color:transparent;
overflow:visible;transition:width .28s cubic-bezier(.2,.7,.3,1),border-color .2s,background .2s;
cursor:pointer;justify-content:center;background:none}
.searchbox:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
.searchbox > svg{width:17px;height:17px;color:var(--chalk);margin:0;flex-shrink:0}
.searchbox:hover > svg{color:var(--amber)}
#searchInput{width:0;min-width:0;opacity:0;transition:opacity .2s;padding:0;border:0;
pointer-events:none}
.searchbox.is-open{width:min(268px,34vw);padding:0 12px;border-color:var(--faint);
background:var(--void);cursor:auto;justify-content:flex-start;gap:9px}
.searchbox.is-open > svg{color:var(--dim)}
.searchbox.is-open #searchInput{width:100%;opacity:1;pointer-events:auto}
.sx-panel{min-width:300px;right:0;left:auto}
/* language: globe plus a two-letter code */
.langbtn{border-bottom:0;padding:0 8px;height:34px;border-radius:var(--r);gap:6px;
text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.langbtn:hover{background:color-mix(in srgb, var(--amber) 7%, transparent)}
#langLabel{font-weight:500}
nav{gap:26px}
@media(max-width:900px){
header .wrap{gap:12px}
.searchbox{order:0}
.searchbox.is-open{position:absolute;left:20px;right:20px;top:100%;width:auto;
margin-top:8px;height:44px;background:var(--void2);z-index:140}
.hicon{width:32px;height:32px}
}
/* ---------- YouTube Shorts ---------- */
.shorts-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.shorts-rail::-webkit-scrollbar{height:8px}
.shorts-rail::-webkit-scrollbar-thumb{background:var(--faint);border-radius:99px}
.short{position:relative;aspect-ratio:9/16;border:1.5px solid var(--faint);border-radius:var(--r);
overflow:hidden;background:var(--void2);padding:0;cursor:pointer;scroll-snap-align:start;
transition:border-color .25s,transform .25s}
.short:hover{border-color:var(--amber);transform:translateY(-3px)}
.short img{width:100%;height:100%;object-fit:cover;display:block}
.short-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:1.5rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);
background:linear-gradient(transparent 40%,rgba(0,0,0,.45))}
.short-t{position:absolute;left:0;right:0;bottom:0;padding:12px 12px 14px;color:#fff;
font-size:.82rem;line-height:1.35;text-align:left;
background:linear-gradient(transparent,rgba(0,0,0,.8))}
.shorts-empty{display:block}
.yt-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:26px 28px;
background:var(--void2);border:1.5px solid var(--faint);border-radius:var(--r)}
.yt-ico{color:#c4302b;display:flex;flex-shrink:0}
.yt-card b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400}
.yt-card span{font-size:.85rem;color:var(--dim)}
.yt-card .btn{margin-left:auto}
.yt-scrim{position:fixed;inset:0;background:rgba(61,31,20,.72);z-index:460;display:flex;
align-items:center;justify-content:center;gap:14px;padding:3vh 16px}
.yt-scrim[hidden]{display:none}
.yt-stage{display:flex;flex-direction:column;align-items:center;gap:12px;max-height:94vh}
/* The YouTube iframe player always lays out 16:9 and letterboxes a vertical
video. To fill a 9:16 frame we make the player wide enough that its
pillarboxed video is exactly the frame width, then crop the sides.
frame 9:16 -> player width = frame width x (16/9)^2 = 316%. */
.yt-box{position:relative;height:min(88vh,820px);aspect-ratio:9/16;width:auto;max-width:100%;
overflow:hidden;border-radius:var(--r);background:#000}
.yt-box iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
height:100%;width:316%;border:0;display:block;pointer-events:auto}
.yt-box .bk-x{position:absolute;color:#fff;background:rgba(0,0,0,.62);border-radius:99px;
top:10px;right:10px;z-index:3;width:34px;height:34px;display:flex;align-items:center;
justify-content:center;padding:0}
.yt-meta{display:flex;align-items:center;gap:14px;color:#fff;font-size:.85rem;opacity:.9;
max-width:min(100%,420px)}
.yt-meta i{font-style:normal;font-size:.75rem;letter-spacing:.1em;opacity:.7;margin-left:auto;
white-space:nowrap}
.yt-nav{width:46px;height:46px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.35);
border-radius:99px;background:rgba(0,0,0,.62);color:#fff;font-size:1.5rem;line-height:1;
cursor:pointer;transition:all .2s}
.yt-nav:hover:not(:disabled){background:var(--amber);border-color:var(--amber)}
.yt-nav:disabled{opacity:.25;cursor:default}
@media(max-width:760px){
.yt-scrim{gap:0;padding:0}
.yt-box{height:100vh;height:100dvh;border-radius:0;max-width:none}
.yt-stage{max-height:none;gap:0}
.yt-meta{position:fixed;left:14px;right:76px;bottom:16px;z-index:3;max-width:none;
text-shadow:0 1px 6px rgba(0,0,0,.8)}
.yt-nav{position:fixed;right:14px;z-index:4;width:42px;height:42px}
.yt-prev{bottom:74px}
.yt-next{bottom:24px}
}
@media(max-width:900px){
.shorts-rail{grid-auto-columns:minmax(150px,1fr)}
.yt-card .btn{margin-left:0;width:100%}
}
/* Shorts thumbnails are 9:16 crops; oar/hq both work, object-fit handles the rest */
.short img{background:var(--void2)}
/* ---------- Shorts rail: header bar + arrows ---------- */
/* The -26px pulled this bar up under a .sec-head, which has a 70px bottom
margin. On videos.html it follows a .row-head with a 14px margin instead,
so the same -26px dragged the Follow button straight onto the heading.
The pull now only applies where it was designed to. */
.shorts-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin:0 0 26px}
.sec-head + .shorts-bar{margin-top:-26px}
.shorts-bar .btn{display:inline-flex;align-items:center;gap:9px}
.rail-nav{display:flex;gap:8px}
.rail-btn{width:38px;height:38px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void);color:var(--chalk);font-size:1.2rem;line-height:1;cursor:pointer;
transition:all .2s}
.rail-btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.rail-btn:disabled{opacity:.35;cursor:default}
.shorts-rail{scroll-behavior:smooth;scrollbar-width:thin}
.shorts-rail::-webkit-scrollbar{height:6px}
.shorts-rail::-webkit-scrollbar-thumb{background:var(--faint);border-radius:99px}
@media(max-width:900px){
.rail-nav{display:none} /* swipe is the affordance on touch */
.shorts-bar{margin:-18px 0 20px}
.shorts-bar .btn{width:100%;justify-content:center}
}
/* ---------- Consultation packages ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pkg{display:flex;flex-direction:column;padding:30px 26px 26px;background:var(--void2);
border:1.5px solid var(--faint);border-radius:var(--r);position:relative;
transition:border-color .25s,transform .25s,box-shadow .25s}
.pkg:hover{border-color:var(--amber);transform:translateY(-4px);
box-shadow:0 14px 30px rgba(61,31,20,.09)}
.pkg-ico{color:var(--amber);margin-bottom:18px}
.pkg-ico .gl{width:34px;height:34px}
.pkg h3{font-size:1.18rem;margin-bottom:8px}
.pkg-for{font-size:.85rem;color:var(--dim);margin-bottom:18px}
.pkg-list{list-style:none;margin:0 0 22px;padding:0;flex:1;display:flex;
flex-direction:column;gap:9px}
.pkg-list li{font-size:.86rem;color:var(--dim);padding-left:20px;position:relative;line-height:1.5}
.pkg-list li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;
border-left:1.5px solid var(--tulsi);border-bottom:1.5px solid var(--tulsi);
transform:rotate(-45deg) translateY(-2px)}
.pkg-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:20px;
padding-top:18px;border-top:1.5px solid var(--faint)}
.pkg-price b{font-family:var(--serif);font-size:1.85rem;font-weight:400;color:var(--brand-red);line-height:1}
.pkg-price s{font-size:.9rem;color:var(--dim);opacity:.8}
.pkg-save{width:100%;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tulsi)}
@media(max-width:1000px){.pkg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pkg-grid{grid-template-columns:1fr}}
/* ============================================================
THEMES — every token below is audited to WCAG AA.
Swap with data-theme on ; theme.js persists the choice.
============================================================ */
:root[data-theme="midnight"]{
--hint:#746B59;
--amber-hover:#BD8A16;
--on-fill:#12152B;
color-scheme:dark;
--void:#12152B; --void2:#1A1E3F; --chalk:#F3EFE6; --dim:#B9B2A4;
--faint:#31365C; --amber:#E8B33C; --amber-dim:#C9963A; --haldi:#FFC978;
--tulsi:#6FCF97; --alert:#FF8A6B;
--edge:#666CA0; /* 3.61:1 on the page, 3.24:1 on panels */
}
:root[data-theme="celestia"]{
--hint:#8B8B99;
--amber-hover:#984F0A;
--on-fill:#FFFFFF;
--void:#FFF8E8; --void2:#F5F4FA; --chalk:#2D2D2D; --dim:#5A5A66;
--faint:#DCDAE8; --amber:#AD5A0B; --amber-dim:#8A4708; --haldi:#F5B700;
--tulsi:#1E6B45; --alert:#C0392B;
}
/* ============================================================
GAUTAM DAY / GAUTAM NIGHT — built from the logo.
Every value below was derived, not chosen. The two logo colours were
sampled from the file, then the hue was held fixed and only the
lightness moved until each one cleared its contrast requirement
against BOTH the page and the panel it sits on. Hue is what the eye
reads as "the brand colour"; lightness is the part that can give.
Why the raw logo colours are not used for text:
brand blue on white 3.19:1 — fails AA body text (needs 4.5)
brand red on #12152B 3.75:1 — fails AA body text
Neither is a defect in the logo. A mark is seen, not read. But a link
in body copy is read, so it gets the corrected value while the emblem
keeps the original.
Measured results, all against page and panel:
day accent #0578B2 4.84 / 4.54 accent-2 #E01B25 4.82 / 4.52
night accent #0693D9 5.26 / 4.53 accent-2 #EB5A61 5.24 / 4.52
day edge #6896AD 3.20 / 3.00 night edge #4C7386 3.49 / 3.01
The dark surfaces are the logo blue itself at 8.5% and 13.5% lightness,
so the background is the brand desaturated rather than a neutral navy
that happens to sit nearby.
============================================================ */
:root[data-theme="gautam"]{
--hint:#6595AC;
--amber-hover:#035680;
--on-fill:#FFFFFF;
color-scheme:light;
--void:#FFFFFF; /* page */
--void2:#F4F8FB; /* panels, tiles, menus — the blue hue at 97% */
--chalk:#1D2D35; /* body text — 14.20:1 */
--dim:#406577; /* secondary text — 6.28:1 */
--faint:#D7E3EA; /* hairlines */
/* Taken to AAA (7:1), not left scraping AA.
At #0578B2 the accent measured 4.84:1 against a 4.5 minimum — a
margin of 0.34. Legal, and it looked it: small letterspaced caps
like "25+ YEARS OF VEDIC PRACTICE" read thin and washed out on a
white page. Deeper blue, same hue, 7.48:1. White on the button
improves by exactly as much. */
--amber:#045A85; /* accent — 7.48:1 on white, 7.01:1 on panels (AAA) */
--amber-dim:#2E799F; /* borders, secondary */
--haldi:#0698E1; /* decorative fills only — the untouched logo blue */
--tulsi:#0F6B4F; /* favourable */
--alert:#A9141C; /* the logo red, deep enough to read as text */
--edge:#6896AD; /* form-control borders — 3.20:1 on white */
}
:root[data-theme="gautamnight"]{
--hint:#5E727C;
--amber-hover:#069AE3;
--on-fill:#0D191F;
color-scheme:dark;
--void:#0D191F; /* page — logo blue at 8.5% lightness */
--void2:#16272F; /* panels — the same hue at 13.5% */
--chalk:#EBEEF0; /* body text — 15.32:1 */
--dim:#A8B6BD; /* secondary text — 8.58:1 */
--faint:#25404C; /* hairlines */
--amber:#0693D9; /* accent — logo blue, near enough untouched */
--amber-dim:#0B7FBB;
--haldi:#3FB6EE; /* decorative fills */
--tulsi:#5FD3A3;
--alert:#EB5A61; /* the logo red, lightened to stay readable on navy */
--edge:#4C7386; /* 3.49:1 on the page, 3.01:1 on panels */
}
/* The dark theme needs the same surface corrections midnight already has.
Grouped rather than duplicated so the two cannot drift apart. */
:root[data-theme="gautamnight"] header{background:rgba(13,25,31,.82)}
:root[data-theme="gautamnight"] header.scrolled{background:rgba(13,25,31,.96)}
:root[data-theme="gautamnight"] .tab.is-on,
:root[data-theme="gautamnight"] .fchip.is-on,
:root[data-theme="gautamnight"] .toast{background:var(--void2);color:var(--chalk);
border:1.5px solid var(--faint)}
:root[data-theme="gautamnight"] .pgw img,
:root[data-theme="gautamnight"] .pdp-img img{filter:brightness(.92) contrast(1.04)}
:root[data-theme="gautamnight"] #stars{opacity:.5}
/* Same trap as midnight: a theme-scoped rule (0,3,0) outranks .btn-fill:hover
(0,2,0), so without this the hover text is the fill colour on the fill
colour — 1.00:1, invisible. This cost an hour once already. */
:root[data-theme="gautam"] .btn-fill:hover,
:root[data-theme="gautamnight"] .btn-fill:hover{
background:transparent;color:var(--amber)}
/* ---------- the mark ----------
The emblem is the brand and is never recoloured — not inverted for dark,
not tinted to match an accent. It reads on both surfaces because it is
saturated blue and red on transparency, which is why it was cropped away
from the white wordmark underneath it. */
/* The two logo colours, used where colour is decorative rather than read.
Selection and the focus ring are the honest places for them: no text is
being asked to sit ON these, so the contrast floor that rules them out
for links does not apply. */
::selection{background:color-mix(in srgb, var(--brand-blue) 26%, transparent);
color:var(--chalk)}
/* The raw logo blue measured 2.99:1 against the light panel — one
hundredth under the 3:1 that WCAG 1.4.11 requires of a focus
indicator, and a keyboard user on a tile would have lost their place.
The theme accent is the corrected blue and clears it on every surface,
so the ring uses that. Same colour to the eye, and legal. */
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;
border-radius:2px}
/* Red is the second brand colour, so the small red dot on the cart is on
brand rather than a generic notification colour. */
.cart-badge{background:var(--brand-red);color:#fff}
/* The footer lockup.
.brand is a flex column for the header, where it is centred. In the
footer it heads a left-aligned block, so it aligns left and the mark
sits above the name — the same arrangement as the logo file itself. */
/* Scoped to the footer as well as the class. .brand and .f-brand are both
(0,1,0), so the only thing deciding it was source order — which works,
but silently, and it breaks the moment anything is reordered. Adding
`footer` makes it (0,1,1) and the intent is then written down rather
than depending on where the line happens to sit. */
/* The lockup sits hard left, flush with the paragraph beneath it — but the
mark is centred over the NAME, not aligned to its left edge.
inline-flex is what makes both true at once. As a block-level flex
container the box would fill the column, and centring the mark inside
it would centre it in the column — 90px adrift of the text. Shrink to
fit and the box is exactly as wide as "Gautam Speaks", so its left edge
is the paragraph's left edge and its centre is the name's centre. */
footer .f-brand{display:inline-flex;align-items:center;font-size:1.5rem;gap:11px;
margin-bottom:4px;text-align:left}
footer .f-brand .brand-mark{width:46px;height:46px}
.f-brand{align-items:center}
@media(max-width:900px){
/* The header's mobile rule turns .brand into a row. The footer is not
short of vertical space, so it keeps the stacked lockup. */
footer .f-brand{flex-direction:column;font-size:1.35rem}
footer .f-brand .brand-mark{width:40px;height:40px}
}
/* The mark leads the lockup, so it is larger than it was beside the name. */
.brand-mark{width:42px;height:42px;flex-shrink:0;display:block;
transition:transform .34s cubic-bezier(.2,.7,.3,1),width .3s,height .3s}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
header.scrolled .brand-mark{width:32px;height:32px}
@media(prefers-reduced-motion:reduce){ .brand:hover .brand-mark{transform:none} }
/* surfaces that were hard-coded for the light build */
:root[data-theme="midnight"] header{background:rgba(18,21,43,.82)}
:root[data-theme="midnight"] header.scrolled{background:rgba(18,21,43,.96)}
:root[data-theme="midnight"] .toast{background:var(--void2);color:var(--chalk);
border:1.5px solid var(--faint)}
:root[data-theme="midnight"] .pgw img,
:root[data-theme="midnight"] .pdp-img img{filter:brightness(.92) contrast(1.04)}
:root[data-theme="midnight"] #stars{opacity:.5}
:root[data-theme="midnight"] .bk-scrim,
:root[data-theme="midnight"] .cart-scrim{background:rgba(0,0,0,.62)}
/* ---------- backdrop layer ---------- */
/* One per hero band. The host is made a positioning context and its
content lifted above, so the artwork can never sit over body copy. */
.backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
color:var(--chalk);transition:opacity .4s}
.backdrop svg{width:100%;height:100%;display:block}
.hero,.shop-hero,.rashi-hero,.ac-top,.sec.pdp{position:relative;isolation:isolate}
.hero > .wrap,.shop-hero > .wrap,.rashi-hero > .wrap,.ac-top > .wrap,
.sec.pdp > .wrap{position:relative;z-index:1}
/* Product pages have no hero band, so the artwork gets a capped height and
fades out well above the product copy and price. */
.sec.pdp > .backdrop{bottom:auto;height:300px;
-webkit-mask-image:linear-gradient(#000 40%,transparent);
mask-image:linear-gradient(#000 40%,transparent)}
@keyframes bdSpin{to{transform:rotate(360deg)}}
@keyframes bdDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(3%,-2%)}}
@keyframes bdTw{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes bdShoot{0%{transform:translate(0,0);opacity:0}5%{opacity:1}
25%{opacity:1}34%{transform:translate(900px,540px);opacity:0}100%{opacity:0}}
.bd-spin{animation:bdSpin 300s linear infinite}
.bd-drift{animation:bdDrift 50s ease-in-out infinite}
.bd-tw circle{animation:bdTw 6s ease-in-out infinite}
.bd-tw circle:nth-child(3n){animation-duration:8s}
.bd-tw circle:nth-child(4n){animation-duration:4.5s}
.bd-shoot{animation:bdShoot 9s linear infinite}
.bd-shoot:nth-of-type(2){animation-duration:13s;animation-delay:4s}
.bd-shoot:nth-of-type(3){animation-duration:16s;animation-delay:8s}
/* ---------- cosmic: orbiting planets, drifting zodiac ----------
Four different periods so nothing ever lines up and repeats
visibly. All of it stops under prefers-reduced-motion. */
@keyframes bdOrbit{to{transform:rotate(360deg)}}
@keyframes bdOrbitBack{to{transform:rotate(-360deg)}}
.bd-p1{animation:bdOrbit 240s linear infinite}
.bd-p2{animation:bdOrbit 400s linear infinite}
.bd-p3{animation:bdOrbitBack 320s linear infinite}
.bd-p4{animation:bdOrbit 180s linear infinite}
.bd-drift{animation:bdDrift 90s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
.bd-p1,.bd-p2,.bd-p3,.bd-p4,.bd-drift{animation:none!important}
}
/* ---------- theme toggle in the header ---------- */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
background:none;border:0;cursor:pointer;color:var(--chalk);border-radius:var(--r);
transition:background .2s,color .2s}
.theme-toggle:hover{color:var(--amber-hover);background:color-mix(in srgb, var(--amber) 7%, transparent)}
/* ---------- design panel (yours, not the visitor's) ---------- */
#designPanel{position:fixed;right:18px;bottom:18px;z-index:600;width:min(340px,calc(100vw - 36px));
background:var(--void2);border:1.5px solid var(--faint);border-radius:12px;
box-shadow:0 24px 60px rgba(0,0,0,.22);font-size:.82rem;overflow:hidden}
#designPanel header{display:flex;align-items:center;justify-content:space-between;
padding:13px 16px;border-bottom:1.5px solid var(--faint);position:static;background:none}
#designPanel header b{font-family:var(--serif);font-size:1rem;font-weight:500}
#designPanel header button{background:none;border:0;cursor:pointer;color:var(--dim);font-size:.9rem}
.dp-row{padding:12px 16px;border-bottom:1.5px solid var(--faint)}
.dp-row > span{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--dim);margin-bottom:9px}
.dp-opts{display:flex;flex-wrap:wrap;gap:6px}
.dp-opts button{border:1.5px solid var(--faint);background:none;color:var(--dim);
padding:6px 11px;border-radius:999px;font:inherit;font-size:.75rem;cursor:pointer;transition:all .18s}
.dp-opts button:hover{border-color:var(--amber-dim);color:var(--chalk)}
.dp-opts button.on{background:var(--amber);border-color:var(--amber);color:var(--void)}
#designPanel footer{padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#dpCode{width:100%;font-family:ui-monospace,monospace;font-size:.66rem;color:var(--dim);
background:var(--void);padding:8px 10px;border-radius:6px;border:1.5px solid var(--faint);
word-break:break-all;margin-bottom:4px}
#designPanel footer button{border:1.5px solid var(--faint);background:none;color:var(--chalk);
padding:7px 13px;border-radius:999px;font:inherit;font-size:.74rem;cursor:pointer}
#designPanel footer button:hover{border-color:var(--amber)}
@media(prefers-reduced-motion:reduce){.backdrop *{animation:none!important}}
/* ============================================================
BUTTON STYLES — swap with data-btn on .
Every variant keeps the same label contrast as the base.
============================================================ */
:root[data-btn="pill"] .btn{border-radius:999px}
:root[data-btn="pill"] .prod-cta .btn,
:root[data-btn="pill"] .pkg .btn{border-radius:999px}
:root[data-btn="square"] .btn{border-radius:0}
:root[data-btn="outline"] .btn-fill{
background:none;color:var(--amber);border:1.5px solid var(--amber);font-weight:500}
:root[data-btn="outline"] .btn-fill:hover{background:var(--amber);color:var(--void)}
:root[data-btn="outline"] .tab.is-on,
:root[data-btn="outline"] .fchip.is-on{background:none;color:var(--amber);
border:1.5px solid var(--amber)}
:root[data-btn="gradient"] .btn-fill{
background:linear-gradient(135deg,var(--amber-dim),var(--amber));border:0;
color:var(--void);font-weight:600}
:root[data-btn="gradient"] .btn-fill:hover{
background:linear-gradient(135deg,var(--amber),var(--amber-dim));color:var(--void)}
:root[data-btn="glow"] .btn-fill{
box-shadow:0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent),
0 8px 26px color-mix(in srgb, var(--amber) 32%, transparent)}
:root[data-btn="glow"] .btn-fill:hover{
transform:translateY(-2px);
box-shadow:0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent),
0 12px 34px color-mix(in srgb, var(--amber) 42%, transparent)}
:root[data-btn="lift"] .btn{border:1.5px solid var(--chalk);border-radius:var(--r);
box-shadow:3px 3px 0 var(--chalk);transition:transform .16s,box-shadow .16s}
:root[data-btn="lift"] .btn:hover{transform:translate(-1px,-1px);
box-shadow:5px 5px 0 var(--chalk)}
:root[data-btn="lift"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--chalk)}
:root[data-btn="underline"] .btn{border:0;border-radius:0;padding-inline:0;background:none;
color:var(--chalk);position:relative;padding-bottom:9px}
:root[data-btn="underline"] .btn::after{content:'';position:absolute;left:0;right:0;bottom:0;
height:1.5px;background:var(--faint);transition:background .22s}
:root[data-btn="underline"] .btn:hover{color:var(--amber)}
:root[data-btn="underline"] .btn:hover::after{background:var(--amber)}
:root[data-btn="underline"] .btn-fill{color:var(--amber);font-weight:600}
:root[data-btn="underline"] .btn-fill::after{background:var(--amber);height:2px}
/* full-width contexts still need a target, not a hairline */
:root[data-btn="underline"] .btn-block{padding:14px 0;text-align:center;justify-content:center}
:root[data-btn="underline"] .sticky .btn{padding:20px 10px;justify-content:center}
:root[data-btn="underline"] .sticky .btn::after{display:none}
/* the design panel's own preview row */
.dp-prev{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:2px}
/* Tagged service cards keep their prominence through the frame, not a
different button — the buttons in a grid must all read the same. */
/* The tagged cards used to be framed and filled differently from the rest,
which made the row look inconsistent before you had read a word of it.
They are the same card as every other card now; the only difference is a
small mark in the corner. */
/* ============================================================
CORNER BADGE — "most popular" / "best results"
Open, always. It used to collapse to a single glyph and expand on
hover, which had two problems:
a phone has no hover, so on most of the traffic it never opened
at all — a red dot in the corner meaning nothing;
and a badge that has to be discovered is not doing the job of a
badge. The point is to be read while the eye is skimming a row
of cards, not after somebody has stopped on one.
White on the true logo red, 4.79:1, which passes. This is one of
the few places the unaltered brand colour can carry a label.
============================================================ */
.svc > .tag{
position:absolute; top:12px; right:12px; z-index:2; margin:0;
display:inline-flex; align-items:center; gap:7px;
white-space:nowrap; padding:4px 12px 4px 9px; border-radius:999px;
background:var(--brand-red); border:1.5px solid var(--brand-red);
color:#fff; font-size:.66rem; letter-spacing:.1em; font-weight:500;
/* Nothing to interact with. No transition, no hover state — it is a
label, not a control. */
pointer-events:none}
.svc > .tag::before{content:'\2605'; flex:none; font-size:.82rem; line-height:1}
.svc > .tag[data-i18n="tag_best"]::before{content:'\2726'}
/* the heading no longer has a tag sitting above it */
.svc > div > h3{margin-top:0}
/* The badge is full width now, so the heading needs real clearance —
38px was sized for the collapsed dot. */
.svc h3{padding-right:0;margin-top:34px}
@media(prefers-reduced-motion:reduce){
.svc > .tag{transition:none}
}
/* Touch has no hover: show the full badge rather than a glyph nobody can open */
@media(hover:none){
.svc > .tag{max-width:190px; gap:7px; padding:4px 12px 4px 9px}
}
/* ---------- Checkout block in the cart drawer ---------- */
.ck-row{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-bottom:12px}
.cart-foot input,.cart-foot select{border:1.5px solid var(--edge);border-radius:var(--r);
padding:10px 12px;background:var(--void);font-size:.86rem}
.cart-foot #ckGstin{width:100%;margin-bottom:14px}
.ck-cod{margin:0 0 12px;font-size:.82rem}
.ck-break{border-top:1.5px solid var(--faint);padding-top:12px;margin-bottom:14px}
.ck-break > div{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;
color:var(--dim);padding:3px 0}
.ck-break > div b{font-weight:500;color:var(--chalk)}
.ck-break .ck-total{border-top:1.5px solid var(--faint);margin-top:8px;padding-top:10px;
font-size:.95rem}
.ck-break .ck-total b{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--amber)}
.ck-eta{font-size:.76rem;color:var(--dim);margin-top:8px}
.ck-warn{color:var(--alert)}
/* ---------- cart subtotal (restored — its absence used to crash paint()) ---------- */
.ck-sub{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding-bottom:14px;margin-bottom:14px;border-bottom:1.5px solid var(--faint)}
.ck-sub span{font-size:.86rem;color:var(--dim)}
.ck-sub b{font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--chalk)}
/* ---------- services teaser on the homepage ---------- */
.svc-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:940px){.svc-mini{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-mini{grid-template-columns:1fr}}
.smini{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding:16px 18px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2);text-decoration:none;color:var(--chalk);
transition:border-color .2s,transform .2s,box-shadow .2s}
.smini:hover,.smini:focus-visible{border-color:var(--amber);transform:translateY(-2px);
box-shadow:0 10px 22px rgba(61,31,20,.07)}
.smini-n{font-size:.92rem;font-weight:500;line-height:1.35}
.smini-p{font-family:var(--serif);font-size:1.02rem;color:var(--alert);white-space:nowrap}
.svc-more{margin-top:26px;text-align:center}
@media(prefers-reduced-motion:reduce){.smini:hover{transform:none}}
/* ============================================================
ACCOUNTS
============================================================ */
.acct-open{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border:1.5px solid var(--faint);border-radius:var(--r);
background:none;color:var(--chalk);cursor:pointer;transition:border-color .2s,color .2s}
.acct-open:hover,.acct-open:focus-visible{border-color:var(--amber);color:var(--amber)}
.acct-open.is-in{border-color:var(--amber);color:var(--amber)}
.acct-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
background:var(--tulsi);border:2px solid var(--void)}
/* ---------- sign-in modal ---------- */
.auth-card{max-width:440px}
.auth-tabs{display:flex;gap:8px;margin:14px 0 18px}
.auth-tab{flex:1;padding:10px 14px;border:1.5px solid var(--faint);border-radius:var(--r);
background:none;color:var(--dim);font:inherit;font-size:.88rem;cursor:pointer;transition:all .2s}
.auth-tab.is-on{border-color:var(--amber-hover);color:var(--amber);background:color-mix(in srgb, var(--amber) 7%, transparent)}
.auth-tab:hover:not(.is-on){border-color:var(--amber-dim)}
.auth-ok{font-size:.86rem;color:var(--tulsi);margin:10px 0 0}
.auth-back{display:block;width:100%;margin-top:10px;padding:8px;border:0;background:none;
color:var(--dim);font:inherit;font-size:.84rem;text-decoration:underline;cursor:pointer}
.auth-back:hover{color:var(--amber)}
/* ---------- dashboard shell ---------- */
.ac-top{padding:44px 0 8px}
.ac-top h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.5rem);
letter-spacing:-.01em;margin-top:12px}
.ac-sec{padding-top:26px}
.ac-wrap{display:grid;grid-template-columns:232px 1fr;gap:38px;align-items:start}
@media(max-width:860px){.ac-wrap{grid-template-columns:1fr;gap:22px}}
.ac-side{position:sticky;top:104px}
@media(max-width:860px){.ac-side{position:static}}
.ac-nav{display:flex;flex-direction:column;gap:2px}
@media(max-width:860px){.ac-nav{flex-direction:row;overflow-x:auto;gap:8px;
padding-bottom:10px;-webkit-overflow-scrolling:touch}}
.ac-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:11px 14px;border:0;border-left:2.5px solid transparent;border-radius:0 var(--r) var(--r) 0;
background:none;color:var(--dim);font:inherit;font-size:.92rem;text-align:left;
cursor:pointer;white-space:nowrap;transition:all .18s}
.ac-tab:hover{color:var(--chalk);background:var(--void2)}
.ac-tab.is-on{color:var(--amber);border-left-color:var(--amber);background:var(--void2);font-weight:500}
@media(max-width:860px){.ac-tab{border-left:0;border-bottom:2.5px solid transparent;border-radius:var(--r)}
.ac-tab.is-on{border-left-color:transparent;border-bottom-color:var(--amber)}}
.ac-n{font-style:normal;font-size:.72rem;min-width:20px;padding:2px 6px;border-radius:999px;
background:var(--faint);color:var(--chalk);text-align:center}
.ac-tab.is-on .ac-n{background:var(--amber);color:var(--void)} /* 4.89:1 light · 9.37:1 dark */
.ac-out{margin-top:20px;padding:10px 14px;border:1.5px solid var(--faint);border-radius:var(--r);
background:none;color:var(--dim);font:inherit;font-size:.88rem;cursor:pointer;width:100%;
transition:all .2s}
.ac-out:hover{border-color:var(--alert);color:var(--alert)}
.ac-panel{display:none}
.ac-panel.is-on{display:block;animation:acIn .28s ease}
@keyframes acIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ac-panel.is-on{animation:none}}
.ac-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-bottom:14px}
.ac-head h2{font-family:var(--serif);font-weight:400;font-size:1.5rem}
.ac-for{font-size:.84rem;color:var(--dim)}
.ac-sub2{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:34px 0 12px}
.ac-note{font-size:.88rem;color:var(--dim);max-width:66ch;margin-bottom:16px;line-height:1.65}
/* ---------- cards ---------- */
.ac-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:30px}
.ac-card{padding:18px 20px;border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2)}
.ac-k{display:block;font-size:.78rem;color:var(--dim);margin-bottom:6px}
.ac-card b{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--chalk);line-height:1.1}
.ac-card small{display:block;font-size:.75rem;color:var(--dim);margin-top:5px;line-height:1.4}
/* ---------- rows ---------- */
.ac-block{margin-bottom:34px}
.ac-row{display:flex;align-items:flex-start;gap:16px;padding:15px 18px;
border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2);margin-bottom:8px}
.ac-row-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-row-m b{font-size:.96rem;font-weight:500}
.ac-row-m span{font-size:.82rem;color:var(--dim);line-height:1.45}
.ac-chartm{font-size:.78rem!important;color:var(--amber)!important}
.ac-row-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.ac-amt{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--chalk)}
.ac-pill{font-size:.72rem;padding:3px 10px;border-radius:999px;background:var(--faint);color:var(--chalk)}
/* These four have fixed light backgrounds, so the ink must be fixed too —
var(--chalk) is near-white on Midnight and vanished on the beige chip. */
.ac-confirmed,.ac-shipped,.ac-packed{
background:color-mix(in srgb, var(--amber) 16%, var(--void2));color:var(--amber-hover)} /* 12.86:1 */
.ac-completed,.ac-delivered{
background:color-mix(in srgb, var(--tulsi) 16%, var(--void2));color:var(--tulsi)} /* 7.15:1 */
.ac-cancelled,.ac-no_show,.ac-returned{
background:color-mix(in srgb, var(--alert) 16%, var(--void2));color:var(--alert)} /* 6.97:1 */
.ac-badge{font-style:normal;font-size:.68rem;padding:2px 7px;border-radius:999px;
background:var(--amber);color:var(--void);vertical-align:middle;margin-left:6px}
.ac-lnk{border:0;background:none;color:var(--dim);font:inherit;font-size:.8rem;
text-decoration:underline;cursor:pointer;padding:0}
.ac-lnk:hover{color:var(--alert)}
.ac-empty{padding:34px 24px;border:1.5px dashed var(--faint);border-radius:var(--r);text-align:center}
.ac-empty p{color:var(--dim);font-size:.9rem;margin-bottom:16px;max-width:48ch;
margin-left:auto;margin-right:auto;line-height:1.6}
/* ---------- orders ---------- */
.ac-order{border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2);
margin-bottom:12px;overflow:hidden}
.ac-order .ac-row{border:0;margin:0;background:none}
.ac-items{list-style:none;padding:0 18px 12px;margin:0}
.ac-items li{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;
color:var(--dim);padding:5px 0;border-top:1px solid var(--faint)}
.ac-items li b{font-weight:500;color:var(--chalk)}
.ac-track{display:inline-block;margin:0 18px 14px;font-size:.84rem;color:var(--amber)}
.ac-inv{margin:0 18px 14px;font-size:.78rem;color:var(--dim)}
/* ---------- dasha ---------- */
.dasha-now{padding:20px 22px;border:1.5px solid var(--amber);border-radius:var(--r);
background:color-mix(in srgb, var(--amber) 4.5%, transparent);margin-bottom:16px}
.dasha-now span{display:block;font-size:.76rem;color:var(--dim);margin-bottom:4px}
.dasha-now b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--amber)}
.dasha-now small{display:block;font-size:.8rem;color:var(--dim);margin-top:3px}
.dasha-bar{height:5px;border-radius:999px;background:var(--faint);margin-top:14px;overflow:hidden}
.dasha-bar i{display:block;height:100%;background:var(--amber);border-radius:999px}
.dasha-list{list-style:none;padding:0;margin:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.dasha-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;
border:1.5px solid var(--faint);border-radius:var(--r);font-size:.82rem}
.dasha-list li b{font-weight:500}
.dasha-list li span{color:var(--dim);font-size:.76rem}
.dasha-list li.is-on{border-color:var(--amber);background:color-mix(in srgb, var(--amber) 5%, transparent)}
.dasha-list li.is-on b{color:var(--amber)}
/* ---------- remedies ---------- */
.ac-rem{align-items:center}
.ac-rem.is-done .ac-row-m b{text-decoration:line-through;color:var(--dim)}
.ac-tick{position:relative;flex-shrink:0;width:24px;height:24px;cursor:pointer}
.ac-tick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ac-tick span{display:block;width:24px;height:24px;border:1.5px solid var(--faint);
border-radius:var(--r);transition:all .2s}
.ac-tick input:checked + span{background:var(--tulsi);border-color:var(--tulsi)}
.ac-tick input:checked + span::after{content:'';position:absolute;left:8px;top:4px;
width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.ac-tick input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}
/* ---------- forms ---------- */
.ac-form{margin-top:16px;padding:22px;border:1.5px solid var(--faint);
border-radius:var(--r);background:var(--void2)}
.ac-formbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ac-danger{border-color:color-mix(in srgb, var(--alert) 46%, transparent);color:var(--alert)}
.ac-danger:hover{border-color:var(--alert);background:var(--alert);color:var(--on-fill)}
/* ---------- WCAG 1.4.11: control boundaries need 3:1, hairlines do not ----------
--faint stays for decorative rules between content; --edge is for anything
the visitor is meant to click into or type in. */
.ac-form input,.ac-form select,.ac-form textarea,
.auth-card input,.bk input,.bk select,.bk textarea{border-color:var(--edge)}
.ac-tick span{border-color:var(--edge)}
/* ============================================================
SERVICE DETAIL PAGES
============================================================ */
.btn-lg{padding:16px 34px;font-size:1rem}
/* On a detail page the badge sits inline beside the eyebrow, where there is
room for it and no card corner to tuck into. The corner rules are scoped to
`.svc > .tag`, so this is unaffected — stated here so it stays that way. */
.svc-hero .tag{display:inline-block;margin-left:10px;vertical-align:middle;
position:static;max-width:none;padding:3px 10px}
.svc-hero .tag::before{content:none}
.svc-buy{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.svc-price{display:flex;flex-direction:column}
.svc-price b{font-family:var(--serif);font-weight:400;font-size:2.1rem;color:var(--brand-red);line-height:1}
.svc-price small{font-size:.8rem;color:var(--dim);margin-top:4px}
.svc-page{padding-top:34px}
.svc-body{max-width:74ch;margin:0 auto}
.svc-about{font-size:1.02rem;line-height:1.78;color:var(--chalk);margin-bottom:18px}
.svc-h2{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:44px 0 16px}
/* the three facts people scan for before they read anything */
.svc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0 8px}
@media(max-width:720px){.svc-facts{grid-template-columns:1fr}}
.svc-facts > div{padding:16px 18px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2)}
.svc-facts span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--dim);margin-bottom:6px}
.svc-facts b{font-weight:500;font-size:.92rem;line-height:1.5}
.svc-list-t{list-style:none;padding:0;margin:0}
.svc-list-t li{position:relative;padding:9px 0 9px 30px;font-size:.96rem;line-height:1.65;
border-bottom:1px solid var(--faint)}
.svc-list-t li:last-child{border-bottom:0}
.svc-list-t li::before{content:'';position:absolute;left:4px;top:17px;width:7px;height:7px;
border-radius:50%;background:var(--amber)}
.svc-send li::before{border-radius:1px;transform:rotate(45deg);background:none;
border:1.5px solid var(--amber-dim)}
.svc-not{margin:34px 0 0;padding:18px 20px;border-left:3px solid var(--amber-dim);
border-radius:0 var(--r) var(--r) 0;background:var(--void2);font-size:.92rem;
line-height:1.7;color:var(--dim)}
.svc-not span{display:block;font-weight:600;color:var(--chalk);margin-bottom:5px}
.svc-faqs{border-top:1.5px solid var(--faint)}
.svc-faq{border-bottom:1.5px solid var(--faint)}
.svc-faq summary{padding:16px 30px 16px 0;font-size:.98rem;font-weight:500;cursor:pointer;
list-style:none;position:relative}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:'+';position:absolute;right:4px;top:14px;font-size:1.3rem;
color:var(--amber);font-weight:400;transition:transform .2s}
.svc-faq[open] summary::after{content:'\2212'}
.svc-faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.svc-faq p{padding:0 30px 18px 0;font-size:.93rem;line-height:1.72;color:var(--dim)}
.svc-cta{margin:48px 0 10px;padding:32px 26px;border:1.5px solid var(--faint);
border-radius:var(--r);background:var(--void2);text-align:center}
.svc-cta .form-note{margin-top:14px;max-width:52ch;margin-left:auto;margin-right:auto}
.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.svc-card{display:flex;flex-direction:column;gap:5px;padding:18px 20px;
border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2);
text-decoration:none;color:var(--chalk);transition:border-color .2s,transform .2s,box-shadow .2s}
.svc-card:hover,.svc-card:focus-visible{border-color:var(--amber);transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,0,0,.06)}
.svc-card-c{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.svc-card-n{font-size:1rem;font-weight:500;line-height:1.35}
.svc-card-p{font-family:var(--serif);font-size:1.02rem;color:var(--amber)}
@media(prefers-reduced-motion:reduce){.svc-card:hover{transform:none}}
/* ============================================================
WHOLE-CARD LINKS
The pattern is one real anchor whose ::after is stretched over the
card. Nesting a card inside an would swallow the buttons and
give screen readers one enormous link with the entire card as its
name; this keeps the accessible name short, keeps the buttons real
buttons, and still makes the whole surface clickable.
Anything genuinely interactive inside the card sits above the
stretched layer on z-index 2.
============================================================ */
.svc-more-link{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:14px;font-size:.84rem;color:var(--dim);
text-decoration:none;transition:color .2s}
.svc-more-link::before{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.svc-more-link::after{content:'\2192';font-size:1rem;color:var(--amber);
transition:transform .22s}
.svc:hover .svc-more-link{color:var(--amber)}
.svc:hover .svc-more-link::after{transform:translateX(4px)}
/* Only the button needs to sit above the stretched layer. Lifting the
whole .svc-right row would carve a dead band across the card where a
click on the price did nothing — which reads as broken. */
.svc-right .btn{position:relative;z-index:2}
.svc{cursor:pointer}
.svc-right .price{cursor:auto}
/* Keyboard users get the same ring the mouse gets a border for. */
.svc:has(.svc-more-link:focus-visible){outline:2px solid var(--amber);outline-offset:3px}
.svc-more-link:focus-visible{outline:none}
/* Shop cards: .prod-a already links to the detail page, so stretch that
one instead of adding a second link to the same destination. */
.prod{position:relative}
.prod-a::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.prod-cta{position:relative;z-index:2}
.prod:has(.prod-a:focus-visible){outline:2px solid var(--amber);outline-offset:3px}
.prod-a:focus-visible{outline:none}
/* .prod-more stays: an explicit affordance beats a card that is silently
clickable, and it was already aligned in its own column. */
.prod{cursor:pointer}
.prod-cta .btn,.prod-cta .prod-more{cursor:pointer}
/* Shop cards had a second alignment problem: product names run to one or two
lines, so prices and buttons sat at different heights right along the row.
Letting the link area grow and sinking the price to its base lines up both.
.pkg already did this with flex:1 on .pkg-list; .svc does it with flex:1
on the description. This brings .prod into line with them. */
.prod-a{flex:1}
.prod .pp{margin-top:auto;padding-top:16px}
/* Package cards have no detail page — the card opens the booking modal,
which is what its only button did anyway. */
.pkg{cursor:pointer}
.pkg .btn{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
.svc:hover .svc-more-link::after{transform:none}
}
/* ---------- active page in the navigation ---------- */
/* The active item must not change its own width. font-weight:500 here was
re-measuring the label on every page, so the whole bar shifted as you
navigated. Colour plus the underline bar carry the state instead. */
.navgrp.is-active > .navtop,
#nav > a[aria-current="page"]{color:var(--amber)}
.navgrp.is-active > .navtop::after{transform:scaleX(1);background:var(--amber)}
#nav a[aria-current="page"]{color:var(--amber)}
.mega a[aria-current="page"] .ml-t{color:var(--amber)}
.mega a[aria-current="page"]::before{content:'';position:absolute;left:0;top:50%;
width:3px;height:18px;margin-top:-9px;background:var(--amber);border-radius:2px}
.mega a{position:relative}
footer a[aria-current="page"]{color:var(--amber)}
/* the mega menu is an accordion on mobile — keep the marker visible there too */
@media(max-width:900px){
.navgrp.is-active > .navtop{color:var(--amber)}
}
/* ============================================================
BUTTON HOVER — specificity fix
.btn-fill:hover flips the fill to transparent and the label to
amber. But the per-theme label colour is set by
:root[data-theme="midnight"] .btn-fill { color:#12152B } (0,3,0)
which outranks
.btn-fill:hover { color:var(--amber) } (0,2,0)
so on Midnight the background went transparent while the label
stayed near-black — #12152B on a #12152B page, 1.00:1, invisible.
Same on Celestia, where the label stayed cream on a cream page.
The rules below match the theme selector's specificity and come
later in the file, so they win. outline and gradient set their
own hover colour at (0,4,0) and are untouched by this.
============================================================ */
:root[data-theme="midnight"] .btn-fill:hover,
:root[data-theme="celestia"] .btn-fill:hover{
background:transparent;color:var(--amber)}
/* Same trap, same fix, for the two other filled controls. */
:root[data-theme="midnight"] .tab.is-on:hover,
:root[data-theme="celestia"] .tab.is-on:hover,
:root[data-theme="midnight"] .fchip.is-on:hover,
:root[data-theme="celestia"] .fchip.is-on:hover{color:var(--void)}
/* glow keeps its halo on hover; it never set a colour, so it was
inheriting the broken one. Now it inherits the fixed one. */
:root[data-btn="glow"] .btn-fill:hover{color:var(--amber)}
:root[data-btn="lift"] .btn-fill:hover{color:var(--amber)}
/* ---------- videos.html: the same cards, laid out as a grid ---------- */
.shorts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
@media(max-width:600px){.shorts-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.shorts-grid .short{width:100%;flex:none}
.vid-bar{justify-content:space-between;align-items:center}
.vid-note{font-size:.8rem;color:var(--dim);margin:0}
/* ---------- clear cart ---------- */
.cart-top{position:relative}
.cart-clear{margin-left:auto;margin-right:14px;border:0;background:none;
color:var(--dim);font:inherit;font-size:.82rem;text-decoration:underline;
text-underline-offset:3px;cursor:pointer;padding:4px 2px;transition:color .2s}
.cart-clear:hover{color:var(--alert)}
.cart-clear:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* ============================================================
PROMO SLIDER
============================================================ */
/* Was padding-top:0, which put the section header hard against the bottom
border of the free-offer strip above it — the rule appeared to be resting
on the content. A full .sec 130px is too much between two related blocks;
76px reads as deliberate. */
.promo-sec{padding-top:76px}
.promo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.promo-nav{display:flex;gap:8px}
.promo-view{overflow:hidden;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2)}
.promo-rail{display:flex;transition:transform .55s cubic-bezier(.4,.8,.3,1)}
.promo-rail:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.promo{flex:0 0 100%;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;
align-items:center;padding:40px 44px;min-width:0}
@media(max-width:820px){
.promo{grid-template-columns:1fr;gap:22px;padding:30px 26px;text-align:center}
.promo-img{order:-1}
}
.promo-k{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--amber);border:1.5px solid var(--amber-dim);padding:3px 10px;border-radius:var(--r)}
.promo h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);
line-height:1.2;margin:16px 0 10px}
.promo p{color:var(--dim);font-size:.96rem;line-height:1.7;max-width:46ch}
@media(max-width:820px){.promo p{margin-inline:auto}}
.promo-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
@media(max-width:820px){.promo-buy{justify-content:center}}
.promo-price{font-family:var(--serif);font-size:1.7rem;color:var(--amber);line-height:1}
.promo-n{font-size:.78rem;color:var(--tulsi);margin-top:12px}
.promo-img img{width:100%;height:auto;max-width:280px;margin-inline:auto;display:block;
border-radius:var(--r)}
.promo-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.promo-dot{width:9px;height:9px;padding:0;border:1.5px solid var(--edge);border-radius:50%;
background:none;cursor:pointer;transition:all .2s}
.promo-dot.is-on{background:var(--amber);border-color:var(--amber);width:26px;border-radius:999px}
.promo-dot:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* a slider that moves on its own is a WCAG 2.2.2 problem; promo.js also
stops the timer, this makes the jump instant if it ever does fire */
@media(prefers-reduced-motion:reduce){.promo-rail{transition:none}}
/* ============================================================
ABOUT / PROFILE
============================================================ */
/* The seated photograph is 1402x1122 — near 5:4. Squeezed into the old 300px
column it lost the room, which is the whole point of an environmental
portrait: it shows where the consultation actually happens. The image column
now takes slightly more than half and the picture runs its full width. */
.about-top{display:grid;grid-template-columns:1.08fr 1fr;gap:44px;align-items:center;margin-top:22px}
@media(max-width:900px){.about-top{gap:32px}}
@media(max-width:760px){.about-top{grid-template-columns:1fr;gap:26px;text-align:center}}
.about-pic{margin:0}
.about-pic img{width:100%;height:auto;display:block;border-radius:var(--r);
border:1.5px solid var(--faint)}
.about-hero h1{font-family:var(--serif);font-weight:400;
font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.015em;margin:12px 0 10px}
.about-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media(max-width:760px){.about-cta{justify-content:center}}
.about-sec{padding-top:30px}
/* One certificate is landscape (1599x1021), the other portrait (905x1280).
Left to their natural heights the two cards were wildly different sizes and
their captions started at different points. A fixed 4:3 viewing band with
object-fit:contain shows each in full, letterboxed on a white mount, and the
two cards line up. The description is pushed to the base so the cards end
together as well. */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;margin-top:6px;align-items:stretch}
.cert{margin:0;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2);overflow:hidden;display:flex;flex-direction:column}
.cert-img{display:block;background:#fff;padding:12px;line-height:0;
aspect-ratio:4/3;flex:none}
.cert-img img{width:100%;height:100%;display:block;object-fit:contain;border-radius:2px}
.cert-img:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.cert figcaption{padding:18px 20px 20px;border-top:1.5px solid var(--faint);
flex:1;display:flex;flex-direction:column}
.cert figcaption > b{display:block;font-size:1rem;font-weight:500;line-height:1.35;
margin-bottom:14px;min-height:2.7em}
.cert dl{margin:0 0 14px}
.cert dl > div{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--faint);
font-size:.82rem;line-height:1.5}
.cert dl > div:last-child{border-bottom:0}
.cert dt{flex:0 0 38%;color:var(--dim);margin:0}
.cert dd{margin:0;flex:1;color:var(--chalk);word-break:break-word}
.cert figcaption > p{font-size:.85rem;color:var(--dim);line-height:1.65;margin:auto 0 0;
padding-top:12px}
@media(max-width:520px){
.cert-img{aspect-ratio:3/2}
.cert figcaption > b{min-height:0}
.cert dl > div{flex-direction:column;gap:2px}
.cert dt{flex:none}
}
/* ---------- about page alignment ---------- */
.about-hero .crumb{margin-bottom:6px}
.about-top{align-items:center}
.about-sec .svc-h2:first-child{margin-top:0}
.about-sec .svc-cards{margin-top:4px}
/* stand-alone nav entries (no mega menu behind them) */
.navsolo{text-decoration:none}
/* ---------- about: at-a-glance facts ---------- */
.ab-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;margin:30px 0 8px;
background:var(--faint);border:1.5px solid var(--faint);border-radius:var(--r);overflow:hidden}
@media(max-width:620px){.ab-facts{grid-template-columns:1fr}}
.ab-facts > div{background:var(--void2);padding:16px 20px}
.ab-facts dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
margin-bottom:6px}
.ab-facts dd{margin:0;font-size:.92rem;font-weight:500;line-height:1.5}
/* ============================================================
STOREFRONT
============================================================ */
.store-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-top:18px}
@media(max-width:840px){.store-hero-in{grid-template-columns:1fr;gap:26px}}
.store-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.store-hero-img{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center}
.store-hero-img img{width:100%;height:auto;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2)}
.store-hero-img img:nth-child(2){transform:scale(1.14);z-index:1;position:relative}
@media(prefers-reduced-motion:reduce){.store-hero-img img:nth-child(2){transform:none}}
/* ---------- trust strip ---------- */
.trust-strip{overflow:hidden;border-block:1.5px solid var(--faint);background:var(--void2);
padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.trust-track{display:flex;align-items:center;gap:26px;white-space:nowrap;width:max-content;
animation:trustRun 38s linear infinite}
.trust-track span{font-size:.8rem;letter-spacing:.06em;color:var(--dim)}
.trust-track i{font-style:normal;color:var(--amber);font-size:.7rem}
@keyframes trustRun{to{transform:translateX(-50%)}}
.trust-strip:hover .trust-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.trust-track{animation:none;width:100%;
justify-content:center;flex-wrap:wrap;white-space:normal}}
/* ---------- rows ---------- */
.shop-row{padding:52px 0}
.trust-strip + .shop-row{padding-top:64px}
/* Heading and count share the top line; an explanatory note belongs under
the heading, left aligned, not floated across to the right where it reads
as a second column. */
.row-head{display:flex;align-items:baseline;justify-content:space-between;
gap:8px 18px;flex-wrap:wrap}
.row-head .row-note{flex:1 0 100%;order:2;text-align:left}
.row-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.75rem);
margin-bottom:6px}
.row-note{font-size:.84rem;color:var(--dim);max-width:52ch;margin-bottom:14px}
.fcount{font-size:.8rem;color:var(--dim);white-space:nowrap}
/* ---------- category tiles ---------- */
.ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px;margin-top:14px}
.ctile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 14px;
border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2);
text-decoration:none;color:var(--chalk);position:relative;
transition:border-color .2s,transform .2s,box-shadow .2s}
.ctile:hover,.ctile:focus-visible{border-color:var(--amber);transform:translateY(-3px);
box-shadow:0 10px 22px rgba(0,0,0,.07)}
.ctile-i{color:var(--amber);line-height:0}
.ctile-i svg{width:30px;height:30px}
.ctile-n{font-size:.82rem;font-weight:500;text-align:center;line-height:1.3}
.ctile-c{position:absolute;top:7px;right:9px;font-size:.66rem;color:var(--dim)}
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px;margin-top:14px}
.ptile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 13px;
border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2);
text-decoration:none;color:var(--chalk);position:relative;transition:all .2s}
.ptile:hover,.ptile:focus-visible{border-color:var(--amber);transform:translateY(-3px)}
.ptile-g{font-size:1.5rem;color:var(--amber);line-height:1}
.ptile-n{font-size:.8rem;font-weight:500}
.rtiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px}
@media(max-width:820px){.rtiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.rtiles{grid-template-columns:repeat(3,1fr)}}
.rtile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px 12px;
border:1.5px solid var(--faint);border-radius:var(--r);background:var(--void2);
text-decoration:none;color:var(--chalk);transition:all .2s}
.rtile:hover,.rtile:focus-visible{border-color:var(--amber);transform:translateY(-3px)}
.rtile-g{font-size:1.3rem;color:var(--amber);line-height:1}
.rtile-n{font-size:.76rem;font-weight:500}
@media(prefers-reduced-motion:reduce){
.ctile:hover,.ptile:hover,.rtile:hover{transform:none}
}
/* ---------- active filter banner ---------- */
.filter-note{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
margin:14px 0 4px;padding:11px 16px;border:1.5px solid var(--amber-dim);border-radius:var(--r);
background:color-mix(in srgb, var(--amber) 5%, transparent);font-size:.86rem}
.filter-note b{color:var(--amber);font-weight:500}
.filter-note a{font-size:.82rem;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.filter-note a:hover{color:var(--amber)}
/* ============================================================
COSMIC BACKDROP — whole page
Fixed behind everything, below the content but above the page
background. The starfield canvas (#stars) already sits at -1, so
this goes to -3 and they layer rather than fight.
Light and dark need different weights: gold on indigo can carry
more opacity than amber on cream before it starts competing with
body text, and Indic scripts lose legibility over texture first.
============================================================ */
.backdrop-page{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;
will-change:opacity}
.backdrop-page svg{width:100%;height:100%;display:block;
min-width:1000px}
/* Kesari and Celestia are light canvases — hold the artwork back. */
:root[data-theme="kesari"] .backdrop-page,
:root[data-theme="celestia"] .backdrop-page{filter:saturate(.9)}
:root[data-theme="kesari"] .backdrop-page{opacity:.55!important}
:root[data-theme="celestia"] .backdrop-page{opacity:.6!important}
/* Text sits on the page background, so lift the readable surfaces
clear of the artwork rather than dimming the artwork further. */
:root[data-theme="kesari"] .sec,
:root[data-theme="celestia"] .sec{background:transparent}
.wrap{position:relative;z-index:1}
/* Panels keep their own fill so copy never sits directly on a nebula. */
.svc,.pkg,.prod,.ctile,.ptile,.rtile,.smini,.svc-card,.ac-card,.ac-row,.ac-order,
.cert,.why-card,.promo-view,.svc-facts > div,.ab-facts > div,.rv-card{
background-color:var(--void2)}
@media(prefers-reduced-motion:reduce){.backdrop-page *{animation:none!important}}
/* ============================================================
REVIEWS
============================================================ */
.rv{margin-top:56px;scroll-margin-top:110px}
.rv-stars{color:var(--amber);letter-spacing:2px;white-space:nowrap;font-size:.98rem}
.rv-stars i{color:var(--edge);font-style:normal}
.rv-top{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
padding:22px 24px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2);margin-bottom:16px}
@media(max-width:620px){.rv-top{grid-template-columns:1fr;gap:18px}}
.rv-score{text-align:center;min-width:120px}
.rv-score b{display:block;font-family:var(--serif);font-weight:400;font-size:2.6rem;
color:var(--chalk);line-height:1}
.rv-score span{display:block;font-size:.82rem;color:var(--dim);margin-top:6px}
.rv-score small{display:block;font-size:.74rem;color:var(--tulsi);margin-top:3px}
.rv-dist{display:flex;flex-direction:column;gap:5px}
.rv-bar{display:grid;grid-template-columns:30px 1fr 28px;gap:10px;align-items:center;
font-size:.76rem;color:var(--dim)}
.rv-bar i{display:block;height:7px;border-radius:999px;background:var(--faint);overflow:hidden}
.rv-bar i b{display:block;height:100%;background:var(--amber);border-radius:999px}
.rv-bar em{font-style:normal;text-align:right}
.rv-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-bottom:18px}
.rv-filter{margin:0;font-size:.84rem}
.rv-note{font-size:.82rem;color:var(--dim);line-height:1.6;margin:0}
.rv-mine{padding:9px 14px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2)}
.rv-empty{padding:32px 24px;border:1.5px dashed var(--faint);border-radius:var(--r);
text-align:center}
.rv-empty p{color:var(--dim);font-size:.9rem;margin-bottom:16px;max-width:52ch;
margin-inline:auto;line-height:1.6}
.rv-list{display:flex;flex-direction:column;gap:12px}
.rv-card{padding:18px 20px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2)}
.rv-card header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rv-card header b{font-size:.88rem;font-weight:500}
.rv-card header time{font-size:.76rem;color:var(--dim);margin-left:auto}
.rv-card h3{font-size:.96rem;font-weight:500;margin-bottom:6px}
.rv-card p{font-size:.9rem;color:var(--dim);line-height:1.7;margin:0}
.rv-tick{font-size:.68rem;letter-spacing:.06em;padding:2px 8px;border-radius:999px;
background:color-mix(in srgb, var(--tulsi) 16%, var(--void2));color:var(--tulsi)}
.rv-inc{font-size:.68rem;letter-spacing:.06em;padding:2px 8px;border-radius:999px;
background:color-mix(in srgb, var(--amber) 16%, var(--void2));color:var(--amber-hover)}
.rv-form{margin-top:18px}
.rv-pick{display:flex;gap:4px}
.rv-p{border:0;background:none;font-size:1.9rem;line-height:1;color:var(--faint);
cursor:pointer;padding:0 2px;transition:color .15s,transform .15s}
.rv-p.is-on{color:var(--amber)}
.rv-p:hover{transform:scale(1.12)}
.rv-p:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.rv-p:hover{transform:none}}
/* ---------- reviews preview flag (never seen by a visitor) ---------- */
.rv-preview-flag{margin-bottom:16px;padding:12px 16px;border:1.5px dashed var(--alert);
border-radius:var(--r);background:rgba(168,58,30,.06);font-size:.82rem;
line-height:1.6;color:var(--dim)}
.rv-preview-flag b{color:var(--alert);letter-spacing:.1em;font-weight:600}
.rv-preview-flag code{font-family:ui-monospace,monospace;font-size:.78rem;
background:var(--void2);padding:1px 5px;border-radius:3px}
/* ---------- rating badge on listing cards ---------- */
.rt{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
font-size:.78rem;line-height:1;white-space:nowrap}
.rt-s{color:var(--amber);letter-spacing:1px}
.rt-s i{color:var(--edge);font-style:normal}
.rt b{font-weight:600;color:var(--chalk)}
.rt em{font-style:normal;color:var(--dim)}
/* the services listing card has more room, so give it a little air */
.svc .rt{margin:2px 0 10px}
.prod .rt{margin:6px 0 0}
.smini .rt{margin:0 0 0 8px}
.rt-off{margin-left:10px;border:1.5px solid var(--alert);background:none;
color:var(--alert);font:inherit;font-size:.74rem;padding:3px 10px;
border-radius:999px;cursor:pointer}
.rt-off:hover{background:var(--alert);color:var(--void)}
.rt-preview-flag{margin-bottom:22px}
/* ============================================================
INSTAGRAM REELS
No thumbnails — Instagram stopped serving public cover images
without a token. The card is drawn from the title, the topic and
the real view count, tinted by topic so a rail reads as a set.
============================================================ */
.reel-rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.reel-rail::-webkit-scrollbar{height:6px}
.reel-rail::-webkit-scrollbar-thumb{background:var(--faint);border-radius:999px}
.reel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
@media(max-width:600px){.reel-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
/* space-between in a 9:14 box left a hole in the middle of every card that
has no cover yet. Content sits from the top, the footer is pinned to the
base, and a coverless card is shorter so it does not read as unfinished. */
.reel{flex:0 0 200px;scroll-snap-align:start;
display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
aspect-ratio:9/14;padding:16px 15px;text-align:left;cursor:pointer;
border:1.5px solid var(--faint);border-radius:var(--r);
background:
radial-gradient(120% 90% at 85% 8%, color-mix(in srgb,
hsl(from var(--amber) calc(h + var(--rh,0deg)) s l) 26%, transparent), transparent 70%),
var(--void2);
color:var(--chalk);font:inherit;
transition:border-color .22s,transform .22s,box-shadow .22s}
.reel-grid .reel{flex:none;width:100%}
/* The drawn cover — a large sign or planet glyph on the topic's own tint,
sitting behind the text. Every card now has artwork, so a card without a
photograph is a poster rather than a gap, and it can keep the portrait
shape a reel actually has.
Bottom-right and part-cropped: a watermark, not a logo. */
.reel-gen{position:absolute;right:-.14em;bottom:-.22em;z-index:0;
font-family:var(--serif);font-size:6.6rem;line-height:.8;pointer-events:none;
color:hsl(from var(--amber) calc(h + var(--rh,0deg)) s l);opacity:.17;
transition:opacity .28s ease,transform .28s ease}
.reel:hover .reel-gen{opacity:.26;transform:translate(-2px,-3px)}
.reel.has-img .reel-gen{display:none} /* a photograph wins */
.reel > *:not(.reel-img){position:relative;z-index:2}
.reel:not(.has-img) .reel-t{-webkit-line-clamp:4}
@media(max-width:600px){.reel-gen{font-size:5rem}}
.reel:hover,.reel:focus-visible{border-color:var(--amber);transform:translateY(-3px);
box-shadow:0 12px 26px rgba(0,0,0,.09)}
.reel-k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
align-self:flex-start;padding:3px 9px;border:1.5px solid var(--amber-dim);border-radius:999px}
.reel-t{font-family:var(--serif);font-weight:400;font-size:1rem;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.reel-f{display:flex;align-items:center;gap:9px;margin-top:auto}
.reel-play{font-style:normal;width:26px;height:26px;flex:none;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;
background:var(--amber);color:var(--void)}
.reel-f em{font-style:normal;font-size:.74rem;color:var(--dim)}
@media(prefers-reduced-motion:reduce){.reel:hover{transform:none}}
/* the player — 9:16, same click-to-load behaviour as the Shorts box */
.reel-box{position:relative;width:min(400px,92vw);aspect-ratio:9/16;
background:#000;border-radius:var(--r);overflow:hidden}
.reel-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-scrim .yt-stage{display:flex;flex-direction:column;align-items:center;gap:12px}
/* ---------- reel cover, when one exists in img/reels/ ---------- */
.reel{position:relative;overflow:hidden}
.reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
z-index:0;opacity:.9}
/* legibility over a photograph: darken from the base up, never a flat wash */
/* The title used to sit at the TOP of the card, where this gradient is
only 15% black. White text there, over a bright cover, is around 3:1 —
and on the light themes, in the moment before a missing cover errors
out, it is white on a near-white card. Invisible.
So the title moves down into the dark end rather than the gradient
being dragged up over the artwork. White on 62% black is 6.19:1 even
against a pure white frame, which is the worst case there is. */
.reel.has-img::after{content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 34%,
rgba(0,0,0,.62) 66%,rgba(0,0,0,.88) 100%)}
.reel.has-img .reel-t{margin-top:auto}
.reel.has-img .reel-f{margin-top:8px}
/* `> *` included the photograph itself, lifting it to z-index 2 and so
above the darkening gradient at 1 — which is the one element the
gradient exists to sit on top of. Text only. */
.reel.has-img > *:not(.reel-img){position:relative;z-index:2}
.reel.has-img .reel-t{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.reel.has-img .reel-f em{color:rgba(255,255,255,.88)}
.reel.has-img .reel-k{background:rgba(0,0,0,.62);border-color:rgba(255,255,255,.5);
color:#fff;backdrop-filter:blur(3px)}
.reel.has-img:hover .reel-img{transform:scale(1.04)}
.reel-img{transition:transform .4s ease}
@media(prefers-reduced-motion:reduce){.reel.has-img:hover .reel-img{transform:none}}
/* ---------- panchang: how long each element actually lasts ----------
A tithi is not a day. It runs 19 to 26 hours, and both ends fall at a
clock time — often on the next date. Printing only the name hides the
one thing somebody checking a panchang came to find out. */
.pspan{display:block;font-size:.72rem;color:var(--amber);letter-spacing:.02em;
margin-top:5px;font-style:normal;line-height:1.45}
/* A note, not a footnote. Full width under the grid, with the accent
holding the left edge so it reads as a deliberate aside rather than
small print somebody forgot to delete.
It was previously written INSIDE .pan-grid, which made it a grid
cell — one column wide inside a full-width tint. */
.pan-note{display:block;margin:22px 0 0;padding:15px 18px;
background:color-mix(in srgb, var(--amber) 7%, transparent);
border-left:2.5px solid var(--amber);border-radius:0 var(--r) var(--r) 0;
font-size:.85rem;line-height:1.65;color:var(--dim);max-width:none}
/* ============================================================
THE CATALOGUE — one filterable grid of everything on offer.
============================================================ */
.cat-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;
border-bottom:1.5px solid var(--faint);margin:0 auto 34px;max-width:760px}
.cat-tab{background:none;border:0;border-bottom:2.5px solid transparent;
font:inherit;font-size:.86rem;letter-spacing:.03em;color:var(--dim);
padding:11px 18px;cursor:pointer;margin-bottom:-1.5px;
transition:color .2s,border-color .2s}
.cat-tab:hover{color:var(--amber-hover)}
.cat-tab.is-on{color:var(--amber);border-bottom-color:var(--amber)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.cat-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
padding:26px 22px 22px;border:1.5px solid var(--faint);border-radius:var(--r);
background:var(--void2);transition:border-color .22s,transform .22s,box-shadow .22s}
.cat-card:hover,.cat-card:focus-visible{border-color:var(--amber);
transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.09)}
/* The price sits where the reference puts its claims. It is a fact, and it
is the thing people are looking for anyway — so it reads as a chip rather
than as small grey text somebody forgot to style.
The tint is 6%, not the 12% it wants to be. Above 8% the accent stops
clearing 4.5:1 against its own tint on three of the five themes — the
colour and the background move together, so a stronger chip is a fainter
price. Border does the work the fill cannot. */
.cat-price{position:absolute;top:11px;right:12px;
font-size:.76rem;letter-spacing:.02em;font-weight:600;
padding:4px 10px;border-radius:999px;
color:var(--amber-hover);
background:color-mix(in srgb, var(--amber) 6%, transparent);
border:1.5px solid color-mix(in srgb, var(--amber) 34%, transparent)}
.cat-free{color:var(--tulsi);letter-spacing:.09em;font-weight:600;
background:color-mix(in srgb, var(--tulsi) 6%, transparent);
border-color:color-mix(in srgb, var(--tulsi) 40%, transparent)}
/* the icon must not sit under the chip on a narrow card */
.cat-ico{margin-top:6px}
.cat-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
border:1.5px solid var(--amber-dim);color:var(--amber);margin-bottom:20px;
transition:background .22s,border-color .22s}
.cat-ico svg{width:26px;height:26px}
.cat-card:hover .cat-ico{background:color-mix(in srgb, var(--amber) 9%, transparent);
border-color:var(--amber)}
.cat-n{font-family:var(--serif);font-size:1.06rem;color:var(--chalk);
line-height:1.35;margin-bottom:7px}
.cat-d{font-size:.86rem;color:var(--dim);line-height:1.55;margin-bottom:20px}
/* Push the CTA to the base so a row of cards has its buttons on one line
whatever the description length. */
.cat-cta{margin-top:auto;width:100%;text-align:center;font-size:.78rem;
letter-spacing:.09em;text-transform:uppercase;color:var(--chalk);
border:1.5px solid var(--edge);border-radius:var(--r);padding:11px 10px;
transition:background .2s,border-color .2s,color .2s}
.cat-card:hover .cat-cta{border-color:var(--amber);color:var(--amber);
background:color-mix(in srgb, var(--amber) 7%, transparent)}
.cat-more{display:block;margin:30px auto 0;background:none;border:0;font:inherit;
font-size:.84rem;letter-spacing:.06em;color:var(--amber);cursor:pointer;
border-bottom:1.5px solid var(--amber-dim);padding:4px 2px}
.cat-more:hover{color:var(--amber-hover);border-bottom-color:var(--amber)}
.cat-more[hidden]{display:none}
@media(max-width:620px){
.cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.cat-card{padding:20px 15px 16px}
.cat-ico{width:44px;height:44px;margin-bottom:14px}
.cat-ico svg{width:21px;height:21px}
.cat-n{font-size:.95rem}
.cat-d{font-size:.79rem;margin-bottom:14px}
.cat-cta{font-size:.71rem;padding:9px 6px}
.cat-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{white-space:nowrap;padding:10px 14px}
}
/* ---------- Free Kundli dialog ----------
Two steps, not one scroll: the form is REPLACED by the result rather
than pushed up above it. The box is capped at the viewport height with
its own scroll, so the page behind never moves. */
.kd-scrim{position:fixed;inset:0;z-index:470;background:rgba(0,0,0,.66);
display:flex;align-items:center;justify-content:center;padding:16px;
backdrop-filter:blur(3px)}
.kd-scrim[hidden]{display:none}
.kd-box{position:relative;width:min(620px,100%);max-height:92vh;overflow-y:auto;
background:var(--void2);border:1.5px solid var(--faint);border-radius:var(--r);
padding:32px 30px 28px;scrollbar-width:thin}
@media(max-width:620px){ .kd-box{padding:26px 18px 22px;max-height:96vh} }
.kd-h{font-family:var(--serif);font-size:1.42rem;color:var(--chalk);margin-bottom:5px}
.kd-sub{font-size:.86rem;color:var(--dim);margin-bottom:20px;line-height:1.55}
/* Two columns, so seven fields are one screen rather than a column of
seven. The place field spans both because it is the one people type. */
.kd-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px}
.kd-wide{grid-column:1/-1}
@media(max-width:520px){ .kd-grid{grid-template-columns:1fr} }
.kd-f{display:flex;flex-direction:column;gap:5px;position:relative}
.kd-f > span,.kd-f > label{font-size:.72rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--dim)}
/* One padding for every control, and a min-height so a text input, a
select and a native date picker all sit on the same baseline. Without
the box-sizing the padding was being added OUTSIDE the width on the
date and time fields, which is what made them look cramped next to
the plain ones. */
.kd-f input,.kd-f select{box-sizing:border-box;width:100%;
font:inherit;font-size:.94rem;line-height:1.3;color:var(--chalk);
background:var(--void);border:1.5px solid var(--edge);border-radius:var(--r);
padding:0 13px;height:46px;min-height:46px}
.kd-f select{padding-right:34px;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
linear-gradient(135deg,var(--dim) 50%,transparent 50%);
background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
/* The native calendar and clock buttons crowd the right edge otherwise. */
.kd-f input[type="date"],.kd-f input[type="time"]{padding-right:9px}
.kd-f input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.kd-f input:focus,.kd-f select:focus{border-color:var(--amber);outline:none}
.kd-f input::placeholder{color:var(--hint);opacity:1}
/* ---- the suggestion list ----
Drawn rather than left to the browser. A