/* ==========================================================================
   The Hex layer. Loaded last, so it decides.
   One language for the whole page: hairline rectangles with a 2px corner, no shadows or glows,
   selection handles on the thing you are touching, mono captions in brackets, thin rules.
   Palette and fonts are unchanged (Starboard navy and blue). Blush is the one selected colour.
   Rules of the house:
   - Corners are 2px. Only status dots are round.
   - Lines are 1px navy at 20%. The strong rule is solid navy.
   - Nothing floats on a shadow. Depth comes from a rule, never a blur.
   - Motion uses transform and opacity, and has a static reduced-motion state.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-2xl: 2px;
  --radius-pill: 2px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-button: none;
  --hx-ink: #142853;
  --hx-blue: #3360FF;
  --hx-rule: rgba(20, 40, 83, .2);
  --hx-blush: #FFF1EE;
  --hx-ok: #027A48;
  --hx-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Selection handles: four small rings on the corners of whatever is active.
   One pseudo-element carries all four, so no extra markup is needed. */
.button::after,
.next_cue::after,
.bento_tile::after,
.proof_cell::after {
  content: "";
  position: absolute;
  inset: -5px;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .15s, transform .22s var(--hx-ease);
  background:
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) bottom right / 10px 10px no-repeat;
}
.button, .next_cue, .proof_cell { position: relative; }
@media (hover: hover) {
  .button:hover::after,
  .next_cue:hover::after,
  .bento_tile:hover::after,
  .proof_cell:hover::after { opacity: 1; transform: none; }
}
.button:focus-visible::after,
.next_cue:focus-visible::after { opacity: 1; transform: none; }

/* ---------- 2. Captions: ┤ LABEL ├ ---------- */
.text-style-eyebrow,
.hero_eyebrow,
.statement_eyebrow,
.help_eyebrow,
.reveal_eyebrow {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted, #475467);
  gap: .6em;
}
.text-style-eyebrow::before,
.hero_eyebrow::before,
.statement_eyebrow::before,
.section_header .kicker::before {
  content: "\2524";
  width: auto;
  height: auto;
  background: none;
  color: var(--hx-blue);
  font-weight: 500;
  letter-spacing: 0;
}
.text-style-eyebrow::after,
.hero_eyebrow::after,
.statement_eyebrow::after,
.section_header .kicker::after {
  content: "\251C";
  color: var(--hx-blue);
  letter-spacing: 0;
}
.hero_eyebrow-code { border-right: 0; padding-right: 0; color: inherit; }
.section_statement .statement_eyebrow { color: rgba(255, 255, 255, .72); }
.section_statement .statement_eyebrow::before,
.section_statement .statement_eyebrow::after { color: #9DB6FF; }

/* ---------- 3. Buttons: rectangles, no gradient, no lift ---------- */
.button { border-radius: 2px; box-shadow: none; transform: none; }
.button.is-primary {
  background: var(--hx-ink);
  border-color: var(--hx-ink);
  color: #fff;
  box-shadow: none;
}
.button.is-primary:hover { background: var(--hx-blue); border-color: var(--hx-blue); color: #fff; transform: none; box-shadow: none; }
.button.is-secondary { background: #fff; border-color: var(--hx-ink); color: var(--hx-ink); box-shadow: none; }
.button.is-secondary:hover { background: var(--hx-blush); border-color: var(--hx-ink); color: var(--hx-ink); transform: none; }
/* on the dark panels the primary button turns light, as it does on Hex */
.contact_cta-panel .button.is-primary,
.section_statement .button.is-primary { background: #fff; border-color: #fff; color: var(--hx-ink); }
.contact_cta-panel .button.is-primary:hover,
.section_statement .button.is-primary:hover { background: var(--hx-blush); border-color: var(--hx-blush); color: var(--hx-ink); }
.contact_cta-panel .button.is-secondary { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.contact_cta-panel .button.is-secondary:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.contact_cta-panel { border-radius: 0; border-left-width: 1px; border-color: var(--hx-ink); }
.contact_cta-panel .button::after { background:
    radial-gradient(circle at 5px 5px, var(--hx-ink) 0 3.2px, #fff 3.5px 4.5px, transparent 5px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, var(--hx-ink) 0 3.2px, #fff 3.5px 4.5px, transparent 5px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, var(--hx-ink) 0 3.2px, #fff 3.5px 4.5px, transparent 5px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, var(--hx-ink) 0 3.2px, #fff 3.5px 4.5px, transparent 5px) bottom right / 10px 10px no-repeat; }

/* the cues at the foot of each section */
.next_cue {
  border-radius: 2px;
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--hx-ink);
  color: var(--hx-ink);
}
.next_cue:hover { transform: none; border-color: var(--hx-ink); background: var(--hx-blush); }
.section_statement .next_cue { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.section_statement .next_cue:hover { background: rgba(255, 255, 255, .08); }

/* ---------- 4. The fit question: Handles ---------- */
.fit_panel {
  position: relative;
  margin: 34px 0 0;
  padding: 0 21px 8px;
  max-width: 36rem;
  background: #fff;
  border: 1px solid var(--hx-ink);
  border-radius: 2px;
  box-shadow: none;
}
.fit_panel[hidden] { display: none; }
.fit_cap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 0 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hx-blue);
  white-space: nowrap;
  border-bottom: 1px solid var(--hx-rule);
}
.fit_cap_t { color: var(--hx-ink); transition: color .2s; }
.is-done .fit_cap_t { color: var(--hx-ok); }
.fit_q { margin: 0 0 4px; font-size: 1.3125rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--hx-ink); }
.fit_sub { margin: 0 0 13px; font-size: .9375rem; line-height: 1.5; color: var(--fg-muted, #475467); }
.fit_rows { position: relative; margin: 0 -1px; }
.fit_row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr 36px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--hx-rule);
  border-radius: 0;
  background: none;
  color: var(--hx-ink);
  font: 500 1rem/1.3 var(--font-body);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s, transform .18s var(--hx-ease), background-color .15s;
}
.fit_row:last-child { border-bottom: 1px solid var(--hx-ink); }
.fit_n { padding-left: 12px; font: 500 12px var(--font-mono); color: var(--hx-blue); }
.fit_a { justify-self: end; padding-right: 14px; font: 500 15px var(--font-mono); opacity: .45; transition: transform .2s, opacity .2s; }
.fit_row:hover { background: rgba(255, 241, 238, .6); }
.fit_row:hover .fit_a { opacity: 1; transform: translateX(3px); }
.fit_row:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: -2px; }
.fit_hd {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--hx-ink);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .15s, transform .22s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
  z-index: 2;
}
.fit_hd.a1 { left: -1px; top: -5px; }
.fit_hd.a2 { right: -1px; top: -5px; }
.fit_hd.a3 { left: -1px; bottom: -5px; }
.fit_hd.a4 { right: -1px; bottom: -5px; }
.fit_row.is-press,
.fit_row.is-chosen { background: var(--hx-blush); }
.fit_row.is-press { transform: scale(.985); }
.fit_row.is-press .fit_hd,
.fit_row.is-chosen .fit_hd { opacity: 1; transform: scale(1); }
.fit_row.is-chosen { outline: 1px solid var(--hx-ink); outline-offset: -1px; }
.fit_row.is-chosen .fit_l { font-weight: 600; }
.fit_row.is-chosen .fit_a { opacity: 0; }
.is-done .fit_row.is-chosen .fit_hd { animation: fit-pulse .5s; }
@keyframes fit-pulse { 50% { transform: scale(1.5); } }
.is-done .fit_row:not(.is-chosen) { opacity: .35; pointer-events: none; }
.fit_tick { position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; display: none; color: var(--hx-ink); }
.fit_tick path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.fit_row.is-chosen .fit_tick { display: block; }
.fit_row.is-chosen .fit_tick path { animation: fit-draw .35s .08s var(--hx-ease) forwards; }
@keyframes fit-draw { to { stroke-dashoffset: 0; } }
.fit_rule { height: 2px; margin-top: 10px; background: var(--hx-blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--hx-ease); }
.is-done .fit_rule { transform: scaleX(1); }
.fit_quiet { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 2px; }
.fit_quiet_btn { appearance: none; background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font: inherit; font-size: .875rem; color: var(--fg-muted, #475467); text-decoration: underline; text-decoration-color: var(--hx-rule); text-underline-offset: .22em; }
.fit_quiet_btn:hover { color: var(--hx-ink); text-decoration-color: var(--hx-ink); }
.fit_quiet_btn:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.is-done .fit_quiet { display: none; }
.fit_done { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 8px; }
.is-done .fit_done { display: flex; animation: fit-rise .35s var(--hx-ease); }
@keyframes fit-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fit_done_t { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--fg-muted, #475467); }
.fit_done_t b { color: var(--hx-ink); font-weight: 600; }
.fit_undo { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--hx-rule); padding: 0; min-height: 44px; flex: none; cursor: pointer; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hx-blue); }
.fit_undo:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .fit_panel { margin-top: 21px; padding: 0 16px 6px; max-width: none; }
  .fit_q { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fit_row, .fit_hd, .fit_rule, .fit_a, .button::after, .next_cue::after, .bento_tile::after, .proof_cell::after { transition: none !important; animation: none !important; }
  .fit_tick path { stroke-dashoffset: 0 !important; }
  .fit_row.is-press { transform: none; }
}

/* ---------- 5. Work tiles ---------- */
.bento_tile {
  border-radius: 2px;
  border: 1px solid var(--hx-rule);
  box-shadow: none;
  background: #fff;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bento_tile:hover { transform: none; border-color: var(--hx-ink); }
}
.bento_glow { display: none; }
.bento_scene { background: none; border-radius: 0; border-bottom: 1px solid var(--hx-rule); }
.bento_tile[data-scene="web"] .bento_scene { background: none; border-radius: 0; border-bottom: 0; border-left: 1px solid var(--hx-rule); }
.bento_caption h3 { letter-spacing: -.015em; }
.bento_chip { border-radius: 2px; background: transparent; border: 1px solid var(--hx-rule); color: var(--hx-ink); }
.bento_receipt::before { background: var(--hx-ink); }

/* ---------- 6. Section edges, proof, story ---------- */
.section_proof { box-shadow: 0 -1px 0 var(--hx-rule); }
.story_stage::after, .capability_stage::after { border-radius: 2px; background: var(--hx-ink); }
.story_stage:hover, .capability_stage:hover { box-shadow: inset 0 0 0 1px var(--hx-ink); }
.story_evidence-btn:hover .story_evidence-img { box-shadow: none; transform: none; }
.lightbox_figure, .lightbox_img { border-radius: 2px; box-shadow: none; }
.lightbox_close { border-radius: 2px; }

/* ---------- 7. How I work: four items, two by two, so no cell is empty ---------- */
.how_list { grid-template-columns: repeat(2, 1fr); border-radius: 0; }
@media (max-width: 767px) { .how_list { grid-template-columns: 1fr; } }

/* ---------- 8. Side navigation: the label shows only on hover or focus, never over the text ---------- */
.scroll_rail-link.is-active .scroll_rail-label { opacity: 0; transform: translateX(.5rem); }
.scroll_rail-link:hover .scroll_rail-label,
.scroll_rail-link:focus-visible .scroll_rail-label { opacity: 1; transform: none; }
.scroll_rail-label { border-color: var(--hx-ink); border-radius: 2px; font-weight: 500; }
.scroll_rail-dot { border-radius: 50%; }
.scroll_progress { background: var(--hx-blue); height: 2px; }
@media (max-width: 1199px) { .scroll_rail { display: none; } }

/* ---------- 9. Decorative blocks stay behind the words ---------- */
@media (max-width: 767px) { .depth_block { opacity: .18 !important; } }

/* ---------- 10. Logo rows: one ink, one weight ---------- */

/* ---------- 11. First screen budget on a laptop: the question stays above the fold ---------- */
@media (min-width: 992px) {
  .hero_split .hero_content { padding-top: 0; }
  .hero_center-wrap { padding-top: 34px; padding-bottom: 21px; }
  .fit_panel { margin-top: 21px; }
  .fit_row { min-height: 48px; }
  .fit_cap { height: 34px; margin-bottom: 6px; }
  .fit_sub { margin-bottom: 8px; }
  .fit_quiet_btn { min-height: 44px; }
}
.hero.has-fit .hero_cue { display: none; }
.clients_img { filter: none; mix-blend-mode: normal; opacity: .78; }
.clients_item:hover .clients_img { filter: none; opacity: 1; }

/* ---------- 12. The greeting card: a quiet docked panel, never a veil over the page ---------- */
.reveal_scrim { display: none !important; }
.reveal_card { border: 1px solid var(--hx-ink); border-radius: 2px; box-shadow: none; }
.reveal_card::before { display: none; }
.reveal_card::after { border-radius: 0; }
.reveal_bar { height: 2px; background: var(--hx-blue); border-radius: 0; }
.reveal_close { border-radius: 2px; }
.reveal_close:hover, .reveal_close:focus-visible { background: var(--hx-blush); }
.reveal_card.is-compact { border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; }
.reveal_card.is-compact .reveal_bar { border-radius: 0; }
.reveal_card.is-compact .reveal_footer { border-radius: 0; box-shadow: none; }
@media (max-width: 600px) {
  [data-card-mode="sheet"] .reveal_card.is-compact { border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  [data-card-mode="sheet"] .reveal_card.is-compact .reveal_bar { border-radius: 2px; }
}
.reveal_eyebrow { color: var(--fg-muted, #475467); font-weight: 500; letter-spacing: .14em; }
.reveal_story_box { border-radius: 2px; background: transparent; border: 1px solid var(--hx-rule); }
.reveal_input { border-radius: 2px; border-color: var(--hx-ink); }
.reveal_logo { border-radius: 2px; }
.reveal_more_btn { border-radius: 2px; }
.reveal_modal { border-radius: 2px; box-shadow: none; border: 1px solid var(--hx-ink); }
.help_banner { border-radius: 2px; }
.help_banner::after { display: none; }
.welcome_close { border-radius: 2px; }
.reveal_fit { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; }
.fit_rows.is-small { margin: 0; }
.fit_rows.is-small .fit_row { min-height: 44px; grid-template-columns: 38px 1fr 30px; font-size: .9375rem; }
.fit_rows.is-small .fit_n { padding-left: 10px; }
.fit_rows.is-small .fit_a { padding-right: 10px; }
.fit_rows.is-small .fit_tick { right: 8px; width: 18px; height: 18px; margin-top: -9px; }

/* the tab that brings the card back */
.reveal_pill {
  min-height: 44px; padding: 0 14px 0 6px; border: 1px solid var(--hx-ink); border-radius: 2px;
  background: #fff; color: var(--hx-ink); box-shadow: none;
  font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
.reveal_pill:hover, .reveal_pill:focus-visible { background: var(--hx-blush); color: var(--hx-ink); outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.reveal_pill_mark { width: 30px; height: 30px; border-radius: 2px; background-color: #fff; }

/* ---------- 13. Tinted chips and washes become hairline chips on paper ---------- */
.story_cell-id, .story_cell-receipt, .telemetry_key, .plan_window, .proof_badge {
  background: transparent; border: 1px solid var(--hx-rule); color: var(--hx-ink); border-radius: 2px;
}
.story_cell-receipt.is-muted { color: var(--fg-muted, #475467); }
.story_cell-id { color: var(--hx-blue); }
.story_principle { background: var(--bg-muted, #F4F4F3); border: 1px solid var(--hx-rule); border-left: 2px solid var(--hx-ink); border-radius: 0; }
.scrubber_link:hover, .scrubber_link.is-active, .scrubber_link.active { background: var(--hx-blush); color: var(--hx-ink); border-left-color: var(--hx-ink); font-weight: 600; }
.scrubber_progress-bar { background: var(--hx-blue); }
.section_bento { background: #fff; }
.story_evidence-tag { background: none; border: 0; padding: 0; color: var(--hx-blue); }
.story_card.active, .story_card.is-active { border-color: var(--hx-ink); }

/* the label sweep on the pop-up button made the text hard to read for two seconds: the handles do that job now */
.spot.is-spot { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; -webkit-text-fill-color: currentColor; }

/* the tab that reopens the card must never sit on the last line of the footer */
.footer_component { padding-bottom: 4.5rem; }

/* ---------- 14. Leftovers: the "updated for you" tag, the hover preview ---------- */
.daz_updated_tag { border-radius: 2px; box-shadow: none; padding: .18rem .2rem .18rem .55rem; }
.daz_updated_text { font: 500 .625rem/1.25 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.daz_updated_tip { border-radius: 2px; }
.daz_updated_close { border-radius: 2px; }
.hover_preview { border-radius: 2px; box-shadow: none; border: 1px solid var(--hx-ink); }

/* ---------- 15. Tap targets reach 44px ---------- */
.nav_link { display: inline-flex; align-items: center; min-height: 44px; }
.telemetry_link { display: inline-flex; align-items: center; min-height: 44px; }
.scrubber_link { min-height: 44px; display: flex; align-items: center; }
.scroll_rail-link { height: 2.75rem; }
.scroll_rail { gap: 0; }

/* docked card on a laptop: tighter spacing so all five rows show without scrolling the card */
@media (min-width: 992px) and (min-height: 720px) {
  .reveal_card:not(.is-compact) .spacer-small { padding-top: .5rem; }
  .reveal_card:not(.is-compact) .spacer-medium { padding-top: 1rem; }
  .reveal_card:not(.is-compact) .reveal_body { padding-bottom: .75rem; }
  .reveal_card:not(.is-compact) .reveal_footer { padding-top: .75rem; padding-bottom: 1rem; }
}

/* ---------- 16. First-screen focal points: the 13 and the cycling word ---------- */
.hero_numwrap { position: relative; display: inline-block; }
.anim .hero_numwrap, .anim .hero_def { opacity: 0; }
.anim .hero_numwrap { transform: translateY(40%); }
.hero_num {
  appearance: none; background: none; border: 0; margin: 0; padding: 0 .06em; position: relative;
  font: inherit; letter-spacing: inherit; color: var(--hx-blue); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hero_num::before { content: ""; position: absolute; inset: -10px -8px; }   /* the tap area reaches 44px */
.hero_num::after {
  content: ""; position: absolute; inset: -4px -6px; pointer-events: none; opacity: 0; transform: scale(.96);
  border: 1px solid var(--hx-ink); transition: opacity .15s, transform .22s var(--hx-ease);
  background:
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #fff 0 3.2px, var(--hx-ink) 3.5px 4.5px, transparent 5px) bottom right / 10px 10px no-repeat;
}
.hero_num:hover::after, .hero_num:focus-visible::after, .hero_num.on::after { opacity: 1; transform: none; }
.hero_num.is-hint::after { animation: hero-hint 1.5s ease-in-out 2; }
@keyframes hero-hint { 0%, 100% { opacity: 0; transform: scale(.96); } 40%, 60% { opacity: 1; transform: none; } }
.hero_num:focus-visible { outline: none; }
.hero_rot {
  display: inline-block; vertical-align: bottom; white-space: nowrap; text-align: left; overflow: hidden;
  font-family: var(--font-mono); font-weight: 600; letter-spacing: -.03em; color: var(--hx-blue);
  transition: width .35s var(--hx-ease);
}
.hero_def {
  margin: 13px 0 0; min-height: 1.5em; font: 500 .75rem/1.5 var(--font-mono); letter-spacing: .02em; color: var(--hx-blue);
}
.hero_def::before { content: "\2524  "; } .hero_def::after { content: "  \251C"; }
.hero_numcard {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 20;
  display: flex; align-items: center; gap: 14px; width: min(320px, calc(100vw - 32px)); padding: 14px 16px;
  background: #fff; border: 1px solid var(--hx-ink); border-radius: 2px;
  font: 400 .875rem/1.45 var(--font-body); letter-spacing: 0; text-align: left; color: var(--hx-ink);
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .22s var(--hx-ease);
}
.hero_numcard[hidden] { display: none; }
.hero_numcard.is-on { opacity: 1; transform: none; }
.hero_ring { flex: none; }
.hero_ring line { stroke: var(--hx-rule); stroke-width: 2.5; stroke-linecap: round; transition: stroke .15s; }
.hero_ring line.on { stroke: var(--hx-blue); }
.hero_ring_n { font: 700 28px var(--font-display); fill: var(--hx-ink); }
.hero_facts { display: grid; gap: 4px; font-weight: 400; }
.hero_facts b { font-weight: 600; }
@media (max-width: 991px) { .hero_def { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .hero_num::after, .hero_numcard { transition: none; } .hero_rot { transition: none; } }

/* ---------- 17. The status strip on phones: matching rows, one text column ---------- */
.telemetry_key { display: inline-flex; align-items: center; gap: 7px; }
.telemetry_key .telemetry_dot { box-shadow: none; animation: none; }
@media (max-width: 991px) {
  .telemetry_cell { display: grid; grid-template-columns: 6.75rem 1fr; align-items: start; column-gap: .875rem; padding: .875rem 1rem; }
  .telemetry_key { justify-self: start; }
  .telemetry_val, .telemetry_link { text-wrap: pretty; }
  .telemetry_link { align-self: center; min-height: 0; padding: 0; }
  .telemetry_cell-cta { align-items: center; }
  .telemetry_cell-cta .telemetry_link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) { .hero_headline { min-height: 2.2em; } }
@media (max-width: 640px) { .hero_def::before, .hero_def::after { content: none; } }
.hero_numwrap { z-index: 30; }

/* ---------- 18. Bento tiles: flat Hex cards, white scene ground; the scenes themselves live in bento-cards.css ---------- */
.bento_tile { border: 1px solid var(--hx-rule); border-radius: 2px; background: #fff; box-shadow: none; overflow: hidden; transition: border-color .2s; }
.bento_tile::after { border-radius: 2px; }
.bento_glow { display: none; }
@media (hover: hover) { .bento_tile:hover { transform: none; border-color: var(--hx-ink); } }
.bento_scene { min-height: 15rem; background: #fff; border: 0; border-bottom: 1px solid var(--hx-rule); border-radius: 0; padding: 0; }
.bento_scene::before { content: none; }
.bento_tile[data-scene="web"] .bento_scene { min-height: 14rem; }
@media (min-width: 992px) { .bento_tile[data-scene="web"] .bento_scene { min-height: 17rem; border-bottom: 0; border-left: 1px solid var(--hx-rule); } }
.bento_caption { padding: .85rem 1.125rem 1.2rem; }
.bento_caption h3 { letter-spacing: -.025em; }
.proof_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 479px) { .proof_grid { grid-template-columns: 1fr; } }

/* ---------- 19. One strong surface per section (about a fifth of it), the rest paper ---------- */
/* hero: open paper and the grid; the navy ticker below carries the accent */
.section_hero { background: none; }
.hero_visual { background: none; border: 0; padding: 0; }
.hero_visual-label { display: none; }
.section_clients, .section_logos { background: #fff; border-block: 1px solid var(--hx-rule); }
.section_logos { border-top: 0; }
.section_bento { background: #fff; }
.section_proof { background: #fff; border-top: 2px solid var(--hx-ink); }
.proof_cell { background: #fff; border-color: var(--hx-rule); }
.proof_number, .proof_cell-index { color: #004EEB; }
.proof_creds-bar { background: var(--hx-ink); border-color: var(--hx-ink); }
.proof_badge { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.proof_badge-dot, .proof_badge-dot.is-amber { background: #FEC84B; }
.proof_stack-item { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
.proof_stack-name { color: #fff; }
.proof_stack-icon { filter: brightness(0) invert(1); }
.section_statement { background-color: #0D183E; }
.section_statement::after { display: none; }
.statement_component { background-color: #142853; border-left-width: .375rem; }
.statement_eyebrow, .statement_lede { color: #D6DFFF; }
.section_story { background-color: #fff; }
.story_scrubber, .story_cell { background-color: #fff; border-color: var(--hx-rule); }
.story_cell-bar { background: var(--hx-ink); color: #fff; }
.story_cell-bar * { color: #fff; }
.story_cell-bar .story_cell-id { background: #FEC84B; border-color: #FEC84B; color: var(--hx-ink); }
.story_principle { background: #FFF4DB; border: 1px solid var(--hx-rule); border-left: 4px solid #FEC84B; }
.story_cell-id, .story_cell-receipt { color: #004EEB; }
.section_contact { background: linear-gradient(180deg, #FFF4DB 0 20%, #fff 20% 100%); }
.contact_cta-panel { background: #3360FF; border-color: #142853; border-left: .375rem solid #FEC84B; }
.contact_cta-panel .contact_location { color: #E6ECFF; }
.logos_name { color: #142853; }
.logos_item { padding: .15rem 0; border: 0; border-radius: 0; }
.logos_label { color: #004EEB; }
.hero_numcard { border-color: #AFC2FF; }
.arch_card_dock .arch_card { width: 100%; }

/* the ticker: one navy bar, amber for the figures */
.hero_telemetry-bar { background: var(--hx-ink); border-top: 0; }
.telemetry_grid { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .2); }
.telemetry_cell { background: var(--hx-ink); }
.telemetry_key { background: transparent; border: 1px solid #FEC84B; color: #FEC84B; border-radius: 2px; }
.telemetry_val { color: #EAF0FF; }
.telemetry_fig { color: #FEC84B; font-weight: 600; }
.telemetry_link { color: #FEC84B; }
.telemetry_link:hover { color: #fff; text-decoration: underline; }
.telemetry_dot { background: #4ADE80; }

/* ---------- 20. The stack as the focal object: depth, frame, layer tabs ---------- */
.hero_visual { --hd-w: min(100%, calc((100svh - 310px) * 1.25)); }
.arch_svg .arch_plane, .arch_svg .arch_node, .arch_svg .arch_layer--edges { transition: opacity .7s var(--hx-ease), filter .7s var(--hx-ease); }
.arch_svg[data-frame] .arch_plane, .arch_svg[data-frame] .arch_node { opacity: .24; }
.arch_svg[data-frame] .arch_layer--edges { opacity: .4; }
.arch_svg[data-frame="collect"] .arch_plane[data-plane="collect"], .arch_svg[data-frame="collect"] .arch_node[data-plane="collect"],
.arch_svg[data-frame="resolve"] .arch_plane[data-plane="resolve"], .arch_svg[data-frame="resolve"] .arch_node[data-plane="resolve"],
.arch_svg[data-frame="activate"] .arch_plane[data-plane="activate"], .arch_svg[data-frame="activate"] .arch_node[data-plane="activate"],
.arch_svg[data-frame="ai"] .arch_plane[data-plane="ai"], .arch_svg[data-frame="ai"] .arch_node[data-plane="ai"] {
  opacity: 1; filter: drop-shadow(0 0 7px rgba(51, 96, 255, .55)) drop-shadow(0 0 1.5px rgba(51, 96, 255, .8));
}
.arch_svg.is-focus[data-frame] .arch_node:not(.is-active) { opacity: .35; }
.hd_cast { fill: #142853; opacity: .09; pointer-events: none; }
.hd_ai_cast { fill: #142853; opacity: .12; pointer-events: none; }
.hd_frame { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: transform .8s var(--hx-ease), width .8s var(--hx-ease), height .8s var(--hx-ease), opacity .4s; }
.hd_frame.is-on { opacity: 1; }
.hd_frame i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--hx-ink); }
.hd_frame i:nth-of-type(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
.hd_frame i:nth-of-type(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.hd_frame i:nth-of-type(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hd_frame i:nth-of-type(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.hd_cap { position: absolute; left: 0; top: calc(100% + 8px); white-space: nowrap; transition: opacity .25s;
  font: 600 .6875rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hx-ink); }
.hd_cap b { color: var(--hx-blue); font-weight: 600; }
.hd_frame.is-top .hd_cap { top: auto; bottom: calc(100% + 8px); }
.hd_cap.is-swap { opacity: 0; }
.hd_ring { fill: none; stroke: #142853; stroke-opacity: .2; stroke-dasharray: 2 8; pointer-events: none; animation: hd-orbit 100s linear infinite; }
.hd_ring:nth-of-type(2) { animation-duration: 150s; }
@keyframes hd-orbit { to { stroke-dashoffset: -400; } }
.hd_spot { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: .9;
  background: radial-gradient(closest-side, rgba(51, 96, 255, .26), rgba(51, 96, 255, .1) 55%, rgba(51, 96, 255, 0) 100%);
  transition: transform .8s var(--hx-ease), width .8s var(--hx-ease), height .8s var(--hx-ease), opacity .6s; }
.hd_spot.is-all { opacity: .35; }
.hero_visual .arch_stage { z-index: 1; }
.hd_tabs { display: none; }
@media (min-width: 992px) {
  .hero_split { grid-template-columns: minmax(0, 46%) minmax(0, 54%); gap: 12px; }
  .hero_visual { padding-top: 18px; }
  .arch_stage { width: var(--hd-w); margin-left: auto; min-height: 0; transform: scale(1.1); transform-origin: 62% 46%; }
  .arch_layer--labels { opacity: 0; }
  .hero_cue { display: none; }
  .hd_tabs { display: flex; width: var(--hd-w); margin: 26px 0 0 auto; border-top: 1px solid var(--hx-rule); }
  .hd_tab { flex: 1 1 0; min-width: 0; appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; min-height: 44px; cursor: pointer;
    font: 600 .6875rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hx-ink); }
  .hd_tab b { color: var(--hx-blue); font-weight: 600; margin-right: .4em; }
  .hd_tab:hover { background: var(--hx-blush); }
  .hd_tab[aria-pressed="true"] { background: var(--hx-blush); border-bottom-color: var(--hx-blue); }
  .hd_tab:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: -2px; }
}
@media (max-width: 991px) { .hd_cap { font-size: .625rem; top: auto; bottom: calc(100% + 6px); } .hd_frame i { width: 14px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { .hd_frame, .hd_spot, .arch_svg .arch_plane, .arch_svg .arch_node { transition: none; } .hd_ring { animation: none; } }

/* ===== 21. Bento round 2 hosts (26 Oct) =====
   The six scenes bring their own surface: no amber wash, no dotted mask, generous height for the wide web tile. */
.bento_tile[data-scene="agents"] .bento_scene::after { content: none; }
.bento_tile[data-scene] .bento_scene { background: #fff; }
.bento_tile[data-scene="web"] .bento_scene { min-height: 15rem; }
@media (min-width: 992px) {
  .bento_tile[data-scene="web"] .bento_scene { min-height: 26rem; }
  .bento_tile[data-scene="web"] .bento_caption { justify-content: center; }
}

/* ===== 22. Contrast and collision fixes (26 Oct) =====
   - the scattered iso blocks drifted over headlines and tiles, so they are retired;
   - the contact section drops its cream band: the blue panel is its one strong surface;
   - the personalised help banner was navy text on a navy ground;
   - the LinkedIn button was dark navy on the blue panel. */
.depth_block { display: none !important; }
.section_contact { background: #fff; }
.contact_quote { color: var(--hx-ink); }
.help_banner { background: var(--hx-ink); border-color: var(--hx-ink); }
.help_banner .help_eyebrow { color: #FEC84B; }
.help_banner .help_title { color: #fff; }
.help_banner .help_lead { color: #E6ECFF; }
.help_banner .help_forget { color: #fff; }
.contact_cta-panel .button.is-secondary-night { background: transparent; border-color: rgba(255, 255, 255, .65); color: #fff; }
.contact_cta-panel .button.is-secondary-night:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ===== 23. Magnetic buttons (26 Oct) =====
   Option B from design/button-lab, applied to the live buttons by site/buttons.js.
   The buttons keep their own background, border and colour from sections 1 to 22. These rules add
   only the layers the script draws (hover fill, label, arrow and four handles), the fill colour per
   type and the focus ring. The old handle pseudo-element is switched off on rebuilt buttons only,
   so plan.html, which does not load the script, keeps its handles. */
.button, .next_cue { position: relative; isolation: isolate; overflow: visible; }
.bx.button::after, .bx.next_cue::after { content: none; }

/* hover fill per button type, and the text colour that reads on it */
.button, .next_cue { --bx-fill: var(--hx-blush); --bx-fill-text: var(--hx-ink); --hdl: var(--hx-ink); }
.button.is-primary { --bx-fill: var(--hx-blue); --bx-fill-text: #fff; }
.contact_cta-panel .button.is-primary,
.section_statement .button.is-primary { --bx-fill: var(--hx-blush); --bx-fill-text: var(--hx-ink); }
.contact_cta-panel .button.is-secondary-night { --bx-fill: rgba(255, 255, 255, .12); --bx-fill-text: #fff; }
/* the corner handles are white on the dark surfaces */
.contact_cta-panel .button,
.section_statement .button,
.section_statement .next_cue { --hdl: #fff; }

.bx_fill { position: absolute; inset: -1px; background: var(--bx-fill); z-index: -1; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.bx_lbl { position: relative; display: grid; overflow: hidden; padding: .1em 0; margin: -.1em 0; }
.bx_t { grid-area: 1 / 1; white-space: nowrap; }
.bx_arr { display: inline-flex; width: 16px; height: 16px; }
.bx_arr svg { width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.bx_h { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--hdl); opacity: 0; pointer-events: none; z-index: 2; }
.bx_h:nth-of-type(1) { left: 0; top: 0; }
.bx_h:nth-of-type(2) { left: 100%; top: 0; }
.bx_h:nth-of-type(3) { left: 0; top: 100%; }
.bx_h:nth-of-type(4) { left: 100%; top: 100%; }

/* GSAP moves these buttons with transform, so the CSS transform transition is left out here */
.bx:not(.is-static) { transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
/* reduced motion or no GSAP: a colour change only, no movement */
.bx.is-static:hover, .bx.is-static:focus-visible { background: var(--bx-fill); color: var(--bx-fill-text); }
.bx:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 5px; }
.contact_cta-panel .bx:focus-visible,
.section_statement .bx:focus-visible { outline-color: #fff; }

/* ===== 24. Plan: steps without a clock, and the pace statement (26 Oct) =====
   The three steps carry no day counts, so nothing reads as a slow schedule. The pace note says
   speed and capacity grow with AI and the token budget. */
.plan_window { border-color: var(--hx-rule); }
.plan_cell-header { justify-content: flex-start; }
.plan_pace { margin: 0 0 var(--space-lg); padding: 1.5rem 1.75rem; background: var(--bg-surface, #fff); border: 1px solid var(--hx-rule); border-left: 2px solid var(--hx-blue); border-radius: 0; }
.plan_pace-label { margin: 0 0 .5rem; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hx-blue); }
.plan_pace-title { margin: 0 0 .5rem; font: 700 1.25rem/1.3 var(--font-display); letter-spacing: -.01em; color: var(--hx-ink); }
.plan_pace-text { margin: 0; max-width: 68ch; font-size: .96875rem; line-height: 1.65; color: var(--fg-muted, #475467); }
@media (max-width: 767px) { .plan_pace { padding: 1.25rem; } }