/* ===========================================================
   Sunday Sauce Studio — Responsive Layer
   Mobile / tablet / small-screen polish.
   Pure overrides — preserves desktop design, branding,
   colors, fonts, animations and sticker aesthetic.
   =========================================================== */

/* ---- Universal anti-overflow safeguards ---- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
section { max-width: 100vw; }

/* Buttons/inputs never spill */
input, textarea, select, button { max-width: 100%; }

/* =========================================================== */
/* ----------  Hamburger button + mobile menu (base)  -------- */
/* Declared BEFORE media queries so the @media overrides win.  */
/* =========================================================== */
.nav-toggle {
  display: none;          /* shown only on mobile via @media below */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  padding: 0;
  flex: none;
}
.nav-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.nav-toggle .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars i {
  content: "";
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i      { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu hidden by default; .open class reveals it. */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* =========================================================== */
/* ----------  ≤ 1280px — wrap padding tightens  ------------- */
/* =========================================================== */
@media (max-width: 1280px) {
  .wrap { padding: 0 28px; }
}

/* =========================================================== */
/* ----------  ≤ 1100px — slight grid relaxations  ----------- */
/* =========================================================== */
@media (max-width: 1100px) {
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .testi:nth-child(7) { grid-column: auto; }

  .pillars-grid { gap: 18px; }
  .menu-item { grid-template-columns: 70px 1fr 180px 52px; gap: 18px; padding: 20px 22px; }
  .menu-title { font-size: 28px; }
  .menu-num { font-size: 48px; }

  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }

  .portfolio-grid { gap: 36px 26px; }
}

/* =========================================================== */
/* ----------  ≤ 980px — tablet  ----------------------------- */
/* =========================================================== */
@media (max-width: 980px) {
  .wrap { padding: 0 24px; }

  /* --- Nav (hamburger takes over) --- */
  .nav-inner { padding: 12px 24px; gap: 12px; }
  .nav-logo { font-size: 24px; }
  .nav-logo .dot { width: 18px; height: 18px; }
  /* Hide ALL desktop nav links (including the pill button) at mobile.
     Use higher specificity + !important to beat styles.css's
     `.nav-links .pill { display: inline-flex }` rule. */
  .nav .nav-inner .nav-links,
  .nav .nav-inner .nav-links a,
  .nav .nav-inner .nav-links .pill { display: none !important; }
  .nav-toggle { display: inline-flex; }        /* hamburger shown */

  /* mobile-menu overlay — visibility controlled by the .open class
     (base rules: .mobile-menu { display: none } and
                  .mobile-menu.open { display: flex }) */
  .mobile-menu {
    flex-direction: column;
    gap: 6px;
    padding: 14px 20px 22px;
    background: var(--cream);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
  }
  .mobile-menu a {
    font-family: var(--body);
    font-weight: 600;
    font-size: 17px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid transparent;
    text-decoration: none;
    color: var(--ink);
  }
  .mobile-menu a:hover,
  .mobile-menu a:focus { background: var(--peach); border-color: var(--ink); }
  .mobile-menu .pill { margin-top: 10px; align-self: flex-start; }

  /* --- Hero --- */
  .hero { padding: 48px 0 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: clamp(54px, 11vw, 110px); }
  .hero-sub { font-size: 22px; max-width: 100%; margin: 14px 0 22px; }
  .hero-cta { gap: 12px; }
  /* Once the hero stacks, the absolute-positioned collage doesn't fit
     its smaller container cleanly — hide it. Brand identity still comes
     through via the page-wide stickers, marquees, and polaroid stack. */
  .hero-collage { display: none; }

  /* --- Sections --- */
  .services { padding: 56px 0 72px; }
  .services-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .services h2 { font-size: clamp(46px, 10vw, 92px); }

  .menu-item { grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 18px; }
  .menu-tags, .menu-arrow { display: none; }
  .menu-num { font-size: 44px; }
  .menu-title { font-size: 24px; }
  .menu-quote { font-size: 17px; }
  .menu-detail { padding: 20px 20px 22px; }
  .menu-detail .price { font-size: 20px; padding: 6px 14px; }
  .menu-detail p { font-size: 15px; }

  /* --- Pillars --- */
  .pillars { padding: 72px 0; }
  .pillars-grid { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; }
  .pillar { min-height: 0; padding: 24px 20px 26px; }
  .pillar-num { font-size: 64px; }
  .pillar h3 { font-size: 24px; }
  .pillar p { font-size: 15px; }

  /* --- Story --- */
  .story { padding: 72px 0 80px; }
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-copy h2 { font-size: clamp(44px, 9vw, 84px); }
  .story-copy p { max-width: 100%; }
  .polaroid-stack { height: 460px; max-width: 520px; margin: 0 auto; }

  /* --- Intensive --- */
  .intensive { padding: 72px 0; }
  .intensive .wrap { grid-template-columns: 1fr; gap: 40px; }
  .intensive h2 { font-size: clamp(46px, 9vw, 88px); }
  .deliverables { padding: 24px 22px 26px; }
  .deliverables h3 { font-size: 26px; }

  /* --- Voice --- */
  .voice { padding: 64px 0 72px; }
  .voice h2 { font-size: clamp(42px, 9vw, 84px); }
  .voice-grid { grid-template-columns: 1fr; gap: 28px; }
  .voice-sub { margin-bottom: 28px; font-size: 19px; }
  .voice-col h3 { font-size: 30px; }
  .voice-quote { font-size: 19px; padding: 16px 18px; }

  /* --- Testimonials --- */
  .testimonials { padding: 72px 0 80px; }
  .testimonials h2 { font-size: clamp(44px, 9vw, 88px); }
  .testi-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .testi:nth-child(7) { grid-column: auto; }
  .testi-quote { font-size: 14px; }

  /* --- CTA --- */
  .cta { padding: 80px 0 90px; }
  .cta h2 { font-size: clamp(52px, 11vw, 112px); }
  .cta-sub { font-size: 22px; }

  /* --- Footer --- */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .footer-bot { flex-wrap: wrap; gap: 10px; justify-content: flex-start; }

  /* --- Contact --- */
  .contact-hero { padding: 56px 0 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row > div { margin-bottom: 22px; }
  .field-row > div:last-child { margin-bottom: 0; }
  .contact-aside { position: static; }
  .contact-form { padding: 28px 24px 26px; }
  .submit-pill { font-size: 19px; padding: 16px 26px; }

  /* --- Portfolio --- */
  .portfolio-hero { padding: 56px 0 32px; }
  .portfolio-hero h1 { font-size: clamp(50px, 12vw, 120px); }
  .portfolio-hero .sub { font-size: 22px; margin-top: 18px; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .portfolio-cta { padding: 72px 0 80px; }
  .portfolio-cta h2 { font-size: clamp(40px, 9vw, 88px); }

  /* --- Marquee --- */
  .marquee-item { font-size: 30px; gap: 24px; }
  .marquee-track { gap: 24px; }
}

/* =========================================================== */
/* ----------  ≤ 720px — small tablet / large phone  --------- */
/* =========================================================== */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }

  /* nav */
  .nav-inner { padding: 10px 20px; }
  .nav-logo { font-size: 22px; }

  /* hero */
  .hero { padding: 36px 0 16px; }
  .hero h1 { font-size: clamp(46px, 13vw, 84px); }
  .hero-sub { font-size: 20px; }
  .hero-collage { height: 360px; }

  /* hero CTAs fluid */
  .hero-cta { gap: 10px; }
  .hero-cta .pill.lg,
  .cta .pill.lg {
    padding: 16px 22px;
    font-size: 17px;
  }

  /* Big section headings — pull down a touch */
  .pillars h2,
  .story-copy h2,
  .intensive h2,
  .voice h2,
  .testimonials h2,
  .cta h2 { font-size: clamp(40px, 11vw, 80px); }

  /* Pillars 1 col */
  .pillars-grid { grid-template-columns: 1fr; gap: 18px; }
  .pillar { transform: none !important; }   /* keep the energy but stop side-tilt overflow */
  .pillar:nth-child(odd) { transform: rotate(-0.6deg) !important; }
  .pillar:nth-child(even) { transform: rotate(0.6deg) !important; }

  /* Services menu — tighter */
  .menu-item { grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 16px; border-radius: 22px; }
  .menu-num { font-size: 36px; }
  .menu-title { font-size: 21px; }
  .menu-quote { font-size: 16px; }
  .menu-detail .price { display: block; width: max-content; max-width: 100%; }

  /* Polaroid stack — convert from absolute collage to natural stack */
  .polaroid-stack {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    padding: 16px 0 32px;
    place-items: center;
  }
  .polaroid {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: 100% !important;
    max-width: 240px;
    height: auto !important;
  }
  .polaroid.p1 { aspect-ratio: 5/6; transform: rotate(-4deg) !important; }
  .polaroid.p2 { aspect-ratio: 5/6; transform: rotate(4deg) !important; }
  .polaroid.p3 {
    aspect-ratio: 4/5;
    transform: rotate(-2deg) !important;
    grid-column: 1 / -1;
    max-width: 280px;
  }
  .polaroid img { aspect-ratio: 1/1; }
  .polaroid .ph { height: 100%; }

  /* Steps */
  .step { padding: 14px 16px; grid-template-columns: 48px 1fr; gap: 14px; }
  .step-num { width: 42px; height: 42px; font-size: 20px; }
  .step strong { font-size: 19px; }

  /* Voice */
  .voice-col h3 { font-size: 26px; padding: 6px 14px; }
  .voice-quote { font-size: 17px; }

  /* Testimonials — single col */
  .testi-grid { grid-template-columns: 1fr; gap: 22px; }
  .testi { padding: 20px; }
  .testi-avatar { width: 56px; height: 56px; font-size: 22px; }
  .testi-name { font-size: 18px; }
  .testi-quote { font-size: 15px; }
  /* keep gentle tilts, drop the heavy ones */
  .testi:nth-child(odd) { transform: rotate(-0.8deg); }
  .testi:nth-child(even) { transform: rotate(0.8deg); }

  /* CTA */
  .cta { padding: 64px 0 72px; }
  .cta-sub { font-size: 19px; margin-bottom: 28px; }
  .cta-input { padding: 5px 5px 5px 18px; }
  .cta-input input { font-size: 15px; padding: 10px 6px; }
  .cta-input button { font-size: 15px; padding: 10px 16px; }

  /* Footer */
  .footer { padding: 36px 0 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; padding-bottom: 28px; }
  .footer-logo { font-size: 30px; }
  .footer-bot { font-size: 11px; }

  /* Contact form */
  .contact-hero h1 { font-size: clamp(44px, 13vw, 88px); }
  .contact-hero .lead { font-size: 16px; }
  .contact-form { padding: 24px 18px 22px; border-radius: 22px; }
  .field-label { font-size: 17px; }
  .field-help { font-size: 14px; }
  .input, .textarea { font-size: 15px; padding: 12px 14px; }
  .phone-row { grid-template-columns: 96px 1fr; gap: 8px; }
  .chip { font-size: 13px; padding: 10px 14px; }
  .submit-row { gap: 14px; }
  .submit-pill { width: 100%; font-size: 18px; }
  .submit-aside { font-size: 16px; }
  .aside-card { padding: 22px 22px; }
  .aside-card h3 { font-size: 22px; }

  /* Portfolio */
  .portfolio-hero h1 { font-size: clamp(44px, 14vw, 96px); }
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .portfolio-filters { gap: 8px; }
  .portfolio-filters button { font-size: 13px; padding: 9px 16px; }
  .proj-card { padding: 14px; }
  .proj-name { font-size: 12px; }
  .proj-pill { font-size: 12px; padding: 12px 14px; }

  /* Marquee */
  .marquee-item { font-size: 24px; gap: 18px; }
  .marquee-track { gap: 18px; padding: 12px 0; }
  .marquee-dot { width: 12px; height: 12px; }

  /* Tame oversized decorative stickers so they don't overflow */
  section .sticker { transform: scale(0.72) rotate(var(--rot, 0deg)); transform-origin: top left; }
  /* (keep nav/logo dots, tape, stamp inline elements intact) */

  /* Hero collage uses hardcoded absolute positions tuned for 560px;
     at phone width the children pile up. Hide it cleanly — the hero
     text + CTAs + page-wide stickers carry the visual identity. */
  .hero-collage { display: none; }
}

/* =========================================================== */
/* ----------  ≤ 520px — phones  ----------------------------- */
/* =========================================================== */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }

  /* nav */
  .nav-inner { padding: 10px 16px; }
  .nav-logo { font-size: 20px; }
  .nav-logo .dot { width: 16px; height: 16px; }

  /* hero */
  .hero { padding: 28px 0 8px; }
  .hero h1 { font-size: clamp(42px, 14vw, 64px); line-height: 0.86; }
  .hero-sub { font-size: 18px; margin: 12px 0 18px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .pill { justify-content: center; width: 100%; }
  .hero-collage { height: 300px; }

  /* Buttons full-width helpers in stacked CTA areas */
  .cta .pill.lg,
  .portfolio-cta .pill.lg { width: 100%; justify-content: center; }
  .cta > .wrap > div[style] { flex-direction: column !important; align-items: stretch !important; }
  .portfolio-cta > .wrap > div[style] { flex-direction: column !important; align-items: stretch !important; }

  /* hero collage stickers may overflow — clamp wrap */
  .hero { overflow: hidden; }
  .hero-collage { overflow: visible; }

  /* tag pill default */
  .tag { font-size: 16px; padding: 5px 12px; }

  /* sections — softer padding */
  .services { padding: 48px 0 56px; }
  .pillars { padding: 56px 0; }
  .story { padding: 56px 0 64px; }
  .intensive { padding: 56px 0; }
  .voice { padding: 48px 0 56px; }
  .testimonials { padding: 56px 0 64px; }
  .cta { padding: 56px 0 64px; }
  .portfolio-section { padding: 28px 0 64px; }
  .portfolio-cta { padding: 56px 0 64px; }
  .contact-section { padding: 40px 0 64px; }

  /* Big display headings — readable on small screens */
  .hero h1,
  .services h2,
  .pillars h2,
  .story-copy h2,
  .intensive h2,
  .voice h2,
  .testimonials h2,
  .cta h2,
  .portfolio-hero h1,
  .portfolio-cta h2,
  .contact-hero h1 {
    -webkit-text-stroke-width: 2px;
    letter-spacing: 0;
  }
  .hero h1 .l3,
  .voice h2 .stroke,
  .cta h2 .stroke,
  .intensive h2 .stroke,
  .story-copy h2 .stroke,
  .testimonials h2 .stroke,
  .portfolio-cta h2 .stroke,
  .portfolio-hero h1 .stroke,
  .contact-hero h1 .stroke,
  .services h2 .stroke { -webkit-text-stroke-width: 2px; }

  /* Services */
  .services h2 { font-size: clamp(40px, 12vw, 64px); }
  .menu-num { font-size: 32px; }
  .menu-title { font-size: 19px; }
  .menu-quote { font-size: 14px; }
  .menu-item { padding: 14px 14px; grid-template-columns: 40px 1fr; gap: 10px; }
  .menu-detail { padding: 18px 16px; border-radius: 18px; }
  .menu-detail p { font-size: 14px; line-height: 1.55; }
  .menu-detail .addon { font-size: 15px; }
  .menu-detail .price { font-size: 18px; padding: 6px 12px; }

  /* Pillars */
  .pillars-grid { gap: 16px; }
  .pillar-num { font-size: 56px; }
  .pillar h3 { font-size: 22px; }

  /* Story */
  .story-copy h2 { font-size: clamp(38px, 12vw, 64px); }
  .story-copy .pull { font-size: 19px; padding: 4px 0 4px 14px; }
  .polaroid-stack { padding: 8px 0 24px; gap: 12px; }
  .polaroid { max-width: 200px; padding: 10px 10px 44px; }
  .polaroid .cap { font-size: 15px; bottom: 10px; left: 10px; right: 10px; }
  .polaroid.p3 { max-width: 240px; }

  /* Intensive */
  .intensive h2 { font-size: clamp(38px, 12vw, 64px); }
  .step { padding: 12px 14px; grid-template-columns: 40px 1fr; gap: 12px; }
  .step-num { width: 38px; height: 38px; font-size: 18px; }
  .step strong { font-size: 17px; }
  .step span { font-size: 13px !important; }
  .deliverables { padding: 20px 18px 22px; border-radius: 20px; }
  .deliverables h3 { font-size: 22px; }
  .deliverables li { font-size: 14px; }

  /* Voice */
  .voice h2 { font-size: clamp(36px, 12vw, 56px); }
  .voice-col h3 { font-size: 22px; padding: 5px 12px; }
  .voice-quote { font-size: 16px; padding: 14px 16px; border-radius: 14px; }
  .voice-quote:nth-child(odd),
  .voice-quote:nth-child(even) { transform: rotate(-0.4deg); }

  /* Testimonials */
  .testimonials h2 { font-size: clamp(38px, 12vw, 64px); }
  .testimonials .sub { font-size: 18px; margin-bottom: 32px; }
  .testi { padding: 18px; border-radius: 18px; }
  .testi-quote { font-size: 14.5px; line-height: 1.5; }
  .testi-head { gap: 12px; }
  .testi-avatar { width: 48px; height: 48px; font-size: 18px; }
  .testi-name { font-size: 16px; }
  .testi-role { font-size: 14px; }

  /* CTA */
  .cta h2 { font-size: clamp(44px, 14vw, 76px); }
  .cta-sub { font-size: 17px; }
  .cta-input { flex-direction: column; border-radius: 22px; padding: 14px; gap: 10px; max-width: 100%; }
  .cta-input input { width: 100%; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
  .cta-input button { width: 100%; padding: 12px 18px; }

  /* Footer */
  .footer h4 { font-size: 18px; }
  .footer ul a { font-size: 14px; }
  .footer-blurb { font-size: 16px; }
  .footer-bot { padding-top: 16px; }
  .footer-bot span { display: block; width: 100%; }

  /* Contact */
  .contact-hero h1 { font-size: clamp(40px, 13vw, 72px); }
  .contact-hero .lead { font-size: 15px; max-width: 100%; }
  .contact-form { padding: 20px 16px 20px; border-radius: 20px; }
  .field { margin-bottom: 18px; }
  .field-row { margin-bottom: 0; }
  .field-row > div { margin-bottom: 18px; }
  .field-label { font-size: 16px; }
  .input, .textarea { padding: 11px 14px; box-shadow: 3px 3px 0 var(--ink); }
  .chip { font-size: 12.5px; padding: 9px 12px; gap: 8px; }
  .chip .box { width: 16px; height: 16px; }
  .chip-row { gap: 8px; }
  .submit-pill { font-size: 16px; padding: 14px 22px; }
  .submit-aside { font-size: 15px; }
  .contact-thanks { padding: 36px 22px; }
  .contact-thanks h2 { font-size: 38px; }

  /* Portfolio */
  .portfolio-hero h1 { font-size: clamp(40px, 14vw, 72px); }
  .portfolio-hero .sub { font-size: 19px; }
  .portfolio-hero .lead { font-size: 15px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 26px; }
  .portfolio-filters { margin-top: 24px; }
  .portfolio-filters button { font-size: 13px; padding: 8px 14px; }
  .proj { max-width: 360px; margin: 0 auto; width: 100%; }
  .portfolio-back { font-size: 13px; padding: 7px 14px; }
  .portfolio-cta h2 { font-size: clamp(36px, 12vw, 60px); }
  .portfolio-cta p { font-size: 19px; }

  /* Marquee — smallest screens */
  .marquee-item { font-size: 20px; gap: 14px; }
  .marquee-track { gap: 14px; padding: 10px 0; }
  .marquee-dot { width: 10px; height: 10px; }

  /* Stickers — further shrink, and hide a few decorative ones to stop the look from feeling crowded */
  section .sticker { transform: scale(0.55) rotate(var(--rot, 0deg)); }

  /* Hero collage: shrink further and let it sit nicely below the heading */
  .hero-collage {
    height: 240px;
    transform: scale(0.62);
    transform-origin: top center;
    margin-bottom: -110px;
  }

  /* Decorative section stickers — hide the largest ones at phone size
     so they don't overlap into headings or copy. The brand identity
     already comes through via the marquees, polaroids, and pillars. */
  /* Match both .sticker-classed and inline-positioned SVG decorations
     that live as direct children of section roots. */
  .services > .sticker, .services > svg,
  .pillars > .sticker, .pillars > svg,
  .story > .sticker, .story > svg,
  .intensive > .sticker, .intensive > svg,
  .voice > .sticker, .voice > svg,
  .testimonials > .sticker, .testimonials > svg,
  .cta > .sticker, .cta > svg,
  .contact-hero > .sticker, .contact-hero > svg,
  .contact-section > .sticker, .contact-section > svg,
  .portfolio-hero > .sticker, .portfolio-hero > svg,
  .portfolio-section > .sticker, .portfolio-section > svg,
  .portfolio-cta > .sticker, .portfolio-cta > svg { display: none; }

  /* Stickers nested inside .wrap or other containers but absolutely
     positioned (e.g. the StickerStamp inside the deliverables column,
     or VintageHand/VintageWhisk) — hide those too. */
  .pillars .sticker, .pillars .wrap > div > svg,
  .services .sticker,
  .story .sticker,
  .intensive .sticker, .intensive .wrap svg[style*="absolute"],
  .voice .sticker,
  .testimonials .sticker,
  .contact-hero .sticker,
  .contact-section .sticker,
  .portfolio-hero .sticker,
  .portfolio-section .sticker,
  .portfolio-cta .sticker { display: none; }

  /* Big section tilts can push tilted cards off-edge — neutralize.
     Keep the tiny intentional rotations from earlier media queries. */
  .menu-item { transform: none !important; }
  .menu-item:nth-child(2n) { transform: rotate(0.4deg) !important; }
  .menu-item.special { transform: rotate(-0.6deg) !important; }

  .testi:nth-child(odd) { transform: rotate(-0.5deg); }
  .testi:nth-child(even) { transform: rotate(0.5deg); }

  /* Small accent stickers tucked into pillar/testi corners — hide so
     they don't peek into neighboring cards in single-column layout. */
  .pillar > svg { display: none; }
  .testi > svg { display: none; }
  .deliverables > svg,
  .deliverables ~ svg { display: none; }
}

/* =========================================================== */
/* ----------  ≤ 380px — very small phones  ------------------ */
/* =========================================================== */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .nav-logo span:last-child { display: inline; }   /* keep brand */
  .hero h1 { font-size: clamp(38px, 14vw, 56px); }
  .menu-item { grid-template-columns: 36px 1fr; }
  .menu-num { font-size: 28px; }
  .menu-title { font-size: 17px; }
  .menu-quote { font-size: 13px; }
  .marquee-item { font-size: 18px; }
}

/* =========================================================== */
/* ----------  Hamburger desktop hide-guard  ----------------- */
/* =========================================================== */
@media (min-width: 981px) {
  .nav-toggle { display: none !important; }
  .mobile-menu { display: none !important; }
}

/* =========================================================== */
/* ----------  Touch device polish  -------------------------- */
/* =========================================================== */
@media (hover: none) {
  /* On touch screens, hover transforms can stick. Remove the lift. */
  .pill:hover,
  .menu-item:hover,
  .proj-card:hover,
  .chip:hover,
  .input:focus,
  .textarea:focus,
  .submit-pill:hover {
    transform: none;
  }
}

/* =========================================================== */
/* ----------  Reduced motion users  ------------------------- */
/* =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .float-a, .float-b, .spin { animation: none !important; }
}