/* ============================================================
   Acharya Parimal Mehta — sacred saffron & gold design system
   ============================================================ */
:root{
  --maroon-900:#2E0A0A; --maroon-800:#3F0F10; --maroon-700:#5B1616; --maroon-600:#7A1F1C;
  --saffron-600:#C2571A; --saffron-500:#E07A20; --saffron-400:#F09A3E; --saffron-300:#F7BC72;
  --gold-700:#9A7521; --gold-600:#B8912E; --gold-500:#D4AF37; --gold-400:#E4C965; --gold-200:#F2E3B0;
  --cream-50:#FDF9F0; --cream-100:#FBF3E4; --cream-200:#F5E9D4; --cream-300:#EBD9BC;
  --ink-900:#22160F; --ink-700:#443023; --ink-500:#6B5442; --ink-400:#8C7460;
  --leaf-600:#2F6B4F; --leaf-500:#3E8A66;
  --rose-600:#A3243F;
  --bg:var(--cream-50); --surface:#FFFFFF; --border:rgba(122,31,28,.14);
  --shadow-sm:0 1px 2px rgba(46,10,10,.06),0 2px 8px rgba(46,10,10,.05);
  --shadow-md:0 4px 12px rgba(46,10,10,.08),0 12px 32px rgba(46,10,10,.07);
  --shadow-lg:0 12px 28px rgba(46,10,10,.12),0 32px 64px rgba(46,10,10,.10);
  --radius:14px; --radius-lg:22px; --radius-sm:9px;
  --serif:'Yatra One','Marcellus',Georgia,'Times New Roman',serif;
  --display:'Marcellus','Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --dev:'Tiro Devanagari Hindi','Noto Sans Devanagari',serif;
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink-900);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(224,122,32,.06), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(212,175,55,.07), transparent 38%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:var(--maroon-700);text-decoration:none}
a:hover{color:var(--saffron-600)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.18;color:var(--maroon-800);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,2.8vw,2.4rem)}
h3{font-size:1.24rem}
p{margin:0 0 1em}
.dev{font-family:var(--dev)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.muted{color:var(--ink-500)}
.small{font-size:.85rem}
.tiny{font-size:.76rem}
.center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;font-size:.86em}

/* ---------- ornaments ---------- */
.om-rule{display:flex;align-items:center;gap:14px;color:var(--gold-600);margin:0 0 22px}
.om-rule::before,.om-rule::after{content:'';height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent)}
.om-rule span{font-family:var(--dev);font-size:1.15rem;letter-spacing:.16em}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--saffron-600);
  font-weight:600;margin-bottom:10px;display:block}

/* ---------- header ---------- */
.topbar{background:var(--maroon-900);color:var(--cream-200);font-size:.78rem;padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.topbar a{color:var(--gold-400)}
header.site{position:sticky;top:0;z-index:60;background:rgba(253,249,240,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
header.site .wrap{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.35rem;
  color:var(--maroon-800);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.brand .sig{width:40px;height:40px;flex:none}
.brand small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--saffron-600);font-weight:600;margin-top:-2px}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.main a{padding:9px 13px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-700)}
nav.main a:hover{background:var(--cream-200);color:var(--maroon-700)}
nav.main a.active{background:var(--maroon-800);color:var(--cream-100)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--border);
  border-radius:9px;padding:8px 11px;font-size:1.15rem;cursor:pointer;color:var(--maroon-800)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.92rem;padding:12px 22px;border-radius:11px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--saffron-500),var(--saffron-600));color:#fff;
  box-shadow:0 4px 14px rgba(194,87,26,.32)}
.btn-primary:hover{color:#fff;box-shadow:0 6px 20px rgba(194,87,26,.42)}
.btn-dark{background:var(--maroon-800);color:var(--cream-100)}
.btn-dark:hover{background:var(--maroon-700);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:#2E0A0A}
.btn-ghost{background:transparent;border:1.5px solid var(--maroon-700);color:var(--maroon-700)}
.btn-ghost:hover{background:var(--maroon-800);color:var(--cream-100)}
.btn-sm{padding:8px 14px;font-size:.82rem;border-radius:9px}
.btn-block{width:100%}

/* ---------- cards & layout ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:22px}
.card-lg{border-radius:var(--radius-lg);padding:30px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
section.pad{padding:76px 0}
section.pad-sm{padding:44px 0}
.section-head{max-width:660px;margin-bottom:34px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* gold-edged panel */
.panel-gold{position:relative;background:linear-gradient(160deg,#FFFDF7,#FBF3E4);
  border:1px solid var(--gold-200);border-radius:var(--radius-lg);padding:28px;
  box-shadow:var(--shadow-sm)}
.panel-gold::before{content:'';position:absolute;inset:7px;border:1px solid rgba(212,175,55,.35);
  border-radius:calc(var(--radius-lg) - 7px);pointer-events:none}

/* ---------- hero ---------- */
/* The hero reads on warm cream rather than dark maroon, matching the design
   the practice approved. Everything inside it inverts with it: the chakra
   below draws its colours from these same custom properties, so the wheel
   follows the background instead of having to be recoloured by hand. */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(ellipse at 78% 18%,rgba(212,175,55,.16),transparent 58%),
  radial-gradient(ellipse at 8% 82%,rgba(224,122,32,.10),transparent 55%),
  linear-gradient(150deg,var(--cream-50) 0%,var(--cream-100) 55%,var(--cream-200) 100%);
  color:var(--ink-700);padding:92px 0 100px;
  border-bottom:1px solid var(--cream-300)}
.hero h1{color:var(--maroon-800);text-shadow:none}
.hero .lead{font-size:1.12rem;color:var(--ink-700);max-width:520px}
.hero .eyebrow{color:var(--saffron-600)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
/* Pushed left and dimmed: it used to sit directly behind the chakra, and two
   overlapping wheels read as neither. */
.mandala{position:absolute;right:auto;left:-190px;top:-90px;width:620px;opacity:.10;pointer-events:none;
  animation:spin 130s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-stats{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
.hero-stats b{display:block;font-family:var(--display);font-size:1.75rem;color:var(--maroon-700);line-height:1}
.hero-stats span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}

/* panchang strip in hero */
.pstrip{background:rgba(255,255,255,.07);border:1px solid rgba(212,175,55,.32);
  border-radius:var(--radius-lg);padding:24px;backdrop-filter:blur(6px)}
.pstrip h3{color:var(--gold-400);font-size:.98rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:16px;font-family:var(--sans);font-weight:700}
.pstrip dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;font-size:.9rem}
.pstrip dt{color:var(--cream-200);opacity:.72}
.pstrip dd{margin:0;color:#fff;font-weight:600;text-align:right}
.pstrip .alert{margin-top:16px;padding:10px 13px;border-radius:9px;background:rgba(163,36,63,.28);
  border:1px solid rgba(255,255,255,.16);font-size:.82rem;color:#FFE6E6}

/* ---------- rashi wheel ---------- */
.rashi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.rashi{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 8px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);text-align:center;transition:.18s}
.rashi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold-500)}
.rashi .gl{font-size:1.5rem;color:var(--saffron-600);line-height:1}
.rashi b{font-size:.84rem;color:var(--maroon-800)}
.rashi small{font-size:.68rem;color:var(--ink-400)}

/* ---------- forms ---------- */
label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-700);margin-bottom:6px;
  letter-spacing:.02em}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--cream-300);border-radius:10px;
  font-family:var(--sans);font-size:.94rem;background:#fff;color:var(--ink-900);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--saffron-400);
  box-shadow:0 0 0 3px rgba(240,154,62,.18)}
.field{margin-bottom:16px}
.row{display:grid;gap:14px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:repeat(3,1fr)}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:0 0 18px}
legend{padding:0 8px;font-family:var(--display);color:var(--maroon-700);font-size:1.02rem}
.hint{font-size:.75rem;color:var(--ink-400);margin-top:5px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);
  padding:10px 9px;border-bottom:2px solid var(--cream-200);font-weight:700;white-space:nowrap}
td{padding:10px 9px;border-bottom:1px solid var(--cream-200);vertical-align:middle}
tbody tr:hover{background:var(--cream-50)}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:#fff}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em}
.pill-gold{background:var(--gold-200);color:var(--gold-700)}
.pill-saffron{background:#FCEBD8;color:var(--saffron-600)}
.pill-green{background:#DCF0E5;color:var(--leaf-600)}
.pill-red{background:#F8DCE2;color:var(--rose-600)}
.pill-grey{background:var(--cream-200);color:var(--ink-500)}
.pill-maroon{background:#F3DEDE;color:var(--maroon-700)}

/* ---------- chart svg ---------- */
.chart-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.chart-box svg{width:100%;height:auto}
.chart-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#result{scroll-margin-top:96px}
.rashi .gl{font-variant-emoji:text}
.chart-tabs button{padding:6px 11px;border-radius:8px;border:1px solid var(--cream-300);
  background:#fff;font-size:.8rem;cursor:pointer;font-weight:600;color:var(--ink-700)}
.chart-tabs button.on{background:var(--maroon-800);color:#fff;border-color:var(--maroon-800)}

/* ---------- footer ---------- */
footer.site{background:var(--maroon-900);color:var(--cream-200);padding:60px 0 26px;margin-top:70px}
footer.site h4{color:var(--gold-400);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--sans);font-weight:700;margin-bottom:14px}
footer.site a{color:var(--cream-200);font-size:.88rem;display:block;padding:3px 0;opacity:.82}
footer.site a:hover{color:var(--gold-400);opacity:1}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:34px}
.foot-bottom{border-top:1px solid rgba(212,175,55,.2);margin-top:38px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;opacity:.7}

/* ---------- misc components ---------- */
.astro-card{display:flex;gap:16px;align-items:flex-start}
.avatar{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:1.15rem;color:#fff;
  background:linear-gradient(135deg,var(--maroon-700),var(--saffron-600));
  box-shadow:0 0 0 3px var(--cream-200)}
.stars{color:var(--gold-500);letter-spacing:1px;font-size:.85rem}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.online{background:#2FA36B;box-shadow:0 0 0 3px rgba(47,163,107,.18)}
.dot.busy{background:#D98324;box-shadow:0 0 0 3px rgba(217,131,36,.18)}
.dot.away{background:#9A8F84}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.9rem}
.kv dt{color:var(--ink-400)}
.kv dd{margin:0;font-weight:600;text-align:right}
.meter{height:7px;border-radius:99px;background:var(--cream-200);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--saffron-500),var(--gold-500))}
.accordion{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.accordion details{border-bottom:1px solid var(--cream-200)}
.accordion details:last-child{border-bottom:none}
.accordion summary{padding:15px 18px;cursor:pointer;font-weight:600;color:var(--maroon-800);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:'+';color:var(--saffron-600);font-size:1.2rem}
.accordion details[open] summary::after{content:'−'}
.accordion .body{padding:0 18px 18px;color:var(--ink-700);font-size:.92rem}
.toast{position:fixed;right:20px;bottom:20px;z-index:200;background:var(--maroon-800);color:#fff;
  padding:13px 18px;border-radius:11px;box-shadow:var(--shadow-lg);font-size:.9rem;
  opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none;max-width:340px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:var(--rose-600)}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--cream-200),var(--cream-100),var(--cream-200));
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.empty{text-align:center;padding:48px 20px;color:var(--ink-400)}
.empty .gl{font-size:2.4rem;color:var(--gold-500);display:block;margin-bottom:10px}

/* prose */
.prose{font-size:1.03rem;line-height:1.78;color:var(--ink-700)}
.prose h2{margin-top:1.8em;font-size:1.55rem}
.prose h3{margin-top:1.5em}
.prose blockquote{border-left:3px solid var(--gold-500);margin:1.4em 0;padding:2px 0 2px 20px;
  color:var(--ink-500);font-style:italic}
.prose code{background:var(--cream-200);padding:2px 6px;border-radius:5px;font-size:.88em}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:.4em}

@media(max-width:1000px){
  .g4,.g6{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .rashi-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  nav.main{position:fixed;inset:74px 0 auto;background:var(--cream-50);flex-direction:column;
    padding:14px;gap:2px;border-bottom:1px solid var(--border);display:none;box-shadow:var(--shadow-md)}
  nav.main.open{display:flex}
  nav.main a{width:100%}
  .burger{display:block}
  .g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .row-2,.row-3{grid-template-columns:1fr}
  .rashi-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  section.pad{padding:52px 0}
  .hero{padding:60px 0 68px}
}

/* ---------- the chakra in the hero ----------
   A canvas, so it cannot be styled from here beyond its box; the colours are
   read from the custom properties above by static/js/site.js. The Ganesha is
   a separate SVG centred over the hub rather than drawn into the canvas —
   it stays crisp at any pixel density and can be replaced without touching
   the drawing code. */
.chakra-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.chakra-wrap{position:relative;width:100%;max-width:460px;aspect-ratio:1}
.chakra-wrap canvas{width:100%;height:100%;display:block}
.chakra-hub{position:absolute;left:50%;top:50%;width:23%;height:23%;transform:translate(-50%,-50%);
  pointer-events:none}
.invocation{font-family:var(--dev);color:var(--maroon-700);font-size:1rem;margin:0;
  letter-spacing:.02em}
.chakra-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;
  font-size:.76rem;color:var(--ink-700)}
.chakra-legend b{color:var(--maroon-700);font-weight:700}
.chakra-legend i{color:var(--saffron-600);font-style:normal;font-weight:700}
.chakra-fig figcaption{font-size:.72rem;color:var(--ink-400);text-align:center}

/* The panchang moved out of the hero to make room for the chakra, so it now
   reads across the page instead of down a narrow column. */
.pstrip-wide dl{grid-template-columns:repeat(4,auto 1fr);gap:10px 18px}
@media (max-width:900px){
  .pstrip-wide dl{grid-template-columns:repeat(2,auto 1fr)}
}
@media (max-width:600px){
  .pstrip-wide dl{grid-template-columns:auto 1fr}
  .chakra-wrap{max-width:330px}
}

/* A photograph in the avatar slot: same circle, but cropped rather than
   letter-boxed, so faces are not squashed by whatever aspect the file has. */
.avatar-photo{object-fit:cover;background:var(--cream-200)}

/* ---------- header language and account controls ---------- */
.lang-pick{font:inherit;font-size:.82rem;padding:6px 8px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);color:var(--ink-700);max-width:150px}
.lang-pick:focus{outline:2px solid var(--gold-500);outline-offset:1px}
@media (max-width:900px){ .lang-pick{max-width:110px} }

/* ---------- account pages ---------- */
.auth-card{max-width:430px;margin:0 auto}
.auth-tabs{display:flex;gap:6px;margin-bottom:18px}
.auth-tabs button{flex:1;padding:9px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface);cursor:pointer;font:inherit;font-size:.9rem}
.auth-tabs button.on{background:var(--maroon-700);color:#fff;border-color:var(--maroon-700)}

/* The header gained a language selector and an account link, which left the
   original nav too tight — the booking button was wrapping onto two lines.
   Slightly narrower gaps and a floor on the selector's width fix it without
   dropping anything from the bar. */
.lang-pick{min-width:104px}
nav.main{gap:14px}
nav.main a{white-space:nowrap}
@media (max-width:1150px){
  nav.main{gap:10px;font-size:.92rem}
}

/* ---------- individual astrologer profile ---------- */
.profile-grid{display:grid;grid-template-columns:330px 1fr;gap:22px;align-items:start}
.profile-card{position:sticky;top:16px}
.profile-photo{width:100%;border-radius:var(--radius);display:block;margin-bottom:12px;
  aspect-ratio:4/5;object-fit:cover;background:var(--cream-200)}
.profile-row{border-top:1px solid var(--cream-200);margin-top:14px;padding-top:12px}
.profile-row p{margin:2px 0 0;font-size:.9rem}
.tick-list{list-style:none;padding:0;margin:0}
.tick-list li{position:relative;padding-left:22px;margin:9px 0;font-size:.92rem}
.tick-list li::before{content:"✦";position:absolute;left:0;color:var(--gold-600)}
.tick-list.two-col{columns:2;column-gap:26px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.contact-box{background:var(--cream-100);border:1px solid var(--cream-300);
  border-radius:var(--radius);padding:14px;text-align:center}
.contact-box b{display:block;font-size:1.05rem;margin-top:4px}
.contact-box .btn{flex:1}
.ctr{text-align:center}
@media (max-width:820px){
  .profile-grid{grid-template-columns:1fr}
  .profile-card{position:static}
  .tick-list.two-col{columns:1}
  .contact-grid{grid-template-columns:1fr}
}

/* "Acharya Parimal Mehta" is far longer than the name it replaced, and with
   the language selector and Login button added the bar ran off the right on
   a 1280px screen. Tighten the type and the padding rather than dropping any
   control — everything in that bar is something a visitor needs. */
.brand{font-size:1.15rem;gap:10px}
.brand .sig{width:34px;height:34px}
nav.main a{padding:8px 9px;font-size:.86rem}
@media (max-width:1320px){
  .brand{font-size:1.02rem}
  nav.main a{padding:7px 7px;font-size:.82rem}
  .lang-pick{min-width:88px;font-size:.76rem;padding:5px 6px}
}
@media (max-width:1200px){
  /* Below this the full nav cannot fit honestly, so it folds into the burger
     panel — the same treatment the narrow layout already used, just starting
     earlier. Hiding the links without raising the burger too would have left
     the site with no navigation at all between 760px and 1120px. */
  nav.main{position:fixed;inset:74px 0 auto;background:var(--cream-50);flex-direction:column;
    padding:14px;gap:2px;border-bottom:1px solid var(--border);display:none;
    box-shadow:var(--shadow-md);z-index:80}
  nav.main.open{display:flex}
  nav.main a{width:100%}
  nav.main .lang-pick{width:100%;max-width:none}
  .burger{display:block}
}

/* The header carries more than the body columns do — brand, eight links, a
   language selector and two buttons — so it gets a wider container than the
   1200px used for text. Without this the nav overflowed the page on screens
   above 1320px, where the compact type rules below do not apply. */
header.site .wrap{max-width:1360px}

/* ---------- header actions ----------
   Login and Book sit outside the collapsing nav, so they are on the bar at
   every width — previously they folded into the burger with the page links
   and the booking button, which is the point of the site, vanished on any
   laptop narrower than about 1120px.

   Both buttons share btn-nav so they match: same height, same padding, same
   type. Only the colour differs, which is what marks one as the primary. */
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.btn-nav{padding:8px 15px;font-size:.85rem;line-height:1.2;height:36px;
  display:inline-flex;align-items:center;white-space:nowrap}
nav.main{margin-left:auto}
@media (max-width:1200px){
  /* The links fold; the actions do not. */
  nav.main{margin-left:0}
  .nav-actions{margin-left:auto}
}
@media (max-width:520px){
  /* On a phone the selector is the one thing that can wait — it is repeated
     inside the menu panel. */
  .nav-actions .lang-pick{display:none}
  .btn-nav{padding:8px 12px;font-size:.8rem}
}

/* On a narrow phone the brand wordmark, two buttons and the burger together
   exceed 390px. The name shortens rather than any control being dropped —
   a visitor on a phone still needs to log in and to book. */
@media (max-width:560px){
  .brand{font-size:.9rem;gap:7px}
  .brand .sig{width:28px;height:28px}
  .brand small{display:none}
  .nav-actions{gap:6px}
  .btn-nav{padding:7px 10px;font-size:.78rem;height:32px}
  .burger{padding:4px 8px}
}
@media (max-width:400px){
  /* Last resort: the wordmark gives way to the mark alone. */
  .brand span:not(.sig){font-size:0}
}

/* The button says "Book a consultation" wherever it fits and shortens to
   "Book" when the bar is tight, rather than being dropped or wrapping. */
/* Only the widest layouts have room for the long label alongside the full
   nav; below 1400px the links are still showing and the extra words push
   the button off the edge. */
@media (max-width:1400px){ .btn-long{display:none} }

/* The panchang strip was built for the dark hero it used to sit inside. On
   the cream page it needs the opposite treatment — a white card with dark
   text — rather than white-on-white. */
.pstrip-light{background:var(--surface);border-color:var(--cream-300);backdrop-filter:none;
  box-shadow:var(--shadow-sm)}
.pstrip-light h3{color:var(--maroon-700)}
.pstrip-light dt{color:var(--ink-500);opacity:1}
.pstrip-light dd{color:var(--ink-900)}
.pstrip-light .alert{background:var(--cream-100);border-color:var(--cream-300);color:var(--maroon-700)}