/* ============================================================
   HADRIAN DIGITAL — Responsive Styles
   ============================================================


/* ============================================================
   HAMBURGER TOGGLE
   ============================================================ */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-toggle:hover {
  background: var(--wash);
  border-color: var(--line);
}

/* Icon swap: hamburger ↔ close */
.nav-toggle-close { display: none; }

header.nav-open .nav-toggle-open  { display: none; }
header.nav-open .nav-toggle-close { display: block; }


/* ============================================================
   TABLET  768px – 1023px
   ============================================================ */

@media (max-width: 1023px) {

  /* Horizontal padding */
  .header-inner,
  .hero,
  .reassurance,
  .section-standard,
  .page-intro,
  .contact-grid,
  .pricing-section,
  .footer-cta,
  .footer-main,
  .footer-bottom { padding-left: 32px; padding-right: 32px; }

  /* ── Pricing: stack ── */
  .pricing-section { padding-top: 72px; padding-bottom: 72px; }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ── Hero ── */
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hero h1 { font-size: 38px; }

  .hero-sub { max-width: 100%; }

  /* Landscape crop so portrait photo doesn't dominate the screen */
  .hero-photo-wrap  { aspect-ratio: 16 / 9; }
  .hero-photo       { object-position: top center; }

  /* ── Reassurance ── */
  .reassurance { padding-top: 72px; padding-bottom: 72px; }

  /* 2-column pain grid on tablet */
  .pains-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  /* ── Sections ── */
  .section-standard   { padding-top: 80px; padding-bottom: 80px; }

  /* ── Steps: 2 columns ── */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  /* ── Page intro (subpages) ── */
  .page-intro { padding-top: 64px; }
  .page-intro h1 { font-size: 35px; }

  /* ── Contact: stack ── */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 72px;
  }

  /* ── Footer CTA ── */
  .footer-cta {
    padding-top: 80px;
    padding-bottom: 72px;
  }

  .footer-cta h2 { font-size: 36px; }
}


/* ============================================================
   MOBILE  < 768px
   ============================================================ */

@media (max-width: 767px) {

  /* ── HEADER ──────────────────────────────────────────────── */

  .header-inner {
    padding: 0 20px;
    height: 64px;
  }

  /* Show hamburger */
  .nav-toggle { display: flex; }
  
  .header-inner,
  header.header-scrolled .header-inner { transform: none !important; }

  /* Nav becomes an absolute dropdown below the header bar */
  header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(1.3) blur(16px);
    -webkit-backdrop-filter: saturate(1.3) blur(16px);
    border-bottom: 1px solid var(--line);
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity   var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  header.nav-open nav {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  header nav a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    font-weight: 450;
    opacity: 1;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: color 0.15s ease;
  }

  header nav a:hover { color: var(--accent); opacity: 1; }

  header nav .btn {
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    text-align: center;
  }

  /* ── GLOBAL PADDING ───────────────────────────────────────── */

  .header-inner,
  .hero,
  .reassurance,
  .section-standard,
  .page-intro,
  .contact-grid,
  .pricing-section,
  .footer-cta,
  .footer-main,
  .footer-bottom { padding-left: 20px; padding-right: 20px; }

  /* ── PRICING ──────────────────────────────────────────────── */

  .pricing-section { padding-top: 52px; padding-bottom: 52px; }

  .pricing-grid { margin-top: 32px; }

  .price-panel { padding: 26px 22px 24px; }

  .price-figure { font-size: 36px; }

  .price-cta .btn { width: 100%; }

  /* ── HERO ─────────────────────────────────────────────────── */

  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 44px;
    padding-bottom: 48px;
  }

  .eyebrow { margin-bottom: 18px; }

  .hero h1 {
    font-size: 30px;
    letter-spacing: -.02em;
    margin-bottom: 16px;
  }

  .hero-sub   { font-size: 16px; margin-bottom: 28px; max-width: 100%; }
  .hero-trust { font-size: 13px; margin-top: 22px; }

  .hero-photo-wrap { aspect-ratio: 4 / 3; }
  .hero-photo      { object-position: top center; }

  /* ── REASSURANCE ──────────────────────────────────────────── */

  .reassurance { padding-top: 52px; padding-bottom: 52px; }

  .reassurance-text h2 { font-size: 24px; line-height: 1.28; }
  .reassurance-text p  { font-size: 15px; }

  .pains-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 36px;
  }

  /* Remove hover background on touch — stays stuck on mobile */
  .open-row:hover { background: transparent; }

  /* ── SECTIONS ─────────────────────────────────────────────── */

  .section-standard { padding-top: 56px; padding-bottom: 56px; }

  .section-header { max-width: 100%; }
  .section-header h2 { font-size: 26px; }
  .section-header p  { font-size: 15px; }

  /* ── OPEN ROWS ────────────────────────────────────────────── */

  /* Switch from 3-column grid to a clean stacked block layout */
  .open-row {
    display: block;
    padding: 22px 0;
    border-radius: 0;
  }

  .open-row-no    { display: block; margin-bottom: 4px;  font-size: 12px; }
  .open-row-title { display: block; margin-bottom: 6px;  font-size: 17px; }
  .open-row-body  { display: block; font-size: 14.5px; }

  /* ── HOW IT WORKS ─────────────────────────────────────────── */

  .how-it-works h2 {
    font-size: 26px;
    margin-bottom: 36px;
    max-width: 100%;
  }

  .steps-grid { grid-template-columns: 1fr; gap: 32px; }

  /* ── PAGE INTRO (subpages) ────────────────────────────────── */

  .page-intro { padding-top: 44px; }
  .page-intro h1 { font-size: 28px; letter-spacing: -.02em; }
  .page-intro-sub { font-size: 16px; }

  .section-tight { padding-top: 44px; }

  /* ── CONTACT ──────────────────────────────────────────────── */

  .contact-grid {
    padding-top: 36px;
    padding-bottom: 52px;
    gap: 40px;
  }

  .contact-form-card { padding: 24px 20px 22px; }

  .nap { margin-top: 36px; padding-top: 26px; }

  /* ── FOOTER CTA ───────────────────────────────────────────── */

  .footer-cta { padding-top: 60px; padding-bottom: 52px; }
  .footer-cta h2 { font-size: 28px; }
  .footer-cta p  { font-size: 16px; }

  /* ── FOOTER ───────────────────────────────────────────────── */

  .footer-main {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 28px;
    padding-top: 36px;
    padding-bottom: 28px;
  }

  .footer-cols { gap: 28px; }
  .footer-bottom { padding: 16px 20px; }
}