/* ===================================================================
   Responsive layer for Concept-2-combined (brown frame)
   Loaded LAST so it wins over the !important rules in theme-brown.css
   (equal specificity + later source order, or !important where the
   theme also used it). Breakpoints: 1080 / 768 / 480.
   =================================================================== */

/* ---------- shared: let images/svg never overflow ---------- */
.hf img, .hf svg { max-width: 100%; }

/* ===================================================================
   TABLET  (≤ 1080px)
   =================================================================== */
@media (max-width: 1080px) {
  .c2 .hf-section { padding: 72px 40px; }

  /* Hero */
  .hf-a-hero { padding: 64px 40px 0; }
  .hf-a-hero-photo { margin: 0 -40px; }
  .hf-a-h1 { font-size: 40px !important; }
  .hf-a-h1 .hf-gold { font-size: 24px !important; }

  /* Headings */
  .hf .c2a-about-quote { font-size: 40px !important; }
  .hf-h2 { font-size: 40px; }
  /* allow the services headline to wrap once it no longer fits */
  .hf #services .hf-h2 { white-space: normal !important; }

  /* Services: 5 → 3 across (4th/5th wrap to a second row) */
  .hf .c2c-svc--row5 { grid-template-columns: repeat(3, 1fr) !important; }

  /* Footer: logo over a 3-col link block, meta drops below */
  .hf-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .hf-footer-top > div:last-child { text-align: left !important; }
}

/* ===================================================================
   MOBILE  (≤ 768px)
   =================================================================== */
@media (max-width: 768px) {
  .c2 .hf-section { padding: 56px 24px; }

  /* Util bar → stacked + centered */
  .hf-util {
    flex-direction: column; gap: 6px; text-align: center;
    padding: 12px 24px; font-size: 10px; letter-spacing: .12em;
  }

  /* Nav → logo + CTA on row 1, hamburger reveals the links as a stacked
     full-width panel on row 2. (Menu shown without JS via the <noscript>
     block in index.html.) */
  .hf-nav { flex-wrap: wrap; gap: 12px; padding: 12px 24px; }
  .hf-nav img { height: 60px !important; }
  .hf-nav-toggle { display: block; order: 3; }
  .hf-cta { order: 2; margin-left: auto; }
  .hf-nav ul {
    order: 4; flex-basis: 100%; width: 100%;
    flex-direction: column; gap: 0; display: none;
    margin: 4px 0 0; border-top: 1px solid var(--hf-rule);
  }
  .hf-nav.is-open ul { display: flex; }
  .hf-nav ul li { width: 100%; }
  .hf-nav ul li a {
    display: block; width: 100%; padding: 14px 2px;
    border-bottom: 1px solid var(--hf-rule);
  }
  .hf-nav ul li a:hover { border-color: var(--hf-gold); }

  /* Hero */
  .hf-a-hero { padding: 44px 24px 0; }
  .hf-a-hero-photo { margin: 0 -24px; height: 260px; }
  .hf-photo-overlay { left: 16px; bottom: 16px; }
  .hf-a-h1 { font-size: 32px !important; }
  .hf-a-h1 .hf-gold { font-size: 21px !important; }
  .hf-a-lede { font-size: 16px; }
  .hf-a-cta-row { margin-bottom: 40px; }

  /* Section headings */
  .hf .c2a-about-quote { font-size: 30px !important; }
  .hf-h2 { font-size: 30px; }
  .hf-lede, .c2a-about-lede { font-size: 16px; }

  /* About pillars: 3-col → stacked, gold rule on each */
  .c2a-pillars { grid-template-columns: 1fr; border-top: 0; }
  .c2a-pillar {
    border-right: 0; border-top: 2px solid var(--hf-gold);
    padding: 24px 0 8px;
  }

  /* Services: 3 → 2 across */
  .hf .c2c-svc--row5 { grid-template-columns: repeat(2, 1fr) !important; }

  /* What we handle: turn the spec table into stacked cards */
  .c2b-stream-head { display: none; }
  .c2b-stream-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "class   handled"
      "name    handled"
      "ex      ex";
    gap: 4px 16px; padding: 18px 20px;
  }
  .c2b-stream-class   { grid-area: class; }
  .c2b-stream-name    { grid-area: name; }
  .c2b-stream-ex      { grid-area: ex; margin-top: 6px; }
  .c2b-stream-handled { grid-area: handled; align-self: center; }
  .c2b-stream-foot {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label arrow"
      "body  body";
    gap: 6px 16px; padding: 20px;
  }
  .c2b-stream-foot-label { grid-area: label; }
  .c2b-stream-foot-body  { grid-area: body; }
  .c2b-stream-foot-arrow { grid-area: arrow; }

  /* Service area: bento → single column, map first */
  .c2c-area { grid-template-columns: 1fr; }
  .c2c-area > .c2c-area-map-tile { grid-column: auto; grid-row: auto; }
  .c2c-area-map-wrap { min-height: 300px; }

  /* Licenses: 3-col → single column */
  .c2c-lic-groups { grid-template-columns: 1fr; }

  /* Contact: side-by-side → stacked, form fields single column */
  .hf-contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .hf-form-row { grid-template-columns: 1fr; }
  .hf-form { padding: 24px; }
  .hf-form-submit { flex-direction: column; align-items: stretch; gap: 14px; }
  .hf-form-submit .hf-btn { justify-content: center; }

  /* Footer */
  .hf-footer { padding: 44px 24px 24px; }
  .hf-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hf-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ===================================================================
   SMALL PHONE  (≤ 480px)
   =================================================================== */
@media (max-width: 480px) {
  .c2 .hf-section { padding: 44px 16px; }

  .hf-a-hero { padding: 36px 16px 0; }
  .hf-a-hero-photo { margin: 0 -16px; height: 220px; }
  .hf-a-h1 { font-size: 27px !important; }

  .hf .c2a-about-quote { font-size: 26px !important; }
  .hf-h2 { font-size: 26px; }

  /* Services + footer collapse to one column */
  .hf .c2c-svc--row5 { grid-template-columns: 1fr !important; }
  .hf-footer-cols { grid-template-columns: 1fr; }

  /* Contact key/value rows: stack the label above the value */
  .hf-contact-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}