/* ==========================================================================
   PATIENT MITRA MEDICALS — HOMEPAGE
   Editorial apothecary. Saffron · Cream · Crisp White.
   Plus Jakarta Sans for UI, Instrument Serif for display.
   Sharp corners, generous rhythm, considered motion.
   ========================================================================== */

/* ─────────────────────── TOKENS ─────────────────────── */
:root {
  /* Saffron spectrum */
  --saffron-900: #3D2A0F;
  --saffron-800: #78350F;
  --saffron-700: #92400E;
  --saffron:     #B45309;
  --saffron-500: #D97706;
  --saffron-400: #F59E0B;
  --saffron-300: #FBBF24;
  --saffron-200: #FCD97A;
  --saffron-100: #FDE68A;
  --saffron-50:  #FEF3C7;

  /* Cream + paper */
  --paper:       #FFFFFF;
  --cream:       #FBF6E8;
  --cream-deep:  #F5EDD6;
  --cream-shade: #EDE0BC;

  /* Ink (warm near-black) */
  --ink:         #1B1205;
  --ink-soft:    #3A2C14;
  --ink-mute:    #6A5835;
  --ink-faint:   #A69169;

  /* Semantic */
  --bg:          var(--cream);
  --surface:     var(--paper);
  --rule:        var(--ink);
  --rule-soft:   rgba(27, 18, 5, 0.14);

  /* Layout */
  --max:         1280px;
  --gutter:      28px;

  /* Type scale base */
  --fs-body:     16.5px;

  /* Motion */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur:         600ms;
}

/* ─────────────────────── RESET ─────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "ss01";
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dt, dd, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

::selection { background: var(--ink); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ─────────────────────── GRAIN ─────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(180, 83, 9, 0.05), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(217, 119, 6, 0.04), transparent 50%);
}

/* ─────────────────────── LAYOUT SHELL ─────────────────────── */
.topbar-inner,
.section,
.hero,
.footer-inner {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* ─────────────────────── TOPBAR ─────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  transition: background 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}

.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 260ms var(--ease-out);
}

.topbar.scrolled {
  background: rgba(251, 246, 232, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar.scrolled::after { transform: scaleY(1); }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  transition: padding 240ms var(--ease-out);
}

.topbar.scrolled .topbar-inner { padding-block: 14px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 1px solid var(--ink);
  padding: 3px;
  background: var(--paper);
}

.brand-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--saffron);
  margin-bottom: 3px;
}

.brand strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.nav a {
  position: relative;
  padding-block: 4px;
  transition: color 160ms;
}

.nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms var(--ease-out);
}
.nav a:not(.nav-cta):hover { color: var(--ink); }
.nav a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--cream) !important;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: background 200ms, color 200ms, gap 200ms;
}

.nav-cta:hover { background: var(--saffron-800); gap: 14px; }
.nav-cta .arrow { width: 15px; height: 15px; }
.nav-cta::after { display: none !important; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  /* `position: relative` is what makes z-index actually take effect —
     without it, the auto-positioned toggle had no z-index applied and
     the open nav drawer painted over it. */
  position: relative;
  z-index: 101;
}

/* Same lift for the brand on the main site so the logo stays visible
   when the menu is open. */
.brand {
  position: relative;
  z-index: 101;
}

.nav-toggle span {
  display: block;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transition: transform 280ms var(--ease-out), opacity 220ms;
  transform-origin: center;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────── TYPOGRAPHY SYSTEM ─────────────────────── */
.display,
.h-display {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.display {
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  margin-block: 28px 0;
}

.h-display {
  font-size: clamp(2.1rem, 4.6vw, 4rem);
}

.display em,
.h-display em,
.quote em,
.wordmark em {
  font-style: italic;
  color: var(--saffron-800);
  font-feature-settings: "ss01";
}

/* section labels */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--saffron-800);
}

.section-label i {
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--saffron-800);
}

.section-head {
  max-width: 860px;
  margin-bottom: 60px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head .h-display {
  margin-top: 18px;
}

/* ─────────────────────── BUTTONS ─────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms, gap 220ms;
  white-space: nowrap;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn .arrow {
  width: 16px; height: 16px;
  transition: transform 240ms var(--ease-out);
}
.btn:hover { gap: 14px; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--saffron-800);
  border-color: var(--saffron-800);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}

/* ─────────────────────── SCROLL REVEAL ─────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
[data-animate].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none !important; }
  .live-dot { animation: none !important; }
}

/* ─────────────────────── HERO ─────────────────────── */
.hero {
  padding-block: 48px 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 60px;
  align-items: end;
}

.hero-copy { padding-top: 16px; }

.hero-loc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--saffron-800);
  padding: 7px 0;
}
.hero-loc svg { width: 14px; height: 14px; }

.display { max-width: 15ch; }

.lead {
  margin-top: 32px;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.dropcap {
  float: left;
  font-family: "Instrument Serif", serif;
  font-size: 3.6em;
  line-height: 0.78;
  padding: 6px 10px 0 0;
  color: var(--saffron-800);
  font-style: italic;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

/* Hero side column */
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 12px;
}

.hero-stamp {
  position: relative;
  border: 1px solid var(--ink);
  padding: 22px 24px 24px;
  background: var(--paper);
  display: grid;
  gap: 2px;
}

.hero-stamp::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

.stamp-kicker {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--saffron-800);
}

.stamp-year {
  font-family: "Instrument Serif", serif;
  font-size: clamp(4.2rem, 9vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.stamp-foot {
  margin-top: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  font-weight: 600;
}

.hero-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink);
}

.fact {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.fact dt {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
}

.fact dd {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.fact dd a { border-bottom: 1px solid var(--saffron); padding-bottom: 1px; }
.fact dd a:hover { color: var(--saffron-800); }

.with-dot { display: inline-flex; align-items: center; gap: 10px; }

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .45);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ─────────────────────── MARQUEE ─────────────────────── */
.marquee {
  width: 100%;
  margin-block: 16px 0;
  background: var(--saffron-800);
  color: var(--cream);
  border-block: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-group {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 22px 24px;
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-style: italic;
  white-space: nowrap;
}

.marquee-group i {
  font-style: normal;
  font-size: 0.9em;
  color: var(--saffron-300);
  transform: translateY(-2px);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ─────────────────────── SECTIONS ─────────────────────── */
.section {
  padding-block: 112px 0;
  scroll-margin-top: 90px;
}

/* ─────────────────────── SERVICES ─────────────────────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ink);
  background: var(--paper);
}

.service-card {
  position: relative;
  padding: 44px 40px 40px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  transition: background 260ms var(--ease-out);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  min-height: 340px;
}

.service-card:nth-child(2n)      { border-right: none; }
.service-card:nth-last-child(-n+2) { border-bottom: none; }

.service-card:hover { background: var(--cream); }

.card-num {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(3rem, 5vw, 4.6rem);
  line-height: 1;
  color: var(--saffron);
  transition: color 260ms var(--ease-out), transform 360ms var(--ease-out);
  align-self: start;
  transform-origin: left center;
}

.service-card:hover .card-num {
  color: var(--saffron-800);
  transform: translateY(-4px);
}

.card-body h3 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--ink);
}

.card-body p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 38ch;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  transition: gap 240ms var(--ease-out), color 200ms;
}

.card-link svg { width: 16px; height: 16px; }
.service-card:hover .card-link { gap: 14px; color: var(--saffron-800); }

/* ─────────────────────── STATS ─────────────────────── */
.stats-band {
  background: var(--cream-deep);
  margin-top: 112px;
  padding-block: 96px;
  border-block: 1px solid var(--ink);
  width: 100%;
  max-width: none;
}

.stats-band > .section-head {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  margin-bottom: 60px;
}

.stats-grid {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.stat {
  padding: 44px 28px;
  border-right: 1px solid var(--rule-soft);
  text-align: left;
  display: grid;
  gap: 16px;
  align-content: end;
}
.stat:last-child { border-right: none; }

.stat-num {
  display: block;
  font-family: "Instrument Serif", serif;
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* Override .section padding-block:0 for non-padded (full-bleed) bands */
.section.stats-band { padding-block: 96px; margin-top: 112px; }

/* ─────────────────────── QUOTE ─────────────────────── */
.quote-section {
  padding-block: 140px 0;
}

.quote {
  max-width: 980px;
  margin-inline: auto;
  position: relative;
  padding-left: 80px;
}

.quote-mark {
  position: absolute;
  top: -36px;
  left: 0;
  font-family: "Instrument Serif", serif;
  font-size: clamp(6rem, 12vw, 12rem);
  line-height: 1;
  color: var(--saffron);
  font-style: italic;
}

.quote blockquote {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.8rem, 3.6vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.quote blockquote em {
  font-style: italic;
  color: var(--saffron-800);
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}

.sig-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--ink);
}

/* ─────────────────────── PROCESS ─────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  counter-reset: step;
  border-top: 1px solid var(--ink);
}

.steps::before {
  content: '';
  position: absolute;
  top: 78px;
  left: 0; right: 0;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--saffron-800) 0 6px,
    transparent 6px 12px
  );
  opacity: 0.5;
}

.step {
  position: relative;
  padding: 32px 28px 36px 0;
  padding-right: 28px;
  border-right: 1px solid var(--rule-soft);
  display: grid;
  gap: 18px;
  align-content: start;
}

.step:last-child { border-right: none; padding-right: 0; }

.step-num {
  position: relative;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--saffron);
  background: var(--bg);
  padding-right: 18px;
  width: max-content;
  line-height: 1;
  z-index: 1;
}

.step h4 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 36px;
}

.step p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 30ch;
}

/* ─────────────────────── TRUST ─────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}

.trust-copy .h-display { margin-top: 18px; max-width: 14ch; }
.trust-copy .section-label { margin-bottom: 0; }

.trust-lede {
  margin-top: 28px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 36ch;
}

.trust-copy .btn-ghost { margin-top: 28px; }

.trust-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink);
}

.trust-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: padding 260ms var(--ease-out);
}

.trust-list li:hover { padding-inline-start: 12px; }

.trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--saffron-800);
  flex-shrink: 0;
}
.trust-ico svg { width: 22px; height: 22px; }

.trust-list strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
}

.trust-list span {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ─────────────────────── SOCIAL ─────────────────────── */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.social-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px;
  display: grid;
  gap: 24px;
  transition: background 240ms;
}
.social-card:hover { background: var(--cream); }

.social-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.social-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  color: var(--paper);
  flex-shrink: 0;
  border: 1px solid var(--ink);
}
.social-ico svg { width: 22px; height: 22px; }

.social-ico-fb { background: #1877F2; }
.social-ico-ig {
  background: linear-gradient(135deg, #F09433, #DC2743 45%, #BC1888);
  color: var(--paper);
}

.social-head strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.social-head > div > span {
  font-size: 12.5px;
  color: var(--ink-mute);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--saffron-800);
  transition: gap 220ms;
}
.social-link svg { width: 14px; height: 14px; }
.social-link:hover { gap: 12px; }

.post-tag {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 12px;
  background: var(--ink);
  color: var(--cream);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.social-post h4 {
  margin: 14px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
}

.social-post p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.social-post time {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--saffron-800);
}

/* ─────────────────────── FAQ ─────────────────────── */
.faq-list {
  border-top: 1px solid var(--ink);
  max-width: 960px;
  margin-inline: auto;
}

.faq details {
  border-bottom: 1px solid var(--ink);
  transition: background 200ms;
}

.faq details[open] { background: var(--paper); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary span:first-child {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.faq-sign {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.faq-sign::before,
.faq-sign::after {
  content: '';
  position: absolute;
  background: var(--ink);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 320ms var(--ease-out);
}
.faq-sign::before { width: 100%; height: 1.5px; }
.faq-sign::after  { width: 1.5px; height: 100%; }

.faq details[open] .faq-sign::after { transform: translate(-50%, -50%) scaleY(0); }
.faq details[open] .faq-sign::before { transform: translate(-50%, -50%) rotate(0); }

.faq details > p {
  padding: 0 24px 32px;
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ─────────────────────── CONTACT ─────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.contact-card {
  padding: 36px 32px;
  border-right: 1px solid var(--ink);
  display: grid;
  gap: 16px;
  align-content: start;
}
.contact-card:last-child { border-right: none; }

.contact-card.lg {
  background: var(--cream-deep);
}

.c-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--saffron-800);
}

.c-address {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.c-list {
  display: grid;
  gap: 10px;
}
.c-list a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 180ms, border-color 180ms;
}
.c-list a:hover {
  color: var(--saffron-800);
  border-bottom-color: var(--saffron);
}

.c-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  font-size: 14.5px;
}
.c-hours dt {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  align-self: center;
}
.c-hours dd { color: var(--ink); font-weight: 600; }

.c-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
  font-style: italic;
  font-family: "Instrument Serif", serif;
}

/* ─────────────────────── FOOTER ─────────────────────── */
.footer {
  margin-top: 140px;
  background: var(--ink);
  color: var(--cream-shade);
  overflow: hidden;
}

.footer-inner {
  padding-block: 80px 32px;
  display: grid;
  gap: 44px;
}

.wordmark {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em;
  font-family: "Instrument Serif", serif;
  font-size: clamp(3rem, 13vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cream);
  text-align: center;
}

.wordmark em {
  font-style: italic;
  color: var(--saffron-300);
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 246, 232, 0.18);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cream);
}

.footer-nav a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 160ms, border-color 160ms;
}
.footer-nav a:hover {
  color: var(--saffron-300);
  border-bottom-color: var(--saffron-300);
}

.footer-copy {
  display: flex;
  gap: 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cream-shade);
  opacity: 0.75;
}

/* ─────────────────────── RESPONSIVE ─────────────────────── */
@media (max-width: 1100px) {
  .hero-grid { gap: 40px; }
  .section { padding-block: 96px 0; }
  .steps::before { display: none; }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .step:nth-child(2) { border-right: none; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .step:nth-child(n+3)  { padding-top: 40px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  html { scroll-padding-top: 76px; }

  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    background: var(--cream);
    padding: 80px 28px;
    font-size: 32px;
    font-weight: 400;
    font-family: "Instrument Serif", serif;
    z-index: 99;
    transform: translateY(-100%);
    transition: transform 380ms var(--ease-out);
    line-height: 1.4;
  }
  .nav.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 380ms var(--ease-out), visibility 0s linear 0s;
  }
  .nav:not(.open) {
    visibility: hidden;
    transition: transform 380ms var(--ease-out), visibility 0s linear 380ms;
  }
  .nav a { padding: 10px 0; }
  .nav a:not(.nav-cta)::after { display: none; }

  /* The desktop "Browse store" ink pill clashes visually with the
     editorial serif drawer menu, and the hero already has a primary
     Browse the store CTA right under the intro copy. Hide it from the
     mobile menu entirely so the hamburger drawer reads as a clean list
     of section links. */
  .nav-cta { display: none !important; }

  /* While the menu is open we kill the topbar's backdrop-filter so it
     no longer acts as a containing block for the fixed-position nav —
     this is what was constraining the drawer to the topbar's height
     (so the page bled through underneath). The topbar background goes
     fully opaque cream in the same beat so logo + hamburger stay on a
     solid bar. */
  body.nav-open .topbar,
  body.nav-open .topbar.scrolled {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.nav-open .topbar::after { transform: scaleY(1); }

  /* Tap-anywhere-to-close scrim. Sits below the nav itself but above
     all page content. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 18, 5, 0.42);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 98;
    transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
  }
  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 280ms var(--ease-out), visibility 0s linear 0s;
  }
}

/* The nav-backdrop element exists in the DOM at all widths; on desktop
   it must stay completely hidden because there is no mobile drawer. */
@media (min-width: 901px) {
  .nav-backdrop { display: none; }
}

/* Scroll-lock the page while the drawer is open. We use the
   position-fixed-body pattern (set via JS in main.js) for an iOS-safe
   lock; this CSS just hides the residual overflow as a backup. */
body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* When the body is pinned via `position: fixed`, the topbar's
   `position: sticky` no longer participates in real scrolling, so it
   would end up offset above the viewport along with the rest of the
   body. Force it to stay anchored to the actual viewport top while the
   nav is open — that's what keeps the hamburger button visible so the
   user can always close the menu. */
body.nav-open .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110; /* above the nav drawer (99) and its scrim (98). */
}

/* Mobile-only stacking rules. These were originally inside the
   `@media (max-width: 900px)` block above but got displaced when the
   nav-drawer overrides were inserted; restoring them here keeps the
   layout breakpoints clean. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-side { flex-direction: column; }

  .service-grid { grid-template-columns: 1fr; }
  .service-card {
    border-right: none;
    border-bottom: 1px solid var(--ink);
    min-height: 0;
    padding: 32px 24px;
  }
  .service-card:last-child { border-bottom: none; }

  .trust-grid { grid-template-columns: 1fr; gap: 44px; }

  .social-grid { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { border-right: none; border-bottom: 1px solid var(--ink); }
  .contact-card:last-child { border-bottom: none; }

  .footer-meta { flex-direction: column; align-items: flex-start; gap: 18px; }
  .wordmark { font-size: clamp(3rem, 16vw, 8rem); }
}

@media (max-width: 600px) {
  .section { padding-block: 80px 0; }
  .section-head { margin-bottom: 40px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft) !important;
  }
  .stat:last-child { border-bottom: none !important; }

  .steps { grid-template-columns: 1fr; }
  .step {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft);
    padding: 28px 0;
  }
  .step:last-child { border-bottom: none; }

  .quote { padding-left: 0; padding-top: 56px; }
  .quote-mark { top: -12px; left: 0; }

  .dropcap { font-size: 3em; }
  .lead { font-size: 1rem; }

  .marquee-group {
    gap: 28px;
    padding: 16px 20px;
  }

  .faq summary { padding: 22px 0; }
  .faq details > p { padding: 0 0 24px; }
}