/* ==================================================================
   Responsive overrides — loaded last.
   Desktop design width is 1440px; these rules make the column fluid
   and restack sections at tablet (≤1080px) and mobile (≤760px).
   ================================================================== */

/* ---- Fluid shell at any width ------------------------------------ */
.hh-hero { width: 100%; }
.hh-nav { width: 100%; max-width: none; }

/* ---- Marquee scaffolding (desktop = static, mobile = auto-scroll) --- */
.fbf-mq-track { display: flex; flex: 1; min-width: 0; }
.fbf-mq-set { display: flex; align-items: center; flex: 1; min-width: 0; }
.fbf-mq-set[aria-hidden="true"] { display: none; }
.hh-clients-logos { overflow: hidden; }
.hh-clients-logos .fbf-mq-set { justify-content: space-between; gap: clamp(14px, 2.4vw, 30px); }
/* tablet/mid widths: let the client logos shrink instead of clipping */
@media (min-width: 761px) {
  .hh-clients-logos .hh-client-logo { min-width: 0; flex: 0 1 auto; object-fit: contain; }
}
.svc-partners-row .fbf-mq-set { gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
/* desktop: never wrap the partner logos — shrink them to fit instead */
@media (min-width: 761px) {
  .svc-partners-row, .svc-partners-row .fbf-mq-set { flex-wrap: nowrap; }
  .svc-partner-img { height: clamp(22px, 2.4vw, 34px); }
}
.wb-media-logos { display: flex; }
.wb-media-logos .fbf-mq-set { justify-content: center; gap: 48px; flex-wrap: wrap; }

/* burger always visible (matches current site): borderless, short top line right-aligned */
.hh-burger {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px;
  width: 46px; height: 40px; padding: 4px 0; flex-shrink: 0;
  background: none; border: none;
  cursor: pointer;
}
.hh-burger span {
  display: block; height: 3px; width: 100%; border-radius: 0;
  background: #fff; transition: transform 200ms var(--ease-out, ease), opacity 160ms var(--ease-out, ease), width 200ms var(--ease-out, ease);
}
.hh-burger span:nth-child(1) { width: 55%; }
.hh-burger.is-open span:nth-child(1) { width: 100%; transform: translateY(10px) rotate(45deg); }
.hh-burger.is-open span:nth-child(2) { opacity: 0; }
.hh-burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Fullscreen menu overlay (matches current site) */
.hh-drawer {
  position: fixed; left: 0; right: 0; top: 0;
  height: 100vh; height: 100dvh;
  z-index: 200;
  background: rgba(13,15,15,0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.hh-drawer-links { margin: auto; }
.hh-drawer-close {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 128px; height: 60px; padding: 4px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink-900, #0d0f0f);
  border: none; border-radius: 0 0 64px 64px; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  transition: transform 160ms var(--ease-out, ease);
}
.hh-drawer-close:hover { transform: translateX(-50%) translateY(3px); }
.hh-drawer-social {
  position: absolute; top: 56px; left: max(40px, calc((100% - 1280px) / 2));
  display: flex; flex-direction: column; gap: 42px;
}
.hh-drawer-social a { color: #fff; opacity: 0.92; transition: opacity 140ms var(--ease-out, ease); }
.hh-drawer-social a:hover { opacity: 1; color: var(--fbf-green, #28dc9a); }
.hh-drawer-social svg { display: block; width: 22px; height: 22px; }
.hh-drawer-ctas {
  position: absolute; top: 24px; right: max(40px, calc((100% - 1280px) / 2));
  display: flex; gap: clamp(24px, 3.2vw, 92px);
}
.hh-drawer-links {
  list-style: none; padding: 110px 24px 60px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 26px);
  text-align: center;
}
.hh-drawer-links a {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  font-size: clamp(30px, 4.8vh, 52px); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgba(255,255,255,0.34); text-decoration: none;
  transition: color 160ms var(--ease-out, ease);
}
.hh-drawer-links a:hover, .hh-drawer-links a.is-active { color: #fff; text-decoration: none; }
.hh-drawer-links a svg {
  position: absolute; right: -0.75em; top: 55%; transform: translateY(-50%);
  width: 0.5em; height: 0.5em; opacity: 0.8;
}

/* nav items never break mid-label */
.hh-navlinks a { white-space: nowrap; }
@media (max-width: 1380px) {
  .hh-navitem-label { font-size: 16px; }
  .hh-navitem-kicker { font-size: 12px; }
}

/* ==================================================================
   Nav collapse ≤ 1180px — 8 links + CTA don't fit below this,
   so the burger + drawer take over well before mobile.
   ================================================================== */
@media (max-width: 1180px) {
  .hh-navlinks { display: none; }
  .hh-navcta { margin-left: auto; margin-right: 16px; }
  /* constant nav height so the drawer meets it exactly */
  .hh-nav.is-top { padding-top: 22px; padding-bottom: 22px; }
}

/* ==================================================================
   Testimonials headrow ≤ 1240px — sub copy is nowrap on desktop
   ================================================================== */
@media (max-width: 1240px) {
  .tmh-headrow { flex-wrap: wrap; }
  .tmh-sub { white-space: normal; max-width: 640px; }
  .ft-topline { flex-wrap: wrap; row-gap: 24px; }
  .ft-tag, .ft-tagline { white-space: normal; }
  .ft-tag br { display: none; }
  .ft-bottom { flex-wrap: wrap; row-gap: 18px; }
}

/* ==================================================================
   Tablet ≤ 1080px
   ================================================================== */
@media (max-width: 1080px) {

  /* section side padding */
  .rb-a, .rb-b, .svc-ink, .cs, .wf, .tmh, .ais, .wb, .cl, .faq, .ft { padding-left: 40px; padding-right: 40px; }
  .st { padding-left: 40px; padding-right: 40px; }
  .st-grid { gap: 48px; }

  /* nav */
  .hh-nav, .hh-nav.is-top { padding-left: 28px; padding-right: 28px; }

  /* hero */
  .hh-a-title { font-size: 52px; }
  .hh-a-body { padding: 140px 48px 150px; }

  /* grids down a step */
  .rb-a-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-row, .rb-cases { grid-template-columns: repeat(2, 1fr); }
  .wb-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-inner { grid-template-columns: 1fr; gap: 48px; }
  /* results intro + stat list stack (2-col is one word per line here) */
  .rb-b-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .rb-b-left { max-width: 640px; }
  .ais-top { grid-template-columns: 1fr; gap: 56px; }
  .ais-right { max-width: 560px; }
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .ft-cols { grid-template-columns: repeat(4, 1fr); row-gap: 40px; }
}

/* ==================================================================
   Mobile ≤ 760px
   ================================================================== */
@media (max-width: 760px) {

  /* ---- global rhythm ---- */
  .rb-a, .rb-b, .svc-ink, .cs, .tmh, .ais, .wb, .cl, .faq, .ft,
  .wf { padding: 64px 20px 68px; }
  .st { padding: 60px 20px 64px; }
  .st-grid { grid-template-columns: 1fr; gap: 32px; }
  .st-title { font-size: 30px; }
  .st-img { max-height: 300px; }
  .st-tabs { width: 100%; overflow-x: auto; margin-bottom: 40px; -webkit-overflow-scrolling: touch; }
  .st-tab { padding: 11px 18px; font-size: 14px; }
  .cl { padding-top: 0; }

  /* one heading scale */
  .rb-head, .rb-b-left .rb-head, .cs-title, .svc-ink-title, .tmd-title,
  .wf-title, .tmh-title, .ais-title, .wb-title, .cl-title, .faq-title { font-size: 32px; }

  /* headrows stack */
  .tmh-headrow, .wb-headrow, .cl-headrow { flex-direction: column; align-items: flex-start; gap: 24px; }
  .tmh-sub, .wb-sub, .cl-sub { white-space: normal; max-width: none; }

  /* ---- nav + hero ---- */
  .hh-nav, .hh-nav.is-top { padding: 14px 18px; }
  .hh-navcta { margin-right: 14px; }
  .hh-drawer-social { top: auto; bottom: 28px; left: 20px; flex-direction: row; gap: 26px; }
  .hh-drawer-ctas { right: 20px; }
  .hh-drawer-ctas .hh-drawer-call { display: none; }
  .hh-hero { height: auto; min-height: 620px; }
  .hh-a-body {
    position: relative; inset: auto;
    padding: 130px 20px 40px; text-align: left; align-items: flex-start;
  }
  .hh-a-title { font-size: clamp(30px, 9.4vw, 46px); line-height: 1.08; }
  .hh-a-title br, .hh-a-sub br { display: none; }
  .hh-a-sub { font-size: 16px; }
  .hh-a-body .hh-cta-row { justify-content: flex-start; margin-top: 28px; }
  /* assurance USPs: tighter stack, larger type */
  .hh-assure { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; }
  .hh-assure-sep { display: none; }
  .hh-assure-item { font-size: 15px; }
  .hh-eyebrow { white-space: normal; }
  .hh-clients {
    position: relative; height: auto; padding: 24px 20px 26px;
    flex-direction: column; align-items: flex-start; gap: 16px;
  }
  /* auto-scroll marquees: trusted-by, accredited partners, press logos, awards */
  .hh-clients-logos, .svc-partners-row, .wb-media-logos, .tmd-awards {
    width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .hh-clients-logos .fbf-mq-track,
  .svc-partners-row .fbf-mq-track,
  .wb-media-logos .fbf-mq-track,
  .tmd-awards .fbf-mq-track {
    width: max-content; flex: none;
    animation: fbf-mq 26s linear infinite;
  }
  .tmd-awards { padding: 0; }
  .tmd-awards .fbf-mq-track { animation-duration: 34s; }
  .tmd-award { flex-shrink: 0; height: 44px; }
  .fbf-mq-set, .fbf-mq-set[aria-hidden="true"] {
    display: flex; flex: none; flex-wrap: nowrap; justify-content: flex-start;
    gap: 36px; padding-right: 36px;
  }
  .hh-client-logo { height: 34px; flex-shrink: 0; }
  .svc-partner-img { flex-shrink: 0; }
  .wb-media-logo { flex-shrink: 0; }
  @keyframes fbf-mq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hh-clients-logos .fbf-mq-track, .svc-partners-row .fbf-mq-track, .wb-media-logos .fbf-mq-track, .tmd-awards .fbf-mq-track { animation: none; }
  }
  /* bottom-docked reviews badge: compact on mobile */
  .hh-greviews { right: 12px; bottom: 0; gap: 10px; padding: 10px 16px 12px 14px; border-radius: 14px 14px 0 0; }
  .hh-greviews-g { width: 28px; height: 28px; }
  .hh-greviews-count { font-size: 15px; }
  .hh-greviews-sub { font-size: 12px; }

  /* ---- results ---- */
  .rb-a-grid { grid-template-columns: 1fr; }
  .rb-b-inner { grid-template-columns: 1fr; gap: 40px; }
  /* stat rows: smaller numbers so the label + client get ~2/3 of the width */
  .rb-row { gap: 14px; padding: 20px 2px; }
  .rb-dot { margin: 0 8px 0 2px; }
  .rb-metric--sm { font-size: 26px; min-width: 78px; }
  .rb-row-label { font-size: 15.5px; }
  .cs-row { grid-template-columns: 1fr; gap: 24px; }
  /* featured case studies: swipeable auto-advancing carousel.
     Top margin keeps the label off the cards; vertical padding gives the
     card shadows/glow room so the scroll container doesn't clip them. */
  .rb-cases {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 28px -20px 0; padding: 14px 20px 42px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rb-cases-lead { margin-top: 48px; }
  /* soft, short shadow that fades out well inside the 42px bottom padding
     so the scroll container never clips it into a hard line */
  .cs-card, .cs-card--feature { box-shadow: 0 10px 20px -14px rgba(0,0,0,0.45); }
  .cs-card--feature { border-color: rgba(40,220,154,0.45); }
  .rb-cases::-webkit-scrollbar { display: none; }
  .rb-cases .cs-card { flex: 0 0 84%; scroll-snap-align: center; }
  /* the featured card's lift eats the stack gap on mobile; kill the hover
     lift + big shadow too — tap makes :hover stick and the 60px shadow gets
     clipped hard by the scroll container */
  .cs-card--feature { transform: none; }
  .cs-card:hover, .cs-card--feature:hover {
    transform: none;
    box-shadow: 0 10px 20px -14px rgba(0,0,0,0.45);
    border-color: rgba(255,255,255,0.08);
  }
  .cs-card--feature:hover { border-color: rgba(40,220,154,0.45); }

  /* ---- services: heading one line, meta underneath ---- */
  .svc-ink-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
  .svc-ai-badge { width: 96px; }
  .svc-row {
    display: grid; grid-template-columns: 30px 1fr 24px;
    align-items: start; column-gap: 12px; row-gap: 4px;
    padding: 18px 2px;
  }
  .svc-row:hover { padding-left: 2px; }
  .svc-row-num { min-width: 0; grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
  .svc-row-body { grid-column: 2; grid-row: 1; }
  .svc-row-name { font-size: 18px; line-height: 1.25; }
  .svc-reveal span { max-width: none; font-size: 13.5px; }
  .svc-row-meta { grid-column: 2; grid-row: 2; white-space: normal; font-size: 11px; padding-top: 0; }
  .svc-row svg, .svc-row [data-lucide] { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .svc-partners { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 40px; }

  /* ---- team ---- */
  .tmd { padding: 64px 0 68px; }
  /* orange side glows wash over the portraits on a narrow screen */
  .tmd-marquee-wrap::before, .tmd-marquee-wrap::after { display: none; }
  .tmd-head { padding-left: 20px; padding-right: 20px; }
  .tmd-ctas { flex-wrap: wrap; }

  /* ---- why FBF: tighter number column ---- */
  .wf-row { grid-template-columns: 30px 1fr; gap: 12px; padding: 18px 2px; }

  /* ---- quote CTA + closing CTA: centered, balanced card ---- */
  .qc-ctas, .ccta-ctas { flex-wrap: wrap; }
  .qc-people { display: none; }
  .qc { padding: 0 20px 32px; }
  .qc-card { padding: 48px 24px 48px; text-align: center; }
  .qc-copy { margin: 0 auto; }
  .qc-title, .qc-lead { margin-left: auto; margin-right: auto; }
  .qc-ticks { justify-content: center; gap: 10px 22px; }
  .qc-ctas { justify-content: center; }
  .qc-ctas .fbf-button, .qc-ctas button { max-width: 100%; }
  .qc-proof { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .qc-proof .qc-stars { line-height: 1.5; }

  /* ---- testimonials ---- */
  .tmh-videos { grid-template-columns: 1fr; }
  .tmh-glockup { align-self: flex-start; }
  .tmh-rail { margin: 0 -20px; padding: 4px 20px 28px; }
  .tmh-qcard { flex: 0 0 84%; padding: 22px 20px 20px; }

  /* ---- AI search: CTAs move below the tool card ---- */
  /* gap: 0 — the tablet rule's 56px gap otherwise spaces EVERY child
     (eyebrow/title/lead become separate flex items via display:contents) */
  .ais-top { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
  .ais-left { display: contents; }
  .ais-eyebrow { order: 0; }
  .ais-title { order: 1; margin-top: 16px; }
  .ais-lead { order: 2; margin-top: 18px; }
  /* CTA buttons sit ABOVE the ask-AI tool card */
  .ais-ctas { order: 3; margin-top: 28px; }
  .ais-right { order: 4; margin-top: 36px; width: 100%; max-width: none; }
  .ais-tool { padding: 26px 20px 24px !important; }
  /* unwrap the pill: input gets its own field, button goes full width */
  .ais-tool-row {
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 0; border: none; border-radius: 0; background: transparent;
  }
  .ais-tool-row:focus-within { border-color: transparent; box-shadow: none; }
  .ais-tool-input {
    height: 50px; padding: 0 18px; text-align: center;
    background: #fff; border: 1.5px solid var(--border-strong, #d4cebd);
    border-radius: 999px;
  }
  .ais-tool-input:focus, .ais-tool-input:focus-visible {
    outline: none;
    border-color: var(--fbf-purple, #8c48e6);
    box-shadow: 0 0 0 3px rgba(140,72,230,0.18);
  }
  .ais-tool-go { justify-content: center; height: 50px; padding: 0 12px; font-size: 13.5px; }
  /* Ask ChatGPT + Ask Claude stay side by side */
  .ais-tool-btns { flex-direction: row; gap: 10px; }
  .ais-tool-btns .ais-tool-go { flex: 1; min-width: 0; }
  .ais-badge { top: -38px; right: -8px; width: 92px; }
  /* quote CTA + "How AEO works" side by side */
  .ais-ctas { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px 24px; }

  /* ---- webinars + media ---- */
  .wb-grid {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 36px -20px 0; padding: 4px 20px 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .wb-headrow { gap: 26px; }
  .wb-grid::-webkit-scrollbar { display: none; }
  .wb-grid .wb-card { flex: 0 0 84%; scroll-snap-align: center; }
  .wb-headrow > :last-child { align-self: flex-start; }
  .wb-media-logos { gap: 24px 32px; }
  .wb-media-logo img { max-height: 22px; }

  /* ---- results by industry ---- */
  .cl { padding-top: 64px; }
  .cl-panel { padding: 22px 18px 24px; }
  .cl-tabs { gap: 8px; }
  .cl-tab { height: 38px; padding: 0 16px; font-size: 13px; }
  .cl-cols { display: none; }
  .cl-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 2px; }
  .cl-linkcell { justify-content: flex-start; }

  /* ---- FAQ ---- */
  .faq-inner { grid-template-columns: 1fr; gap: 28px; }
  .faq-q { grid-template-columns: 34px 1fr 32px; gap: 10px; padding: 18px 2px; }
  .faq-q > span:not(.faq-x) { font-size: 16px; }
  .faq-a p { padding: 0 8px 22px 44px; }

  /* ---- footer ---- */
  .ft { padding: 56px 20px 32px; }
  .ft-topline { flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 32px; }
  .ft-contact { margin-left: 0; }
  .ft-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; padding: 32px 0 8px; }
  .ft-bottom { flex-direction: column; gap: 28px; margin-top: 28px; }
  .ft-bottom-right { align-items: flex-start; }
  .ft-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==================================================================
   Small phones ≤ 430px — pill CTAs must fit a ~320px column.
   DS buttons carry inline styles, so !important is required here.
   ================================================================== */
@media (max-width: 430px) {
  .hh-cta-row button, .qc-ctas button, .ccta-ctas button,
  .tmd-ctas button, .rb-b button, .ais-ctas button, .wf button {
    height: 46px !important; padding: 0 18px !important;
    font-size: 14px !important;
  }
  .hh-a-title { font-size: clamp(28px, 9.4vw, 40px); }
  .ais-badge { width: 84px; top: -34px; }
}