/* ============================================================
   Sukhi Bharat — public site design system
   A calm, civic, trustworthy look: warm paper ground, deep teal
   for trust/navigation, a single warm-gold accent used sparingly
   for primary calls to action. No frontend framework.
   ============================================================ */

:root{
  --ink:        #1C2B39;
  --ink-soft:   #4B5C6B;
  --ink-faint:  #7C8B98;
  --paper:      #FAF7F1;
  --surface:    #FFFFFF;
  --surface-alt:#F1ECE1;
  --line:       #E4DDD0;

  --primary:      #1F5C6E;
  --primary-dark: #163F4C;
  --primary-soft: #E4EEF0;
  --accent:       #B8862F;
  --accent-dark:  #94691F;
  --accent-soft:  #F5EAD3;

  --ok:      #3F7A54;
  --ok-soft: #E3F0E6;
  --warn:    #9C6A17;
  --warn-soft:#F6ECD9;

  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(28,43,57,.06), 0 1px 3px rgba(28,43,57,.08);
  --shadow-md: 0 8px 28px -10px rgba(28,43,57,.28);
  --container: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: "Lora", Georgia, serif;
  color: var(--ink);
  line-height: 1.22;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(32px, 5vw, 52px); font-weight: 600; }
h2{ font-size: clamp(24px, 3.2vw, 34px); font-weight: 600; }
h3{ font-size: 19px; font-weight: 600; }
p{ margin: 0 0 1em; max-width: 68ch; }
p.lede{ font-size: 18px; color: var(--ink-soft); }
a{ color: var(--primary); }
img{ max-width: 100%; display: block; }
ul, ol{ padding-left: 1.25em; }
::selection{ background: var(--accent-soft); color: var(--accent-dark); }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.section{ padding-block: clamp(48px, 7vw, 88px); }
.section.tight{ padding-block: clamp(32px, 5vw, 56px); }
.section.alt{ background: var(--surface-alt); }
.section.dark{ background: var(--primary-dark); color: #EAF2F1; }
.section.dark h1, .section.dark h2, .section.dark h3{ color: #fff; }
.section.dark p{ color: #C8DBDA; }
.section.dark a{ color: #EAF2F1; }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 12px;
}
.eyebrow::before{ content:''; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }

/* -------------------- Buttons -------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  min-height: 46px; line-height: 1; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--accent-dark); }
.btn-secondary{ background: transparent; color: var(--primary-dark); border-color: var(--primary); }
.btn-secondary:hover{ background: var(--primary-soft); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ background: var(--surface-alt); }
.btn-block{ width: 100%; }
.on-dark .btn-secondary{ color: #fff; border-color: rgba(255,255,255,.5); }
.on-dark .btn-secondary:hover{ background: rgba(255,255,255,.1); }

/* -------------------- Header / nav -------------------- */
.site-header{
  /* No backdrop-filter here: it makes this element a containing block for
     position:fixed descendants (the mobile menu panel), collapsing its
     height to the header's own height instead of the full viewport. */
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,241,.97);
  border-bottom: 1px solid var(--line);
}
.nav-row{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 14px;
}
.brand{ display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark{ font-family: "Lora", serif; font-weight: 700; font-size: 21px; color: var(--primary-dark); }
.brand-sub{ font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

.skip-link{
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus{ left: 0; }

.primary-nav{ display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.primary-nav a, .primary-nav summary{
  display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none;
}
.primary-nav a::-webkit-details-marker{ display:none; }
.primary-nav summary::-webkit-details-marker{ display:none; }
.primary-nav a:hover, .primary-nav summary:hover{ background: var(--surface-alt); color: var(--ink); }

.nav-dropdown{ position: relative; }
.nav-dropdown summary::after{ content: '▾'; margin-left: 6px; font-size: 11px; }
.nav-dropdown[open] summary{ background: var(--surface-alt); color: var(--ink); }
.nav-dropdown-panel{
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.nav-dropdown-panel a{ padding: 10px 12px; border-radius: 8px; color: var(--ink); font-weight: 500; }
.nav-dropdown-panel a:hover{ background: var(--primary-soft); }
.nav-dropdown-panel .desc{ display:block; font-weight: 400; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

.nav-auth{ display: flex; align-items: center; gap: 10px; flex: none; }
.nav-auth a.btn{ padding: 10px 18px; min-height: 40px; font-size: 14px; }

.menu-toggle{
  display: none; background: none; border: 1px solid var(--line); border-radius: 8px;
  width: 42px; height: 42px; cursor: pointer; align-items: center; justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:''; display:block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: .15s;
}
.menu-toggle span::before{ position:absolute; top:-6px; width:20px; }
.menu-toggle span::after{ position:absolute; top:6px; width:20px; }

@media (max-width: 880px){
  .primary-nav{
    display: none; position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
    background: var(--surface); flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 90px 18px 24px; gap: 2px; box-shadow: var(--shadow-md); overflow-y: auto;
  }
  body.nav-open .primary-nav{ display: flex; }
  body.nav-open{ overflow: hidden; }
  .primary-nav a, .primary-nav summary{ width: 100%; padding: 13px 14px; }
  .nav-dropdown-panel{ position: static; box-shadow: none; border: none; padding-left: 10px; }
  .menu-toggle{ display: inline-flex; }
  .nav-auth .btn-secondary{ display: none; }
  .nav-auth a.btn-primary{ padding: 9px 14px; font-size: 13.5px; }
  .brand-sub{ display: none; }
  body.nav-open .nav-scrim{ display: block; }
}
@media (max-width: 360px){
  .brand-mark{ font-size: 18px; }
}
.nav-scrim{ display:none; position: fixed; inset:0; background: rgba(28,43,57,.4); z-index: 40; }

/* -------------------- Hero -------------------- */
.hero{ padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); overflow: hidden; }
.hero-grid{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(24px, 5vw, 56px); align-items: center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: minmax(0,1fr); } }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note{ margin-top: 18px; font-size: 13.5px; color: var(--ink-faint); max-width: 46ch; }

.hero-panel{
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 28px; box-shadow: var(--shadow-md); position: relative;
}
.hero-panel .step{ display:flex; gap: 12px; align-items:flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hero-panel .step:last-child{ border-bottom: none; }
.hero-panel .num{
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center; font-family:"Lora",serif; font-weight:700; font-size: 13px;
}
.hero-panel .step p{ margin: 0; font-size: 14px; color: var(--ink-soft); }
.hero-panel .step b{ color: var(--ink); }

/* -------------------- Trust strip -------------------- */
.trust-strip{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px){ .trust-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.trust-item{ background: var(--surface); padding: 20px 18px; }
.trust-item .k{ font-family:"Lora",serif; font-weight: 700; color: var(--primary-dark); font-size: 15px; margin-bottom: 4px; }
.trust-item .v{ font-size: 13.5px; color: var(--ink-soft); }

/* -------------------- Cards / grids -------------------- */
.grid{ display: grid; gap: 20px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 880px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: minmax(0,1fr); } }

.card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; height: 100%;
}
.card.raised{ box-shadow: var(--shadow-sm); }
.card h3{ margin-bottom: 8px; }
.card p{ font-size: 14.5px; color: var(--ink-soft); margin-bottom: 0; }
.card .tag{
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--primary-dark); background: var(--primary-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}

.step-list{ counter-reset: step; display: grid; gap: 18px; }
.step-list .step-card{ display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; }
.step-list .step-num{
  counter-increment: step; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color:#fff;
  display: flex; align-items: center; justify-content: center; font-family:"Lora",serif; font-weight: 700; font-size: 17px;
}
.step-list .step-num::before{ content: counter(step); }
.step-card.dim .step-num{ background: var(--ink-faint); }
.badge-soon{ display:inline-block; margin-left:8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing:.03em; background: var(--warn-soft); color: var(--warn); padding: 2px 9px; border-radius: 999px; vertical-align: middle; }

/* -------------------- CTA banner -------------------- */
.cta-banner{
  background: var(--primary-dark); color: #fff; border-radius: 20px;
  padding: clamp(28px, 5vw, 48px); text-align: center;
}
.cta-banner h2{ color: #fff; }
.cta-banner p{ color: #C8DBDA; margin-inline: auto; }
.cta-banner .hero-actions{ justify-content: center; }

/* -------------------- FAQ (native details/summary) -------------------- */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  padding: 18px 4px; font-family:"Lora",serif; font-weight: 600; font-size: 17px; cursor: pointer;
  list-style: none; display:flex; justify-content: space-between; align-items:center; gap: 12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size: 22px; color: var(--primary); flex:none; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item .a{ padding: 0 4px 18px; color: var(--ink-soft); max-width: 68ch; }

/* -------------------- Compliance / legal-page styling -------------------- */
.legal-banner{
  background: var(--warn-soft); border: 1px solid #E7CE9E; color: var(--warn);
  border-radius: var(--radius); padding: 16px 18px; font-size: 14px; margin-bottom: 28px;
}
.legal-banner b{ color: var(--warn); }
.legal-doc h2{ font-size: 20px; margin-top: 2em; }
.legal-doc p, .legal-doc li{ color: var(--ink-soft); font-size: 15px; max-width: 74ch; }
.legal-doc{ max-width: 74ch; }
.legal-meta{ font-size: 13px; color: var(--ink-faint); margin-bottom: 24px; }

/* -------------------- Forms (auth pages) -------------------- */
.auth-shell{ max-width: 440px; margin-inline: auto; }
.auth-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px,5vw,40px); box-shadow: var(--shadow-sm); }
.auth-card h1{ font-size: 26px; }
.form-field{ margin-bottom: 16px; }
.form-field label{ display:block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea{
  width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; background: #fff; color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: 2px solid var(--primary); outline-offset: 1px; }
.form-hint{ font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.form-error{ background: #F5E2DE; color: #A23B2E; padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.form-success{ background: var(--ok-soft); color: var(--ok); padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.auth-foot{ text-align: center; margin-top: 18px; font-size: 14px; color: var(--ink-soft); }

/* -------------------- Contact -------------------- */
.contact-item{ display:flex; gap: 14px; align-items:flex-start; }
.contact-item .ico{ flex:none; width:38px;height:38px;border-radius:10px;background:var(--primary-soft); display:flex;align-items:center;justify-content:center; color: var(--primary-dark); font-weight:700; }

/* -------------------- Footer -------------------- */
.site-footer{ background: var(--ink); color: #CBD5D3; padding-block: 48px 24px; }
.site-footer a{ color: #E4EDEC; text-decoration: none; }
.site-footer a:hover{ text-decoration: underline; }
.footer-grid{ display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 28px; margin-bottom: 32px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: minmax(0,1fr); } }
.footer-grid h4{ color: #fff; font-family:"Lora",serif; font-size: 14px; text-transform: uppercase; letter-spacing:.04em; margin-bottom: 14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 9px; font-size: 14px; }
.footer-brand p{ font-size: 13.5px; color: #A9B8B6; max-width: 34ch; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content: space-between; font-size: 12.5px; color: #94A6A4; }
.footer-disclaimer{ font-size:12.5px; color:#94A6A4; max-width: 80ch; margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .menu-toggle span{ transition: none; }
}