/* Responsive layer — loaded after each page's inline styles so it wins on ties.
   Breakpoints: 1000px (tablet), 680px (phone).

   NOTE — the .wrap padding rule, which bites in BOTH directions:

   1. .wrap must only ever set LEFT/RIGHT padding. Layout containers share the
      wrap class (.hero.wrap, .page-head.wrap, .story.wrap, section.block.wrap),
      so a `padding` shorthand here silently wipes out their vertical spacing.

   2. The same is true in reverse: those containers must only ever set
      TOP/BOTTOM padding. A `padding` shorthand on them zeroes the horizontal
      gutter at EVERY width, and no rule in this file can win it back.

   Rule: horizontal padding belongs to .wrap and nothing else; vertical padding
   belongs to the container and nothing else. Never a shorthand on either. */

@media (max-width: 1000px) {
  .wrap { padding-left: 28px; padding-right: 28px; }

  /* nav */
  .nav-inner { flex-wrap: wrap; gap: 16px 20px; }
  .nav-links { gap: 20px; flex-wrap: wrap; }

  /* homepage hero */
  .hero { padding-top: 34px; padding-bottom: 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 42px; }
  .hero-visual { justify-content: flex-start; }

  /* shared blocks */
  .svc-grid, .rev-grid { grid-template-columns: 1fr 1fr; }
  .meet, .cta { grid-template-columns: 1fr; padding: 44px 40px; }
  .meet-visual, .cta-visual { justify-content: flex-start; }
  .story { grid-template-columns: 1fr; gap: 52px; }
  .creds-block, .reviews { padding: 44px 40px; }
  .creds-grid { gap: 32px; }
  .svc { padding: 40px 38px; gap: 28px; }
  .page-head h1 { font-size: 42px; }
  .page-head .seal { width: 110px; right: 28px; }
}

@media (max-width: 680px) {
  .wrap { padding-left: 20px; padding-right: 20px; }

  /* ── nav: brand on top, links + portal below ── */
  nav { padding: 14px 0 4px; }
  .nav-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand { margin-right: 0; }
  .brand img, .brand svg { width: 40px; height: 40px; }
  .brand .name { font-size: 15px; }
  .brand .sub { font-size: 10px; }
  .nav-links { gap: 14px 18px; width: 100%; align-items: center; }
  .nav-links a { font-size: 14.5px; }
  .nav-links .btn { padding: 10px 20px; font-size: 13.5px; }

  /* ── 44px tap targets ──────────────────────────────────────────────────────
     This audience skews older and arrives by phone link, so target generosity
     matters more than average. min-height + inline-flex centering keeps the
     visual position identical and only grows the hit box. */
  .nav-links a,
  .foot-col a,
  .foot-col .fax,
  .svc a,
  .rev-cta a,
  .card a.big,
  .card .cardlink { min-height: 44px; display: inline-flex; align-items: center; }
  /* the footer stack needs room so adjacent 44px boxes cannot collide */
  .foot-col { gap: 2px; }

  /* The honey-underlined text links can't take min-height: the underline is a
     border-bottom, so growing the box would drag the rule away from the text.
     Extend the hit area with a centred transparent pseudo-element instead. */
  .textlink, .meet .whitelink { position: relative; }
  .textlink::after, .meet .whitelink::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 44px;
  }

  /* ── page top spacing (restored — the shorthand bug was eating these) ── */
  .hero { padding-top: 28px; padding-bottom: 54px; }
  .page-head { padding-top: 30px; padding-bottom: 4px; }
  .story { padding-top: 40px; }
  section.block { padding-top: 56px; }
  section.block--band { padding-top: 64px; }

  /* type scale */
  .hero h1, .page-head h1 { font-size: 32px; line-height: 1.1; }
  .hero p.lede, .page-head .lede { font-size: 16.5px; }
  .sec-title { font-size: 26px; }
  .meet h2, .cta h2 { font-size: 25px; }
  .svc h2 { font-size: 24px; }

  /* hero visual */
  .hero-grid { gap: 36px; }
  .arch-photo { width: 100%; max-width: 300px; height: auto; aspect-ratio: 372/470; }
  .hero-seal { width: 104px !important; height: auto !important; bottom: -26px; left: -4px; }
  .hero-ctas { flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }

  /* stacks */
  .svc-grid, .rev-grid, .creds-grid, .cards { grid-template-columns: 1fr; }
  .strip { padding: 26px 0; }
  .strip-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .strip-label { max-width: none; }
  .badges { gap: 12px; }
  .badge-card { padding: 10px 14px; }
  .badge-card img { height: 54px; }

  /* panels */
  .meet, .cta { padding: 36px 26px; border-radius: 24px; }
  .creds-block, .reviews { padding: 36px 26px; border-radius: 24px; }
  .cta { margin-top: 60px; }
  .creds-block { margin-top: 60px; }
  .meet-visual img, .cta-visual img, .meet-visual svg { width: 130px; height: auto; }

  /* services PAGE cards (standalone .svc sections — grid layout, numbered) */
  .svc { grid-template-columns: 1fr; padding: 32px 26px; gap: 18px; border-radius: 24px; margin-top: 26px; }
  .svc .num { width: 48px; height: 48px; font-size: 17px; }
  /* homepage cards reuse .svc inside .svc-grid but are flex columns — the two
     rules above would add 18px between every child and double the card gap. */
  .svc-grid .svc { gap: 0; margin-top: 0; }
  .svc p, .story-copy p { font-size: 15.5px; line-height: 1.75; }
  .svc .fit { padding: 16px 18px; font-size: 14.5px; }

  /* about page */
  .story-visual .seal { width: 96px; right: 4px; bottom: -24px; }
  .timeline { padding-left: 20px; margin-top: 28px; }
  .tl-item::before { left: -27px; }

  /* contact page */
  .page-head .seal { position: static; display: block; width: 96px; margin: 24px 0 0; }
  .cards { margin-top: 32px; }
  .card { padding: 28px 24px; }
  .card .big { font-size: 21px; }
  .note { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 26px; margin-top: 32px; }
  .note img { width: 58px; }
  .note p { font-size: 15.5px; }

  /* footer */
  footer { margin-top: 64px; padding: 40px 0 26px; }
  .foot-grid { flex-direction: column; gap: 26px; }
  .foot-brand .sub { letter-spacing: .08em; }
  .foot-bottom { flex-direction: column; gap: 8px; font-size: 12px; margin-top: 32px; }
}