/* ==========================================================================
   home-hero-keyline · base.css — LIVE homepage hero (from hero-f6-04, 2026-09-25).
   ---- original header ---- hero-f6 · base.css
   The hero's words and form, the category words/icons/sub-lines, and the two
   content components (the client card, the All Work door) are drawn once
   here, so a difference between two solutions is the COMPOSITION: surfaces,
   widths, the join between the chosen category and its work, the ending.
   Everything is scoped to #hx; the live .screen stays in the page, hidden,
   so the live scripts still find what they expect.
   ========================================================================== */
html body .screen { display: none !important; }

#hx {
  --ink: #0E1E35; --ink2: #33425A; --mute: #5A6678; --brand: #0760C6; --brand2: #4989E2; --deep: #0A4FA8;
  --r1: #AEC9EF; --r2: #C6D9F4; --r3: #DDE9F9; --r4: #EEF4FC; --r5: #F6F9FE;
  --line: #D3E0F1; --line2: #E4ECF7;
  --lane: var(--grid-edge, 18px);                     /* the header's own left/right edge */
  /* the headline: never smaller than the live formula, larger where the width allows, one line from 761px */
  --h1: min(76px, max(2.88vw + 15.4px, 4.5cqw));
  --ink-k: 17.35;                                     /* headline ink width ÷ font-size, measured */
  --m: calc(var(--h1) * var(--ink-k));                /* the headline's own ink width */
  --railh: 164px; --gap: 12px; --cw: 236px; --rows: 2;
  position: relative; display: block; background: #fff; color: var(--ink);
  container-type: inline-size; container-name: hx;
  font-family: -apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#hx :where(:not(.gah, .gah *)), #hx :where(:not(.gah, .gah *))::before, #hx :where(:not(.gah, .gah *))::after { box-sizing: border-box; }   /* resets stop at the Google Ads panel (.gah), which brings its own styles */
#hx :is(p, h1, h2, form):where(:not(.gah *)) { margin: 0; padding: 0; }
#hx a:where(:not(.gah *)) { color: inherit; text-decoration: none; }
#hx button:where(:not(.gah *)) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#hx .hx-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#hx svg:where(:not(.gah *)) { display: block; }
#hx .hx-hero [hidden] { display: none !important; }

/* ---- the hero message ---------------------------------------------------- */
#hx .hx-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
#hx .hx-label, #hx .hx-micro, #hx .hx-h1 { max-width: none; }
#hx .hx-label { font-size: 15px; font-weight: 600; color: #1F2A3A; letter-spacing: .005em; line-height: 1.3; }
#hx .hx-h1 {
  margin-top: calc(var(--h1) * .26); font-size: var(--h1); font-weight: 800; line-height: 1.04;
  letter-spacing: -.034em; color: var(--ink); white-space: nowrap;
}                                                     /* engine.js centres the letters; the full stop hangs */
#hx .hx-h1 em { font-style: normal; color: var(--brand); background: linear-gradient(90deg, #0760C6, #4989E2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#hx .hx-h1 em i { font-style: normal; }

/* the audit field: one object — prefix, input, action — with one height */
#hx .hx-form {
  --fh: 64px;
  margin-top: calc(var(--h1) * .56); width: var(--fw, min(820px, 100%)); display: flex; align-items: stretch;
  height: var(--fh); padding: 6px; border: 1.5px solid var(--brand); border-radius: 12px; background: #fff;
}
#hx .hx-fix {
  display: flex; align-items: center; padding: 0 16px; border-radius: 7px; background: var(--r4);
  font: 500 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #3B4A60; white-space: nowrap;
}
#hx .hx-form input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 16px;
  font-family: inherit; font-size: 18px; font-weight: 400; color: var(--ink); height: auto;
}
#hx .hx-form input::placeholder { color: #8391A5; }
#hx .hx-form:focus-within { box-shadow: 0 0 0 4px rgba(7, 96, 198, .14); }
#hx .hx-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 30px;
  border-radius: 7px; background: var(--brand); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color .3s ease;
}
#hx .hx-form button:hover { background: #0550A8; }
#hx .hx-form button .hx-arw { width: 17px; height: 17px; }
#hx .hx-micro { margin-top: 18px; font-size: 15px; color: #4F5B6C; line-height: 1.4; }
#hx .hx-micro b { color: var(--ink); font-weight: 700; }
#hx .hx-micro i { font-style: normal; color: #9AA6B6; margin: 0 .6em; }
#hx .hx-sent { margin-top: 10px; font-size: 14px; color: #0B6B3A; font-weight: 600; }

/* ---- the eight categories: words only; each solution builds the object --- */
#hx .hx-tab { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
#hx .hx-ti { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; }
#hx .hx-ti svg { width: 19px; height: 19px; }
#hx .hx-tt { display: flex; flex-direction: column; min-width: 0; }
#hx .hx-tt b { font-size: 14.5px; font-weight: 700; line-height: 1.22; color: var(--ink); white-space: nowrap; letter-spacing: -.005em; transition: color .3s ease; }
#hx .hx-tt small { font-size: 12px; line-height: 1.3; color: var(--mute); white-space: nowrap; margin-top: 1px; }
#hx .hx-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---- the ONE panel -------------------------------------------------------- */
#hx .hx-panel { position: relative; min-width: 0; }
#hx .hx-cap { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 3; pointer-events: none; }
#hx .hx-cap-t { display: none; }
#hx .hx-nav { width: 100%; display: flex; justify-content: space-between; }
#hx .hx-nav button {
  pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  transform: translate(-8px, -50%); border: 1px solid #C4D6EE; background: #fff; color: var(--brand); transition: opacity .35s ease;
}
#hx .hx-nav button + button { transform: translate(8px, -50%); }
#hx .hx-nav button svg { width: 16px; height: 16px; }
#hx .hx-panel:not(.has-more) .hx-nav button, #hx .hx-nav button:disabled { opacity: 0; pointer-events: none; }
#hx .hx-rail {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
  overscroll-behavior-x: contain; height: var(--railh); container-type: inline-size;
}
#hx .hx-rail::-webkit-scrollbar { display: none; }
#hx .hx-track { display: grid; grid-auto-flow: column; gap: var(--gap); height: 100%; width: max-content; min-width: 100%; }
#hx .hx-track > * { scroll-snap-align: start; }
#hx .hx-track.is-cards {
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  grid-auto-columns: max(var(--cw), calc((100cqw - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1)));   /* few items fill the width: never a hole */
}
#hx .hx-track.is-doors { grid-template-rows: minmax(0, 1fr); grid-auto-columns: var(--dw, calc((100cqw - 6 * var(--gap)) / 7)); }

/* the client card — the live card's content, a filled plate */
#hx .hx-card {
  display: flex; align-items: center; gap: 12px; padding: 0 14px; min-width: 0;
  background: var(--card, #fff); border: 1px solid var(--card-line, transparent); border-radius: 10px;
  transition: border-color .3s ease, background-color .3s ease;
}
#hx .hx-card:hover { border-color: var(--card-hl, #A9C5EA); }
#hx .hx-ini {
  flex: 0 0 36px; height: 36px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
#hx .hx-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#hx .hx-tx b { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hx .hx-tx small { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#hx .hx-tx em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--deep); margin-top: 2px; }
#hx .hx-go { color: var(--brand); flex: 0 0 auto; } #hx .hx-go svg { width: 15px; height: 15px; }
#hx .hx-card.is-dummy { background: transparent; border: 1px dashed #BFD2EC; }
#hx .hx-card.is-dummy .hx-ini { background: var(--r3); }
#hx .hx-card.is-dummy b { color: #647185; font-weight: 600; }
#hx .hx-card.is-dummy small { color: #95A1B2; }

/* the All Work door — the live picture, its badge and its link */
#hx .hx-door { display: flex; flex-direction: column; gap: 10px; min-width: 0; height: 100%; }
#hx .hx-ph { position: relative; flex: 1 1 auto; min-height: 60px; border-radius: 10px; background: var(--r4) center/cover no-repeat; transition: filter .35s ease; }
#hx .hx-door:hover .hx-ph { filter: saturate(1.08) brightness(1.03); }
#hx .hx-badge { position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 7px; background: #fff; display: grid; place-items: center; }
#hx .hx-badge svg { width: 16px; height: 16px; }
#hx .hx-dv { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #0A55B5; white-space: nowrap; line-height: 1.2; }
#hx .hx-dv .hx-arw { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .35s ease; }
#hx .hx-door:hover .hx-arw, #hx .hx-lead:hover .hx-arw { transform: translateX(3px); }
/* the live All Work view's first cell (only where a solution asks for it) */
#hx .hx-lead { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 100%; padding: 14px 0 2px; }
#hx .hx-lead-i svg { width: 30px; height: 30px; }

/* motion: slow, never a blink */
#hx .hx-track { animation: hxIn .5s ease both; }
@keyframes hxIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #hx .hx-track { animation: none; } #hx :where(:not(.gah *)) { transition: none !important; } }

/* ---- tablet: the headline stays one line, the field narrows with it ------- */
@media (max-width: 1100px) {
  #hx .hx-form { --fh: 60px; }
  #hx .hx-form input { font-size: 17px; }
  #hx .hx-form button { font-size: 16px; padding: 0 24px; }
}

/* ---- phone ------------------------------------------------------------------ */
@media (max-width: 760px) {
  /* phone headline: exactly two lines ("Digital marketing that / brings customers.") across the text measure */
  #hx { --h1: clamp(25px, calc((100cqw - var(--hpad, 36px)) / 10.25), 44px); --railh: 150px; --gap: 10px; }
  #hx .hx-label { font-size: 13.5px; }
  #hx .hx-h1 { white-space: normal; line-height: 1.08; letter-spacing: -.03em; max-width: none; transform: none; }
  #hx .hx-form { --fh: auto; width: 100%; height: auto; margin-top: 22px; flex-wrap: wrap; padding: 5px; row-gap: 5px; border-radius: 12px; }
  #hx .hx-fix { padding: 0 11px; font-size: 13px; }
  #hx .hx-form input { height: 50px; font-size: 16px; flex-basis: 0; padding: 0 11px; }
  #hx .hx-form button { flex: 1 0 100%; height: 52px; font-size: 16px; }
  #hx .hx-micro { margin-top: 14px; font-size: 13.5px; }
  #hx .hx-micro i { margin: 0 .42em; }
  #hx .hx-nav { display: none; }
  #hx .hx-track.is-doors { grid-auto-columns: var(--dwp, 49cqw); }
  #hx .hx-track.is-cards { grid-auto-columns: var(--cwp, 74cqw); }
  #hx .hx-tt b { font-size: 13px; }
}
@media (max-width: 350px) {
  #hx .hx-micro { font-size: 12.5px; }
  #hx .hx-fix { padding: 0 9px; font-size: 12px; }
}

/* a door narrower than its link: the link sets on two lines, and EVERY door
   reserves the same two lines, so the pictures' bottoms stay on one line */
@container (max-width: 1300px) {
  #hx .hx-door { gap: 8px; }
  #hx .hx-door .hx-dv { display: block; white-space: normal; height: 2.4em; font-size: 13px; line-height: 1.2; }
  #hx .hx-door .hx-dv .hx-arw { display: inline-block; vertical-align: -2px; margin-left: 5px; }
}