/* ==========================================================================
   desktop-parity/hero.css — the homepage hero on tablets and desktops
   (761px and wider). Written 2026-10-03.

   WHY
   ---
   Between 2026-10-01 and 10-02 the owner approved two improvements to the
   hero while reviewing it on a phone. Both fixed problems the desktop hero
   still had, so this file carries the same thinking to wide screens. It does
   not copy the phone layout: the desktop keeps its one-line form and its row
   of eight tabs.

   1 · THE AUDIT FORM  (phone: "Straddle", home-hero-keyline/tray.css, and
       the soft wells approved with the phone field's docked panel)
       Was: a 1.5px blue frame plus a 4px halo on focus (a double blue outline),
       "https://www." in a monospace grey plate, so the address read as two
       boxes, and, in the second step, white hairline boxes that took a full
       blue border on focus.
       Now: one white field held by a soft two-layer shadow and one 2px ring on
       focus; the prefix uses the address's own typeface and size, with the
       phone's resting caret, so "https://www.yourcompany.com" reads as one
       address. The second step opens inside the same white field as soft
       wells (#F2F5FB, no outline). A focused well keeps its tone and takes one
       thin line inside its edge, at 42% blue. The phone field's country button
       and the services field take the same well, and their docked panels
       match. The solid blue action button stays: on desktop it sits inside the
       field's own row, where the phone's white key straddling the edge has no
       equivalent.

   2 · THE OUR WORK CARD  (phone: "Closed", home-allwork-ourwork/ourwork.css)
       Was: one 1px line running from screen edge to screen edge between the
       eight tabs and the cards, white above and below it, and the chosen tab
       marked by a 3px blue segment on that line. The owner's diagnosis on the
       phone applies here too: the line separates the tab from its cards, and
       blue lines read as cheap.
       Now: the card is one pale surface (#DCE7F8) that holds the tabs and the
       cards with no line between them. Every tab is a soft key, and the chosen
       key is white and raised in the cards' own shadow, so white means open.
       The hero's lower edge carries the one line. Under the cards is the site's
       quiet position bar (.mw-bar, built by ourwork.js). It was missing here,
       and without it a mouse could not reach the cards past the edge.

   Behaviour is unchanged: tray.js, engine.js, hero.js, need.js and phone.js
   run as before. Phones (≤760px) are untouched: every rule is inside
   min-width:761px, except the drawer rules, which apply only once the desktop
   drawer has opened (.tr-open).

   UNDO: delete the desktop-parity/hero.css line in index.html. ourwork.js
   also shows the position bar on wide screens; to undo that, restore it from
   desktop-parity/_live-backup/20261003/.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · THE AUDIT FORM — closed
   --------------------------------------------------------------------------- */
@media (min-width: 761px) {
  html body #hx form#hxForm {
    --dp-sf: 0 0 0 1px rgba(15, 30, 58, .08), 0 1px 2px rgba(16, 42, 90, .06), 0 14px 32px -12px rgba(16, 42, 90, .18);
    --dp-ring: 0 0 0 2px rgba(7, 96, 198, .6);
    border: 0; border-radius: 16px; box-shadow: var(--dp-sf); transition: box-shadow .2s ease;
  }
  html body #hx form#hxForm:focus-within { box-shadow: var(--dp-sf), var(--dp-ring); }
  /* the drawer is open and a well has the focus: the well shows it, the field does not ring as well */
  html body #hx form#hxForm.tr-open:not(:has(#hxSite:focus)):focus-within { box-shadow: var(--dp-sf); }

  /* the prefix: the address's own typeface, size and colour family, no plate */
  html body #hx form#hxForm .hx-fix {
    position: relative; padding: 0 0 0 18px; border-radius: 0; background: none;
    font: 400 18px/1.25 -apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif; letter-spacing: 0; color: #4A5A75;
  }
  html body #hx form#hxForm #hxSite { padding-left: 2px; font-weight: 500; letter-spacing: -.005em; }
  html body #hx form#hxForm #hxSite::placeholder { color: #7C8AA5; font-weight: 400; }
  /* the resting caret shows where to type; the real caret takes over on focus, in the same
     place (the input's 2px padding), so nothing moves when the field is clicked */
  html body #hx form#hxForm .hx-fix::after {
    content: ""; position: absolute; right: -2px; top: 50%; width: 2px; height: 22px; margin: -11px 0 0; border-radius: 1px; background: var(--brand, #0760C6);
    animation: dpCaret 1.15s steps(1, end) infinite;
  }
  html body #hx form#hxForm:focus-within .hx-fix::after,
  html body #hx form#hxForm.as-filled .hx-fix::after,
  html body #hx form#hxForm.tr-open .hx-fix::after { display: none; }

  /* the action keeps its solid blue; its corners follow the field's (16 − 6) */
  html body #hx form#hxForm > button, html body #hx form#hxForm .tr-tray button.tr-go { border-radius: 10px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  html body #hx form#hxForm .hx-fix { font-size: 17px; }
  html body #hx form#hxForm .hx-fix::after { height: 20px; margin-top: -10px; }
}
@keyframes dpCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html body #hx form#hxForm .hx-fix::after { animation: none; } }

/* ---------------------------------------------------------------------------
   1 · THE AUDIT FORM — the second step (the desktop drawer, .tr-open)
   --------------------------------------------------------------------------- */
/* the drawer is a tier of the same white field, no band and no line */
html body #hx form#hxForm.tr-open .tr-tray { background: #fff; border-top: 0; padding-top: 4px; }

/* the wells: name, number and services */
html body #hx form#hxForm .tr-field {
  border: 1px solid transparent; border-radius: 10px; background: #F2F5FB;
  transition: box-shadow .2s ease, background-color .2s ease;
}
html body #hx form#hxForm .tr-field:focus-within { border-color: transparent; background: #F2F5FB; box-shadow: inset 0 0 0 1px rgba(7, 96, 198, .42); }
html body #hx form#hxForm .tr-tray input::placeholder { color: #7C8AA5; }

/* the phone field in its well: the country is plain words in the well, like the phones' wells */
html body #hx form#hxForm .tr-field > .ph {
  --ph-x: #7C8AA5; --ph-next: #4A5A75; --ph-r: 10px; --ph-jr: 4px; --ph-pp: 6px;
  --ph-panel: #F2F5FB; --ph-panel-edge: transparent; --ph-panel-bw: 0px; --ph-search: #fff; --ph-row-tint: #E4EBF7;
}
html body #hx form#hxForm .tr-field > .ph .ph-cc {
  margin: 0 0 0 4px; padding: 0 6px; border-radius: 8px; background: transparent; color: #4A5A75;
  font: 400 16px/1 -apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}
html body #hx form#hxForm .tr-field > .ph:not([data-open]) .ph-cc:hover { background: #E8EEF8; }
html body #hx form#hxForm .tr-field > .ph .ph-flag { font-size: 18px; }
html body #hx form#hxForm .tr-field > .ph .ph-chev { width: 12px; height: 12px; }
/* the well while its country panel is open: the pale plate behind the number only, meeting corners tightened */
html body #hx form#hxForm .tr-field.tr-tel.ph-open { border-color: transparent; background: transparent; box-shadow: none; }
html body #hx form#hxForm .tr-field.tr-tel.ph-open::before { border-color: transparent; border-radius: 10px 10px 4px 4px; background: #F2F5FB; }

/* the services field in its well (need.css .nq-drawer reads these) */
html body #hx form#hxForm .tr-tray.tr-has-need > .nq-drawer {
  --nq-r: 10px; --nq-rj: 4px; --nq-bg: #F2F5FB; --nq-line: transparent; --nq-hover: #E8EEF8;
}

/* ---------------------------------------------------------------------------
   2 · THE OUR WORK CARD
   --------------------------------------------------------------------------- */
@media (min-width: 761px) {
  /* one ground for the hero and the card; the hero's lower edge carries the line */
  html body #hx.hx.hx .s4 { background: var(--field, #EAF1FB); border-bottom: 1px solid var(--edge, #C3D4EB); }
  html body #hx.hx.hx .s4-field { border-bottom-color: transparent; }

  /* the surface */
  html body #hx.hx.hx .s4-card { background: #DCE7F8; border-color: transparent; border-radius: 20px; }

  /* the keys. A key is never narrower than its words: "Google Ads Audits" ran
     11–20px past its slot at 1366–1440px before (unseen while no key edge was
     drawn). The rest share what is left equally. */
  html body #hx.hx.hx .s4-tabs {
    grid-template-columns: repeat(8, minmax(min-content, 1fr));
    border-bottom-color: transparent; column-gap: 6px; padding: 12px 12px 0; height: calc(var(--th) + 13px);
  }
  html body #hx.hx.hx .s4-tabs .hx-tab { position: relative; z-index: 0; background: transparent; border-radius: 12px; }
  html body #hx.hx.hx .s4-tabs .hx-tab::before {
    content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 12px; background: #EAF1FC;
    transition: background-color .25s ease, box-shadow .25s ease;
  }
  html body #hx.hx.hx .s4-tabs .hx-tab::after { display: none; }
  html body #hx.hx.hx .s4-tabs .hx-tab:hover::before { background: #F3F7FD; }
  html body #hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]::before {
    background: #fff; box-shadow: 0 0 0 1px #D6E0EE, 0 1px 2px rgba(16, 42, 88, .05), 0 10px 18px -12px rgba(16, 42, 88, .34);   /* the work cards' own shadow */
  }
  html body #hx.hx.hx .s4-tabs .hx-tt small { color: #4A5870; }
  html body #hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .hx-tt b { color: #004594; }
  html body #hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .hx-tt small { color: #33496B; }
  html body #hx.hx.hx .s4-tabs .hx-tab:focus-visible { outline-offset: -2px; border-radius: 12px; }

  /* the cards stand on the same surface, on the keys' own 12px inset (as on the phone, the cards
     start on the keys' left edge), then the bar closes it */
  html body #hx.hx.hx #hxPanel { padding: 14px 12px 14px; }
  html body #hx.hx.hx #hxPanel:has(> .mw-bar:not([hidden])) { padding-bottom: 8px; }
  html body #hx.hx.hx #hxPanel .mw-bar { display: block; position: relative; z-index: 4; height: 18px; margin: 10px 0 0; cursor: pointer; touch-action: none; }   /* above the pinned end's 22px backing (z 3), or its right end and the knob at the end of the scroll are covered */
  html body #hx.hx.hx #hxPanel .mw-bar[hidden] { display: none; }
  html body #hx.hx.hx #hxPanel .mw-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: #C3D1E7; }
  html body #hx.hx.hx #hxPanel .mw-bar i { position: absolute; left: 0; top: 5px; height: 8px; min-width: 28px; border-radius: 8px; background: #FAFBFC; box-shadow: inset 0 0 0 1px #B4C2D8; }
  /* the pinned "View all" end stands on the surface, not on a white slab (hero.css drew it for a white card) */
  html body #hx.hx.hx #hxPanel .hw-end { padding-right: 0; background: #DCE7F8; box-shadow: 0 -6px 0 0 #DCE7F8, 0 22px 0 0 #DCE7F8; }
  html body #hx.hx.hx #hxPanel .hw-end::before { background: linear-gradient(90deg, rgba(220, 231, 248, 0), #DCE7F8 60%); }   /* fully opaque well before the end: no sliver of the cut card */
}
@media (min-width: 1101px) {
  /* three-line keys (Client Reviews, Client Wall, Landing Pages…) get the same air below as above */
  html body #hx.hx.hx .s4-tabs { height: calc(var(--th) + 17px); }
  html body #hx.hx.hx .s4-tabs .hx-tab { padding: 13px 10px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #hx.hx.hx .s4-tabs .hx-tab::before { transition: none; }
}