/* HumphriesTrio — mobile & tablet optimisation layer.
   Overrides the fixed 1440px desktop inline styles via attribute selectors.
   Desktop (>=1100px) is completely unaffected. */

/* hamburger — hidden except on phones */
#ht-burger { display: none; background: none; border: 1px solid #15602B; padding: 8px 10px; cursor: pointer; }
#ht-mnav { display: none; }

@media (max-width: 1099px) {
  #ht-burger { display: inline-flex; align-items: center; justify-content: center; }
  #ht-mnav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border-bottom: 2px solid #5FBF3F; box-shadow: 0 16px 32px rgba(15,61,28,0.18); z-index: 70; }
  #ht-mnav a { padding: 14px 24px; font: 700 15px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #171A21; text-decoration: none; border-top: 1px solid #E0E0E0; }
  #ht-mnav a.ht-mnav-cta { background: #15602B; color: #FFFFFF; }
  header { position: sticky; }
  /* burger replaces the full nav on phones AND tablets */
  header nav { display: none !important; }
}

@media (max-width: 1439px) {
  /* unlock the fixed-width page at any sub-desktop width */
  [style*="min-width: 1440px"] { min-width: 0 !important; overflow-x: clip !important; }
  /* intrinsic-width images never force layout wider than their column */
  img { max-width: 100%; height: auto; }
  /* grid items default to min-width:auto — intrinsic content (e.g. image-slot) must not blow out 1fr tracks */
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
  image-slot { width: 100% !important; max-width: 100% !important; display: block !important; }
  /* content containers: soften gutters */
  [style*="max-width: 1320px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* header: allow wrapping when tight */
  header > div { height: auto !important; flex-wrap: wrap !important; justify-content: center !important; padding-top: 12px !important; padding-bottom: 12px !important; row-gap: 8px !important; }
  header nav { flex-wrap: wrap !important; justify-content: center !important; row-gap: 2px !important; }
}

@media (max-width: 1099px) {
  header img { height: 56px !important; width: auto !important; max-width: none !important; margin: 0 !important; }
  header a:first-child { flex: none !important; }
  header > div { flex-wrap: nowrap !important; justify-content: space-between !important; }

  /* tablet heading scale */
  h1 { font-size: 36px !important; line-height: 1.12 !important; }
  h2 { font-size: 32px !important; line-height: 1.15 !important; }

  /* tall media blocks */
  [style*="height: 520px"] { height: 400px !important; }
  video { height: 420px !important; }

  /* hero-style flex rows: fixed-width columns go full width so they stack */
  [style*="width: 460px"], [style*="width: 480px"], [style*="width: 420px"] { width: 100% !important; }
  /* flex-basis-0 text columns take the full line when wrapping */
  section [style*="flex: 1 1 0"], section [style*="flex:1"] { flex-basis: 100% !important; min-width: 0 !important; }

  /* hero: stack text → Scott → form in one column; Scott sits on the form */
  [data-screen-label="Hero"] [style*="max-width: 1320px"] { flex-direction: column !important; padding-bottom: 0 !important; gap: 0 !important; }
  [data-screen-label="Hero"] [style*="flex: 1"] { padding-bottom: 0 !important; }
  [data-screen-label="Hero"] [style*="width: 330px"] { width: 100% !important; justify-content: center !important; margin-top: 24px !important; }
  [data-screen-label="Hero"] [style*="width: 330px"] img { width: 260px !important; max-width: 65% !important; margin-left: 0 !important; }
  [data-screen-label="Hero"] [style*="width: 380px"] { width: 100% !important; max-width: 440px !important; margin: 0 auto 48px !important; align-self: center !important; }

  /* credibility strip wraps below desktop */
  [data-screen-label="Credibility strip"] > div { flex-wrap: wrap !important; row-gap: 8px !important; justify-content: center !important; }
  [data-screen-label="Credibility strip"] span[style*="width: 1px"] { display: none !important; }
  [data-screen-label="Credibility strip"] [style*="font-size: 15px"] { margin: 0 10px !important; }

  /* stats card (homepage About + About Us page): stacks; dividers become horizontal rules */
  [style*="margin: -36px"] { flex-direction: column !important; gap: 16px !important; }
  [style*="margin: -36px"] > div[style*="width: 1px"] { width: 100% !important; height: 1px !important; }

  /* CTA pair stacks full-width, no mid-label wrap */
  section [style*="gap: 16px"][style*="margin-top: 28px"] { flex-direction: column !important; }
  section [style*="gap: 16px"][style*="margin-top: 28px"] a { width: 100% !important; justify-content: center !important; height: auto !important; min-height: 48px !important; text-align: center !important; }

  /* two-column layouts collapse to one */
  [style*="grid-template-columns: 1fr 480px"],
  [style*="grid-template-columns: 480px 1fr"],
  [style*="grid-template-columns: 1fr 460px"],
  [style*="grid-template-columns: 1fr 420px"],
  [style*="grid-template-columns: 420px 1fr"],
  [style*="grid-template-columns: 400px 1fr"],
  [style*="grid-template-columns: 520px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  /* footer 4-col -> 2-col */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1.2fr"] { grid-template-columns: 1fr 1fr !important; }

  /* generic flex rows inside sections may wrap */
  section > div, footer > div { flex-wrap: wrap !important; }

  /* section padding rhythm */
  [style*="padding: 96px 60px"] { padding: 56px 24px !important; }
  [style*="padding: 80px 60px"] { padding: 48px 24px !important; }
  [style*="padding: 72px 60px"] { padding: 44px 24px !important; }
  [style*="padding: 56px 60px"] { padding: 40px 24px !important; }
  [style*="padding: 40px 60px"] { padding: 32px 24px !important; }
  [style*="padding: 24px 60px"] { padding: 20px 24px !important; }
}

@media (max-width: 700px) {
  [data-screen-label="Hero"] [style*="width: 330px"] img { width: 200px !important; }

  /* trust badges: 2-up centered grid on phones */
  [data-screen-label="Trust badges"] > div { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 12px !important; justify-items: center !important; }
  [data-screen-label="Trust badges"] > div > div { width: 100% !important; max-width: 165px !important; }

  /* single column everywhere */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1.2fr"] { grid-template-columns: 1fr !important; }

  /* typography scale-down */
  h1 { font-size: 30px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; line-height: 1.18 !important; }
  h3 { font-size: 20px !important; }
  [style*="font-size: 44px"] { font-size: 30px !important; line-height: 1.15 !important; }
  [style*="font-size: 52px"] { font-size: 32px !important; line-height: 1.12 !important; }
  [style*="font-size: 36px"] { font-size: 25px !important; }
  [style*="font-size: 34px"] { font-size: 24px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }

  /* header: logo + compact CTA + burger */
  header a[href^="tel:"] { display: none !important; }
  header img { height: 44px !important; }
  header > div { padding-left: 12px !important; padding-right: 12px !important; }
  header nav ~ div { gap: 6px !important; }
  header nav ~ div a { height: 38px !important; padding: 6px 10px !important; font-size: 0 !important; white-space: nowrap; }
  header nav ~ div a::after { content: "REQUEST A PROPOSAL"; font: 700 11px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.02em; }
  header nav ~ div a svg { display: none !important; }
  header > div { justify-content: space-between !important; }

  /* phone heading scale */
  h1 { font-size: 30px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; line-height: 1.18 !important; }
  [style*="height: 520px"] { height: 300px !important; }
  video { height: 360px !important; }

  /* hero: form card padding + full-width inputs */
  [data-screen-label="Hero"] [style*="padding: 28px"] { padding: 20px 16px !important; }
  [data-screen-label="Hero"] input, [data-screen-label="Hero"] textarea { width: 100% !important; box-sizing: border-box !important; }

  /* tall project images shrink naturally */
  [style*="height: 560px"] { height: auto !important; }
  [style*="height: 460px"] { height: 380px !important; }
  [style*="height: 420px"] { height: 340px !important; }

  /* credibility strip: smaller text on phones */
  [data-screen-label="Credibility strip"] [style*="font-size: 15px"] { font-size: 12px !important; margin: 0 8px !important; }

  /* ticker text a touch smaller */
  [data-screen-label="Ticker"] [style*="font-size: 22px"] { font-size: 16px !important; }
  [data-screen-label="Ticker"] img { height: 26px !important; }

  /* stat bars / chip rows tighten */
  [style*="padding: 18px 24px"] { padding: 14px 16px !important; }

  /* reviews slider: cards match the phone viewport (step size mirrored in page JS) */
  [data-screen-label="Reviews"] article { width: calc(100vw - 48px) !important; }

  /* footer: centre everything on phones */
  footer, footer * { text-align: center !important; }
  footer div, footer a { justify-content: center !important; }
  footer img, footer svg { margin-left: auto !important; margin-right: auto !important; }
  footer [style*="display: flex"] { justify-content: center !important; }
  /* icon+label rows (phone, facebook): shrink-wrap so icon hugs the text */
  footer a[style*="gap: 10px"] { display: inline-flex !important; width: auto !important; }
  footer a[style*="gap: 10px"] svg { margin: 0 !important; }

  /* qualifications badges: 2-up grid like the homepage trust badges */
  [data-screen-label="Qualifications"] [style*="justify-content: space-between"][style*="flex-wrap: wrap"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 12px !important; justify-items: center !important; }
  [data-screen-label="Qualifications"] [style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div { width: 100% !important; max-width: 165px !important; }
  /* circles stay at 104px (text is sized for that) — scale inner text to fit */
  [data-screen-label="Qualifications"] [style*="width: 104px"] [style*="font-size: 30px"],
  [data-screen-label="Qualifications"] [style*="width: 104px"] [style*="font-size: 28px"] { font-size: 24px !important; }
  [data-screen-label="Qualifications"] [style*="width: 104px"] [style*="font-size: 12px"] { font-size: 9px !important; letter-spacing: 0.04em !important; }
  [data-screen-label="Qualifications"] [style*="width: 104px"] [style*="font-size: 11px"] { font-size: 9px !important; letter-spacing: 0.04em !important; }

  /* buttons remain tappable (border-box so padding doesn't stack on top) */
  a[href], button { min-height: 44px; box-sizing: border-box; }
}