/* =========================================================
   v10 · Home hero: the service cube (2026-10-14). Prefix hcube- (unique; the site already uses .concept, .note, cx-).
   ========================================================= */
.hcube { position: relative; background: var(--white, #fff); overflow: clip; }
/* Dayos layout (Samu 14.10.): the first screen is the big headline and the cube, nothing else. Scrolling, the cube
   stays put on the right while "Every piece in place." + sub + CTA rise in on the left. */
.hcube-grid {
  max-width: calc(var(--maxw) + 120px); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); column-gap: 32px;
}
.hcube-copy { container-type: inline-size; padding-bottom: 16vh; }
/* the headline owns the first screen; the next block starts right under the fold, so a short scroll brings it in */
.hcube-title { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--nav-top) + var(--nav-h) + 40px); }
/* as big as the left column allows (Samu 14.10.: no empty space under it); height-capped for short screens */
html[data-font] .hcube-title { font-size: clamp(56px, min(17.8cqi, 17.5svh), 160px); line-height: .88; }
html[data-font] .hcube-title span { text-wrap: balance; }
.hcube-foot { max-width: 34em; }
html[data-font] .hcube-h2 {
  font-family: "Archivo", "Inter", system-ui, sans-serif; font-variation-settings: "wdth" 62; font-stretch: 62%;
  font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; word-spacing: .1em; line-height: .92;
  font-size: clamp(40px, 4.2vw, 68px); color: var(--ink);
}
.hcube-foot .hero-sub { margin-top: 18px; }
/* phone (Samu 14.10.): no second big heading; the line closes the sub text instead */
.hcube-tail { display: none; color: var(--ink); font-weight: 600; }
.hcube-foot .hero-actions { margin-top: 28px; }
.hcube-foot > :not(.hcube-h2) { transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.hcube-foot > .hero-sub { transition-delay: .12s; }
.hcube-foot > .hero-actions { transition-delay: .22s; }
.hcube-foot.is-waiting > :not(.hcube-h2) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .hcube-foot.is-waiting > * { opacity: 1; transform: none; } }

/* the stage: a soft studio light behind the cube, fading into the page white */
.hcube-stage {
  /* one size for the cube: as wide as its column allows, never taller than the screen minus the nav */
  /* bigger than its column: the canvas edges are empty, so it may reach under the headline's margin and the gutter */
  --cube: min(36vw, calc(100svh - 130px), 540px);
  --cube-top: max(calc(var(--nav-top) + var(--nav-h) + 4px), calc(50svh - var(--cube) / 2 + 30px));
  position: sticky; top: var(--cube-top); margin-top: var(--cube-top);   /* centred in the screen, stays centred on scroll */
  align-self: start; justify-self: end; width: var(--cube); aspect-ratio: 1; margin-right: calc(var(--gutter) * -.5);
}
.hcube-stage::before {
  content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side at 50% 46%, #ececf0 0%, #f5f5f7 45%, rgba(255, 255, 255, 0) 100%);
}
.hcube-poster, .hcube-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.hcube-canvas { opacity: 0; transition: opacity .6s ease; }
.hcube-poster { transition: opacity .6s ease; }
.hcube-stage.is-live .hcube-canvas { opacity: 1; }
.hcube-stage.is-live .hcube-poster { opacity: 0; }

@media (max-width: 760px) {
  /* phone: headline, then "Every piece in place." + text + CTA, then the cube */
  .hcube-grid { display: flex; flex-direction: column; }
  .hcube-copy { display: contents; }
  .hcube-title { order: 1; min-height: 0; padding-top: calc(var(--nav-top) + var(--nav-h) + 28px); }
  html[data-font] .hcube-title { font-size: clamp(44px, 13vw, 64px); }
  .hcube-stage { order: 3; position: relative; top: auto; --cube: min(100%, 420px); margin: 4px auto 8px; justify-self: auto; }
  .hcube-copy { padding-bottom: 0; }
  .hcube-h2 { display: none; }
  .hcube-tail { display: inline; }
  .hcube-foot .hero-sub { margin-top: 0; }
  .hcube-foot { order: 2; padding: 22px 0 0; }   /* phone (Samu 14.10.): sub-heading, text and CTA before the cube */
}

/* pause (WCAG 2.2.2), as quiet as it can be: two grey bars, no disc; shown only with the live cube */
.hcube-pause {
  position: absolute; right: 4%; bottom: 4%; z-index: 2; display: none; gap: 3px; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .38; transition: opacity .2s;
}
.hcube-stage.is-live .hcube-pause { display: flex; }
.hcube-pause:hover, .hcube-pause:focus-visible { opacity: .9; }
.hcube-pause:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 8px; }
.hcube-pause i { width: 3px; height: 11px; border-radius: 2px; background: var(--muted); }
.hcube-pause[aria-pressed="true"] i:first-child { width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--muted); }
.hcube-pause[aria-pressed="true"] i:last-child { display: none; }