/* =========================================================
   responsive.css — breakpoints and reduced-motion.
   Loaded last so its overrides win. Ordered large → small
   so narrower screens override wider ones.
   ========================================================= */

/* ---------- Two header CTAs + the full nav need room: compact both pills
   on mid-width screens so they never overflow the header bar. ---------- */
@media (max-width: 1360px) {
  .btn-hiring { padding: 14px 26px; font-size: 1.05rem; gap: 9px; }
  .btn-hire { padding: 7px 24px 7px 7px; font-size: 1.05rem; }
  .btn-hire .hire-ic { width: 36px; height: 36px; }
  .btn-hire .hire-ic svg { width: 19px; height: 19px; }
}

/* ---------- Tablet & below: hamburger menu, and a BIGGER brand.
   The theme toggle moves into the menu, freeing the header so the
   logo + company name can be large and prominent. ---------- */
@media (max-width: 1080px) {
  .nav-links,
  .nav-actions .theme-toggle,
  .nav-actions .btn-header-text { display: none; }
  .menu-btn { display: block; flex: none; }
  .menu-only { display: block; }

  /* collapse the Contact CTA to a compact icon button (just the green envelope
     circle) so it never crowds the menu toggle off the right edge */
  .btn-hire { padding: 0; gap: 0; border-radius: 50%; background: none; box-shadow: none; }
  .btn-hire::after { display: none; }
  .btn-hire .hire-label, .btn-hire .hire-arrow { display: none; }
  .btn-hire .hire-ic { width: 46px; height: 46px; }

  /* "We're Hiring" pill (blog/404) → compact green circle so it doesn't push
     the menu toggle off the right edge. font-size:0 drops the text; the
     animated equalizer bars stay as the icon. */
  .btn-hiring {
    width: 48px; height: 48px; padding: 0; gap: 0; font-size: 0;
    border-radius: 50%; justify-content: center;
  }
  .btn-hiring .hiring-eq { height: 16px; }

  header { padding: 16px 0; }
  .brand-logo { height: 112px; }
  header.scrolled .brand-logo { height: 54px; }
  .brand-text .b1, .brand-text .b2 { font-size: 2.05rem; }
  .brand-short { font-size: 2rem; }

  /* dropdown sits just below the header at whatever height it is */
  .nav-links.open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: calc(100% + 6px); left: 16px; right: 16px;
    background: var(--menu-bg); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 16px; padding: 14px;
    box-shadow: var(--shadow-lift);
  }
  .nav-links.open a { color: var(--ink); padding: 12px 10px; border-radius: 10px; }
  .nav-links.open a:hover { background: rgba(124, 179, 66, 0.1); }
  /* at the top of the page the header paints nav links white; inside the light
     dropdown that makes them blend into the background — force dark text for
     the open menu (but not the green Jobs pill, which keeps its white text). */
  header:not(.scrolled) .nav-links.open a:not(.nav-jobs) { color: var(--ink); }
}

/* ---------- Two-column card grids ---------- */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .why-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Phones: keep the brand prominent, shrink the other text ---------- */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
  .why-stats { gap: 20px; }

  header { padding: 14px 0; }
  /* keep the header CTAs visible on phones as compact icon circles */
  .btn-hiring { width: 44px; height: 44px; }
  .btn-hire .hire-ic { width: 42px; height: 42px; }
  .hiring-eq { height: 12px; }
  /* fluid: as large as the screen allows, capped — never overflows */
  .brand-logo { height: clamp(74px, 23vw, 100px); }
  header.scrolled .brand-logo { height: 48px; }
  .brand-text .b1, .brand-text .b2 { font-size: clamp(1.05rem, 4.4vw, 1.4rem); }
  .brand-short { font-size: 1.75rem; }
  header:not(.scrolled) .brand-logo { animation: none; } /* skip float on phones */

  /* other words a bit smaller so the brand stands out */
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.3rem); }
  .hero .tagline { font-size: 1.02rem; }
  .hero .sub { font-size: 0.96rem; }
  h2 { font-size: clamp(1.55rem, 6vw, 2rem); }
  .section-head p { font-size: 1rem; }

  /* the 21:9 About band is too thin on phones — give it more height */
  .about-media { margin-bottom: 30px; }
  .about-media img { aspect-ratio: 16 / 9; }
}

/* ---------- Smaller phones: a touch more edge room ---------- */
@media (max-width: 380px) {
  .wrap { padding: 0 18px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}