/* HERO responsive grid: exact 1280px boundary of the existing hamburger menu.
   Only the graphic/caption inside #kp-float-clock is changed below that boundary.
   Desktop circular positioning remains owned by V46/V70 and is not overridden. */

@media (max-width:1280px) {
  #top.kp-float #hero #kp-float-clock {
    --kp-hero-grid-row-min:40px;
    --kp-hero-statement-gap:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    min-width:0;
    height:auto;
    min-height:0;
    padding:0;
  }

  /* SVG viewBox center = 410.5; its main gear center is x=421.
     A -1.41% stage correction puts the mechanical axis on the figure axis. */
  #top.kp-float #hero #kp-float-clock .kp-float-clock-stage {
    position:relative;
    left:auto;
    top:auto;
    width:min(520px,100%);
    aspect-ratio:1;
    flex:none;
    margin:0 auto 24px;
    transform:translateX(-1.41%);
    translate:none!important;
    will-change:auto!important;
  }

  #top.kp-float #hero #kp-float-clock .kp-float-words {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(7,minmax(var(--kp-hero-grid-row-min),auto));
    grid-auto-flow:row;
    column-gap:clamp(8px,1.2vw,14px);
    row-gap:10px;
    width:min(520px,calc(100% - 32px));
    max-width:520px;
    min-width:0;
    margin-inline:auto;
    padding:0;
    align-items:stretch;
  }

  #top.kp-float #hero #kp-float-clock .kp-float-word-group {
    display:contents!important;
    position:static!important;
    transform:none!important;
    translate:none!important;
    animation:none!important;
  }

  #top.kp-float #hero #kp-float-clock .kp-float-word {
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    min-width:0;
    max-width:100%!important;
    width:100%!important;
    min-height:var(--kp-hero-grid-row-min);
    height:auto;
    margin:0;
    padding:0;
    text-align:center!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    overflow-wrap:normal!important;
    line-height:1.25!important;
    letter-spacing:-.02em!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;
    animation:none!important;
    will-change:auto!important;
  }

  #top.kp-float #hero #kp-float-clock .kp-float-word:is(
    [data-word="auto"],[data-word="mark"],[data-word="egais"],
    [data-word="sign"],[data-word="one"],[data-word="piot"],
    [data-word="cash"]
  ) {
    font-size:clamp(13px,calc(1.3vw + 8.3px),18px)!important;
    font-weight:750!important;
    color:#b33c24!important;
    letter-spacing:-.025em!important;
  }

  #top.kp-float #hero #kp-float-clock .kp-float-word:not(:is(
    [data-word="auto"],[data-word="mark"],[data-word="egais"],
    [data-word="sign"],[data-word="one"],[data-word="piot"],
    [data-word="cash"]
  )) {
    font-size:clamp(12px,calc(1.1vw + 8px),16px)!important;
    font-weight:550!important;
    color:#526477!important;
  }

  /* The caption shares the stationary figure axis with the SVG stage. */
  #top.kp-float #hero #kp-float-clock figcaption.kp-hero-statement {
    position:static!important;
    inset:auto!important;
    display:block;
    width:min(520px,calc(100% - 32px))!important;
    max-width:520px!important;
    min-width:0;
    margin:var(--kp-hero-statement-gap) auto 0!important;
    padding:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    font-size:clamp(16px,calc(1.4vw + 10px),24px)!important;
    line-height:1.3!important;
    transform:none!important;
    translate:none!important;
    animation:none!important;
    will-change:auto!important;
  }

  #top.kp-float #hero #kp-float-clock figcaption.kp-hero-statement strong {
    color:#b33c24!important;
  }
}

/* At the smallest viewport a cell may take two lines; never overflow
   horizontally. The EPD / ETRN label remains one DOM item. */
@media (max-width:360px) {
  #top.kp-float #hero #kp-float-clock .kp-float-word:not([data-word="epd"]) {
    white-space:normal!important;
    text-wrap:balance!important;
    overflow-wrap:anywhere!important;
  }
}

/* Cursor-driven offsets are never applied to touch / non-hover devices.
   Keep structural transform for SVG anchoring and desktop circular labels. */
@media (hover:none), (pointer:coarse) {
  #top.kp-float #hero > .kp-float-art > svg,
  #top.kp-float #hero .kp-float-clock-stage,
  #top.kp-float #hero .kp-float-word-group,
  #top.kp-float #hero .kp-float-word {
    translate:none!important;
    will-change:auto!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  #top.kp-float #hero .kp-float-word,
  #top.kp-float #hero .kp-float-word-group,
  #top.kp-float #hero .kp-float-clock-stage,
  #top.kp-float #hero .kp-hero-statement {
    animation:none!important;
    transition:none!important;
    translate:none!important;
    will-change:auto!important;
  }
}