/* home-hero-keyline · keyline.css — LIVE (hero-f6 s04.css, 2026-09-25).
   Solution 04 · KEYLINE — the work enters the hero, on one line.
   The offer stands on a pale field that runs the full screen width and begins
   straight under the submenu. The work is ONE white card, exactly the page
   lane wide, which rises into that field. Its category row sits inside the
   field; its work sits below it, on the white page. ONE 1px line does all the
   structural work: it is the field's bottom edge outside the card and the
   line under the categories inside it — the same line, at the same height,
   from screen edge to screen edge. The chosen category is marked ON that line:
   a brand-blue segment exactly the category's width, the one thing on the line
   that is not grey. No second frame, no tray, no gap to explain.
   Proportion: field = screen; card = lane; the audit field = 3/4 of the headline. */
#hx .s4 {
  --field: #EAF1FB; --edge: #C3D4EB; --th: 72px;
  --fw: min(calc(var(--m) * .78), 100%);
  --pad-t: clamp(32px, 8vh - 8px, 68px);
  --railh: clamp(132px, 19vh - 4px, 168px);
}
#hx .s4-field { background: var(--field); border-bottom: 1px solid var(--edge); padding: var(--pad-t) var(--lane) calc(var(--th) + clamp(34px, 6.4vh - 4px, 58px)); }
#hx .s4-field .hx-fix { background: var(--field); }
#hx .s4-card {
  position: relative; margin: calc(-1 * (var(--th) + 2px)) var(--lane) 0; background: #fff;
  border: 1px solid var(--edge); border-radius: 18px; overflow: hidden;
}
#hx .s4-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: calc(var(--th) + 1px); border-bottom: 1px solid var(--edge); padding: 0 12px; }
#hx .s4-tabs .hx-tab { position: relative; justify-content: flex-start; align-items: flex-start; padding: 17px 8px 0 16px; gap: 9px; transition: background-color .35s ease; }
#hx .s4-tabs .hx-tab::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--brand); transform: scaleX(0); transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
#hx .s4-tabs .hx-tab[aria-selected="true"]::after { transform: scaleX(1); }
#hx .s4-tabs .hx-tt small { white-space: normal; }
#hx .s4-tabs .hx-tt b { color: #22324B; }
#hx .s4-tabs .hx-tab:hover { background: #F7FAFE; }
#hx .s4-tabs .hx-tab[aria-selected="true"] b { color: var(--brand); }
#hx .s4-work { --card: #F1F5FC; padding: 24px 24px 26px; }
#hx .s4 { padding-bottom: 28px; }

@media (max-width: 1320px) { #hx .s4-tabs .hx-ti { display: none; } }
@media (max-width: 1100px) {
  #hx .s4 { --th: 56px; }
  #hx .s4-tabs .hx-tt small { display: none; }
  #hx .s4-tabs .hx-tab { justify-content: center; align-items: center; padding: 0 6px; }
  #hx .s4-tabs .hx-tt { align-items: center; text-align: center; }
  #hx .s4-tabs .hx-tt b { white-space: normal; font-size: 13px; }
}

/* phone: the same card rising into the same field; its category row becomes
   two rows of four names, each with its own segment of the one line */
@media (max-width: 760px) {
  #hx.hx-04 { --hpad: 36px; }   /* was `.f6-04 #hx` (the preview's body class) */
  #hx .s4 { --th: 104px; --railh: 150px; --pad-t: 30px; padding-bottom: 20px; }
  #hx .s4-field { padding-bottom: calc(var(--th) + 26px); }
  #hx .s4-card { border-radius: 16px; }
  #hx .s4-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; padding: 0 4px; }
  #hx .s4-tabs .hx-tab { flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0 2px; }
  #hx .s4-tabs .hx-tab:nth-child(-n+4) { box-shadow: inset 0 -1px 0 var(--line2); }
  #hx .s4-tabs .hx-tab::after { left: 8px; right: 8px; }
  #hx .s4-tabs .hx-ti { display: grid; }
  #hx .s4-tabs .hx-ti svg { width: 18px; height: 18px; }
  #hx .s4-tabs .hx-tt b { font-size: 12px; line-height: 1.15; text-align: center; }
  #hx .s4-work { padding: 16px 0 16px 14px; }
}

/* ---- the Google Ads tab: the moved #gadsPanel in the Keyline card look ----
   gads.css gives it the old band's card (white, square, no edge). Here each
   client is the same filled plate as every other tab's card (--card, 10px,
   an edge only on hover). Ten ids: outranks gads.css's nine. */
html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i {
  background: var(--card, #F1F5FC) !important; border: 1px solid transparent !important; border-radius: 10px !important;
  transition: border-color .3s ease, background-color .3s ease !important;
}
html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i:hover { border-color: #A9C5EA !important; }
html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel { background: #fff !important; border-color: var(--brand) !important; }
html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .mp-m { width: 36px !important; height: 36px !important; border-radius: 7px !important; font-size: 12px !important; }