/* ============================================================
   Dr. Hines Inc. - shared design system.
   Lifted verbatim out of the homepage so every page can wear the
   same clothes. The homepage links this file now too, so there is
   exactly one place to change a colour, a heading size or a button.
   ============================================================ */
/* ============================================================
   drhinesinc.com — Premium redesign
   Couples-first positioning, elevated design language
   ============================================================ */
:root {
  --bg: #0B1120;
  --bg-card: #111827;
  --bg-elevated: #1A2236;
  --accent: #C9A84C;
  --accent-light: #E4CB7A;
  --accent-glow: rgba(201, 168, 76, 0.12);
  --green: #4ADE80;
  --green-muted: #22C55E;
  --white: #FFFFFF;
  --text: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(201, 168, 76, 0.25);
  --heading: 'DM Serif Display', Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bar: 72px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom));
}
img { max-width: 100%; height: auto; display: block; }

/* A whisper of grain over everything. Flat digital gradients are what makes a
   page feel machine-made; this is the tooth of the paper under them. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }
.section { padding: 72px 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }
.section-alt { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.divider { width: 48px; height: 2px; background: var(--accent); margin-bottom: 24px; }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--heading); font-weight: 400; color: var(--white); }
.hero-title {
  font-size: clamp(36px, 8vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero-title em { font-style: italic; color: var(--accent); }
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
/* Hand-set touch: a short rule leading into the label, the way a print
   subhead is struck. */
.section-label::before {
  content: "";
  flex: 0 0 30px; height: 1px;
  background: var(--accent); opacity: 0.55;
}
.section-title {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-subtitle {
  font-size: clamp(16px, 3.5vw, 19px);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 640px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  min-height: 56px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: #0B1120;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04); }
.btn-cta {
  background: var(--white);
  color: #0B1120;
  border-color: var(--white);
  font-weight: 700;
}
.btn-cta:hover { background: #F1F5F9; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
@media (min-width: 600px) {
  .btn-row { flex-direction: row; gap: 16px; }
  .btn-row .btn { width: auto; }
}

/* ---------- trust bar ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 32px;
  font-size: 13px;
  color: var(--text-secondary);
}
.trust-bar .stars { color: var(--accent); letter-spacing: 1px; font-size: 14px; }
.trust-bar strong { color: var(--text); font-weight: 600; }
.trust-bar span { display: inline-flex; align-items: center; gap: 6px; }
.trust-divider { width: 1px; height: 16px; background: var(--border); display: none; }
@media (min-width: 600px) { .trust-divider { display: block; } }

/* ---------- hero ---------- */
.hero { padding: 48px 0 56px; }
@media (min-width: 768px) { .hero { padding: 80px 0 72px; } }
.hero .section-subtitle { margin-top: 20px; max-width: 580px; }

/* ---------- hero layout ----------
   Below 940px this is a single column and the portrait is hidden: on a phone
   the words and the call button matter more than a face, and the image is
   187KB we would rather not spend there. */
.hero-layout { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) {
  .hero-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; }
  /* The headline carries hard line breaks for art direction, so the type has
     to be sized to the column rather than the viewport - at the full 64px
     "Your marriage deserves" wraps and the shape falls apart. */
  .hero-copy .hero-title { font-size: clamp(40px, 3.9vw, 52px); }
  .hero { padding: 64px 0 64px; }
  /* Both hero buttons have to sit on one line in a column this narrow; at the
     default 32px of side padding they wrap and go two rows tall. */
  .hero-copy .btn { padding-left: 22px; padding-right: 22px; white-space: nowrap; }
}
.hero-portrait { display: none; position: relative; }
@media (min-width: 940px) { .hero-portrait { display: block; } }
.hero-portrait::before {
  content: ""; position: absolute; inset: -18% -12% -12% -18%;
  background: radial-gradient(60% 55% at 55% 40%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.hero-portrait img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 18px;
  border: 1px solid var(--border-accent);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.hero-badge {
  position: absolute; left: -20px; bottom: 26px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.hero-badge-num { font-family: var(--heading); font-size: 26px; color: var(--accent-light); line-height: 1; }
.hero-badge-txt { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.hero-badge-txt strong { display: block; color: var(--text); font-weight: 600; }

/* ---------- keyboard focus ----------
   The whole page is anchors and buttons; without this a keyboard user has no
   idea where they are. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- credentials strip ---------- */
.cred-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 48px;
  padding: 32px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cred-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cred-number {
  font-family: var(--heading);
  font-size: 32px;
  color: var(--white);
  line-height: 1;
}
.cred-label { font-size: 13px; color: var(--text-muted); letter-spacing: 0.03em; }

/* ---------- services ---------- */
.services-grid { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 700px) { .services-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.service-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  transition: border-color 0.2s;
}
.service-card:hover { border-color: var(--border-accent); }
.service-card.featured {
  border-color: var(--border-accent);
  background: linear-gradient(135deg, var(--bg-elevated), rgba(201, 168, 76, 0.06));
}
@media (min-width: 700px) { .service-card.featured { grid-column: 1 / -1; } }
.service-card h3 { font-size: 22px; margin-bottom: 8px; }
.service-card p { font-size: 15.5px; color: var(--text-secondary); line-height: 1.7; }
.service-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ---------- reviews ---------- */
.reviews-header { margin-bottom: 40px; }
.rating-display { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rating-number {
  font-family: var(--heading);
  font-size: 56px;
  color: var(--white);
  line-height: 1;
}
.rating-stars { color: var(--accent); font-size: 18px; letter-spacing: 2px; }
.rating-count { font-size: 14px; color: var(--text-secondary); }
.reviews-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .reviews-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.review-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.review-card.wide { grid-column: 1 / -1; position: relative; }
/* An oversized quote mark, set in the display serif and bled off the corner
   the way a magazine would set it. */
.review-card.wide::before {
  content: "\201C";
  position: absolute; top: -26px; left: 14px;
  font-family: var(--heading); font-size: 110px; line-height: 1;
  color: var(--accent); opacity: 0.16; pointer-events: none;
}
.review-card.wide q { position: relative; }
@media (min-width: 700px) {
  .review-card.wide q { font-size: 17px; line-height: 1.8; }
}
.review-stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; margin-bottom: 12px; }
.review-card q { display: block; quotes: none; font-size: 15px; color: var(--text); line-height: 1.75; }
.review-author { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--white); }
.review-source { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.reviews-link {
  display: inline-block;
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.reviews-link:hover { color: var(--accent-light); }

/* ---------- pricing ---------- */
.assess-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px;
  margin-top: 32px; padding: 24px 0; list-style: none;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (min-width: 700px) { .assess-stats { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.assess-stats li { display: flex; flex-direction: column; gap: 5px; }
.assess-stats b {
  font-family: var(--heading); font-weight: 400;
  font-size: 30px; line-height: 1; color: var(--white);
}
.assess-stats span { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
.assess-separates { margin-top: 40px; max-width: 760px; }
.assess-separates h3 { font-size: 19px; margin-bottom: 14px; }
.assess-separates ul { margin: 0; padding: 0; list-style: none; }
.assess-separates li {
  font-size: 15px; color: var(--text-secondary); line-height: 1.6;
  padding: 10px 0 10px 20px; border-bottom: 1px solid var(--border); position: relative;
}
.assess-separates li:last-child { border-bottom: 0; }
.assess-separates li::before { content: "\2014"; position: absolute; left: 0; color: var(--accent); }
.assess-separates li strong { color: var(--text); font-weight: 600; }
.pricing-grid { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 700px) { .pricing-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
}
.price-card.featured {
  border-color: var(--accent);
  position: relative;
  background: linear-gradient(135deg, var(--bg-elevated), rgba(201, 168, 76, 0.06));
}
.price-card.complimentary { border-top: 3px solid var(--green-muted); }
.price-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.price-card h3 { font-size: 21px; }
.price-amount {
  font-family: var(--heading);
  font-size: 28px;
  color: var(--accent-light);
  white-space: nowrap;
}
.price-card.complimentary .price-amount { color: var(--green); }
.price-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; flex: 1; }
.price-card .btn { margin-top: 20px; min-height: 50px; font-size: 15px; }
.price-badge {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0B1120;
  background: var(--accent);
  border-radius: 100px;
}

/* ---------- form ---------- */
.form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 24px;
  margin-top: 32px;
  max-width: 640px;
}
@media (min-width: 768px) { .form-card { padding: 40px 32px; } }

/* ---------- booking embed ----------
   The booking form is served from my.stronghold.coach, which is a separate
   origin, so the iframe cannot measure its own content and resize to fit.
   The heights below are chosen to show the whole flow without an inner
   scrollbar in the common case; anything taller scrolls inside the frame. */
/* The booking app carries its own navy-and-gold header and a light body
   below it, so it needs no mat around it - padding here just produced a pale
   rim around a dark header. The card is only a border, a radius and a clip,
   and the form runs edge to edge inside it. */
.booking-layout { display: grid; gap: 32px; margin-top: 36px; align-items: start; }
@media (min-width: 940px) {
  .booking-layout { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 44px; }
}
.booking-card {
  background: transparent;
  border: 1px solid var(--border-accent);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}
.booking-side { padding-top: 4px; }
.booking-side h3 { font-size: 20px; margin-bottom: 18px; }
.booking-steps { list-style: none; padding: 0; margin: 0 0 28px; counter-reset: step; }
.booking-steps li {
  position: relative; counter-increment: step;
  padding: 0 0 20px 44px;
  font-size: 15px; color: var(--text-secondary); line-height: 1.6;
}
.booking-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-size: 15px; color: var(--accent-light);
  background: var(--bg-elevated); border: 1px solid var(--border-accent);
}
.booking-steps strong { color: var(--text); font-weight: 600; }
.booking-aside {
  border-top: 1px solid var(--border);
  padding-top: 20px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.65;
}
.booking-aside a { color: var(--accent-light); font-weight: 600; white-space: nowrap; }
.booking-embed {
  display: block;
  width: 100%;
  /* Measured from the booking app's own intrinsic layout: about 2877px at a
     305px-wide frame, about 2125px at 614px. These sit just above that so the
     whole form shows without an inner scrollbar.

     Do NOT drive this height from the frame's content. The app's layout
     stretches to fill whatever height it is given, so reading its height and
     writing it back grows the frame without limit - roughly 24px a second,
     forever. A fixed height is the stable answer here. */
  height: 2950px;
  border: 0;
  border-radius: 0;
  /* matches the booking app's own background, so no dark band flashes behind
     it while the frame is still loading */
  background: #FFFFFF;
}
@media (min-width: 768px) {
  .booking-embed { height: 2200px; }
}
.booking-fallback {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
}
.booking-fallback a { color: var(--accent-light); font-weight: 600; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.field .hint { font-weight: 400; font-size: 13px; color: var(--text-muted); margin-top: 2px; display: block; }
.inp, .sel, .txt {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--white);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
}
.inp:focus, .sel:focus, .txt:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.txt { min-height: 96px; resize: vertical; line-height: 1.55; }
.inp::placeholder, .txt::placeholder { color: var(--text-muted); }
.sel {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394A3B8'%3E%3Cpath d='M8 11L3 5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 44px;
}
.sel option { background: var(--bg); color: var(--white); }
.rng { width: 100%; height: 42px; background: transparent; appearance: none; -webkit-appearance: none; }
.rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green-muted), var(--accent) 55%, #EF4444); }
.rng::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green-muted), var(--accent) 55%, #EF4444); }
.rng::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; margin-top: -11px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.rng::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--bg);
  background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.rng:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.rng-labels { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 14px; font-size: 15px; border-radius: 8px; padding: 16px; display: none; line-height: 1.55; }
.form-msg.ok { display: block; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #86EFAC; }
.form-msg.bad { display: block; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #FCA5A5; }
.form-fine { font-size: 13px; color: var(--text-muted); margin-top: 16px; line-height: 1.6; }
.form-fine a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- about ---------- */
.about-layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.about-figure { position: relative; flex-shrink: 0; }
/* The frame sits offset behind the photo rather than around it - a placed
   object, not a component. */
.about-figure::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--border-accent); border-radius: 12px;
}
.about-photo {
  position: relative;
  width: 190px; height: 238px;
  border-radius: 12px; object-fit: cover; object-position: top center;
  border: 1px solid var(--border);
}
.about-sign {
  margin-top: 22px;
  font-family: var(--heading);
  font-size: 25px;
  font-style: italic;
  color: var(--accent-light);
}
.about-content { flex: 1; min-width: 280px; }
.about-quote {
  font-family: var(--heading);
  font-size: clamp(22px, 4.5vw, 30px);
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 20px;
}
.about-quote em { font-style: italic; color: var(--accent); }
.about-content p { color: var(--text-secondary); font-size: 16px; line-height: 1.75; }
.about-content p + p { margin-top: 14px; }
.about-creds {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- footer ---------- */
.footer {
  background: #060A14;
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
}
.footer p { font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.footer a { color: var(--text-secondary); transition: color 0.2s; }
.footer a:hover { color: var(--accent-light); }
.footer-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.footer .crisis { margin-top: 16px; color: var(--text-secondary); }
.footer .crisis strong { color: var(--accent-light); }
.footer-legal { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ---------- sticky bar ---------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 17, 32, 0.95);
  border-top: 1px solid var(--border);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.sticky-bar a {
  flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1.5px solid transparent; transition: all 0.2s;
}
.sticky-bar .bar-secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.25); }
.sticky-bar .bar-primary { background: var(--accent); color: #0B1120; }
@media (min-width: 900px) {
  .sticky-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- nav ---------- */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 0;
  background: rgba(11, 17, 32, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topnav-brand {
  font-family: var(--heading);
  font-size: 20px;
  color: var(--white);
  letter-spacing: -0.01em;
}
.topnav-links { display: none; gap: 32px; align-items: center; }
@media (min-width: 768px) { .topnav-links { display: flex; } }
.topnav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.topnav-links a:hover { color: var(--white); }
.topnav-links .nav-cta {
  padding: 10px 20px;
  background: var(--accent);
  color: #0B1120;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
}
.topnav-links .nav-cta:hover { background: var(--accent-light); }
body { padding-top: 60px; }