feat: full responsive layout — mobile-first, lg breakpoint, fluid typography

Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type.

Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close,
  h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open.
Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image
  scales responsively, gradient mask via .hero-mask only at lg+ in CSS.
Divider: flex-wrap + gap-y for smaller screens.
Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight.
Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row,
  excerpt hidden on mobile secondary cards to save space.
About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo.
Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+.
Footer: flex-col→lg:flex-row, flex-wrap on legal links.
globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/Divider.tsx

@@ -1,7 +1,7 @@
 export function Divider() {
   return (
-    <div className="flex items-center justify-center pb-[1.25rem] pt-[3rem] w-full bg-[#f5f0e8]">
-      <div className="flex gap-[2rem] items-center overflow-clip shrink-0">
+    <div className="flex items-center justify-center pb-[1.25rem] pt-8 lg:pt-[3rem] w-full bg-[#f5f0e8]">
+      <div className="flex flex-wrap gap-x-[2rem] gap-y-3 items-center justify-center px-4">
 
         <p
           className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"