/* Life-and-work opening (V2): modern grotesk type + one sculptural, scroll-driven centerpiece.
   Colours come from the semantic tokens in redesign.css. Scroll/tap progress is three numbers on
   .hq-story: --t (assemble), --a (attention), --n (next action). */
@property --t { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --a { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --n { syntax: "<number>"; inherits: true; initial-value: 1; }

:root { --shadow-rgb: 6, 15, 8; --halo: rgba(140, 193, 195, .26); --halo-ring: rgba(217, 174, 95, .5); --sweep: rgba(255, 255, 255, .09); --edge-a: #2a4a4e; --edge-b: #0c1b1e; }
:root[data-theme="light"] { --shadow-rgb: 35, 44, 32; --halo: rgba(188, 213, 211, .75); --halo-ring: rgba(201, 154, 69, .6); --sweep: rgba(255, 255, 255, .6); --edge-a: #3c6a71; --edge-b: #16343B; }

.hq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root:not(#_):not(#__) #dashio-embed .hq-landing { max-width: 1200px; --sans: "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
:root:not(#_):not(#__) #dashio-embed .hq-brand .hq-mark > rect { stroke: var(--ochre); }

/* ---- Stage: headline + centerpiece share the opening viewport -------- */
.hq-story { --t: 1; --a: 1; --n: 1; position: relative; }
#dashio-embed.sq-dashio { overflow-x: clip; }
.hq-stage { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); grid-template-rows: auto auto; column-gap: clamp(16px, 3vw, 48px); align-content: center; padding: 8px 0 28px; }
.hq-hero-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 2; align-self: end; }
.hq-chapters { grid-column: 1; grid-row: 2; position: relative; z-index: 2; margin-top: clamp(12px, 2.4vh, 28px); }
.hq-scene-wrap { grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; min-width: 0; display: grid; justify-items: center; margin-right: calc(-1 * clamp(32px, (100vw - 1200px) / 2 + 32px, 420px)); }

:root:not(#_):not(#__) #dashio-embed .hq-hero-copy { text-align: left; padding: 0; max-width: none; }
.hq-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2.4vh, 26px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-eyebrow { color: var(--muted); margin-bottom: clamp(14px, 2.4vh, 26px); }
.hq-eyebrow i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hq-dot-life { background: var(--teal); }
.hq-dot-work { background: var(--band-work); border: 1px solid var(--sheet-edge); margin-left: 8px; }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(40px, min(5.1vw, 8.3vh), 92px); line-height: .96; letter-spacing: -.048em; margin: 0; text-wrap: balance; }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy h1 span { display: block; }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy h1 .hq-h1-accent { color: var(--teal); }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-hero-description { max-width: 500px; margin: clamp(14px, 2.4vh, 24px) 0 clamp(16px, 2.6vh, 26px); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; text-align: left; }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-hero-actions { justify-content: flex-start; margin: 0; }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-action.primary { border-radius: 999px; padding: 16px 28px; font-size: 16px; }
:root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-walkthrough-trigger { margin: 10px 0 0 -12px; }

/* Chapters */
.hq-rail { display: flex; gap: 6px; margin-bottom: 14px; max-width: 360px; }
.hq-rail i { flex: 1; height: 3px; border-radius: 3px; background: var(--border); transition: background .3s; }
.hq-story[data-stage="0"] .hq-rail i:nth-child(1), .hq-story[data-stage="1"] .hq-rail i:nth-child(-n+2), .hq-story[data-stage="2"] .hq-rail i:nth-child(-n+3), .hq-story[data-stage="3"] .hq-rail i { background: var(--accent-text); }
.hq-story-copy { list-style: none; margin: 0; padding: 0; display: grid; }
.hq-story-copy > li { margin: 0 0 22px; }
.hq-story.is-live .hq-story-copy > li { grid-area: 1 / 1; }
:root:not(#_):not(#__) #dashio-embed .hq-story-copy h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.12; letter-spacing: -.03em; margin: 4px 0 8px; }
.hq-story-copy p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 400px; }
.hq-story-copy .hq-chapter { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-text); }
.hq-story-steps { display: flex; flex-wrap: wrap; gap: 6px; }
:root:not(#_):not(#__) #dashio-embed .hq-story-steps button { min-height: 44px; padding: 8px 14px; border-radius: 999px; background: transparent; color: var(--text); border: 1px solid var(--border); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; }
:root:not(#_):not(#__) #dashio-embed .hq-story-steps button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.hq-story-hint { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 400px; }

/* Live behaviour: one chapter at a time; wide screens are scroll-linked. */
.hq-story.is-live .hq-story-copy > li { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; margin: 0; }
.hq-story.is-live .hq-story-copy > li.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hq-story.is-live .hq-story-copy { min-height: 112px; margin-bottom: 10px; }
.hq-story.is-live[data-mode="scroll"] .hq-story-hint { display: none; }
.hq-story.is-live[data-mode="scroll"] { height: 330vh; }
.hq-story.is-live[data-mode="scroll"] .hq-stage { position: sticky; top: 82px; height: calc(100vh - 82px); min-height: 520px; padding: 0; }
.hq-story.is-live[data-mode="manual"] { --t: 0; --a: 0; --n: 0; transition: --t 1.1s cubic-bezier(.3,.7,.2,1), --a .7s ease .55s, --n .7s ease 1.1s; }
.hq-story.is-live[data-mode="manual"] .hq-scene { cursor: pointer; }

/* ---- Sculpture -------------------------------------------------------- */
.hq-halo { position: absolute; width: 92%; aspect-ratio: 1; left: 4%; top: 50%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--halo), transparent 68%); pointer-events: none; }
.hq-halo::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px solid var(--halo-ring); opacity: calc(.25 + var(--a) * .6); transform: scale(calc(.9 + var(--t) * .1)); }
.hq-scene { --sh: 76; --fs: 1.8cqw; container-type: inline-size; position: relative; width: min(100%, calc((100vh - 130px) * 1.2)); aspect-ratio: 100 / 84; perspective: 135cqw; perspective-origin: 50% 35%; }
.hq-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--py, 0) * -1deg)) rotateY(calc(var(--px, 0) * 1deg)); transition: transform .3s ease-out; }
.hq-rig { position: absolute; inset: 4cqw 0 0 0; transform-style: preserve-3d;
  transform: rotateX(calc(27deg - var(--t) * 17deg)) rotateY(calc(-32deg + var(--t) * 19deg)) rotateZ(calc(5deg - var(--t) * 5deg)) scale(calc(.88 + var(--t) * .12)); }
.hq-ground { position: absolute; left: 6%; right: -4%; bottom: -2%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--shadow-rgb), calc(.34 - var(--t) * .12)), transparent); filter: blur(10px); transform: scaleX(calc(.8 + var(--t) * .2)); }

.hq-slab { position: absolute; left: 0; top: 0; width: 100cqw; height: calc(var(--sh) * 1cqw); transform-style: preserve-3d; opacity: calc(.14 + var(--t) * .86); }
.hq-face { position: absolute; inset: 0; border-radius: 2.2cqw; background: linear-gradient(160deg, var(--slab), color-mix(in srgb, var(--slab) 80%, var(--teal))); border: 1px solid var(--sheet-edge); box-shadow: 0 5cqw 9cqw rgba(var(--shadow-rgb), .3); overflow: hidden; }
.hq-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent calc(var(--t) * 130% - 44%), var(--sweep) calc(var(--t) * 130% - 22%), transparent calc(var(--t) * 130%)); }
.hq-edge { position: absolute; opacity: clamp(0, calc(var(--t) * 4 - 3), 1); background: linear-gradient(var(--edge-a), var(--edge-b)); }
.hq-edge-r { left: 100%; top: 0; width: 3.4cqw; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); border-radius: 0 1cqw 1cqw 0; }
.hq-edge-b { left: 0; top: 100%; width: 100%; height: 3.4cqw; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(90deg, var(--edge-a), var(--edge-b)); border-radius: 0 0 1cqw 1cqw; }
.hq-top-title { position: absolute; left: 4cqw; top: 3.2cqw; font-size: max(10px, 1.9cqw); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.hq-top-pill { position: absolute; right: 3cqw; top: 2.2cqw; padding: .7cqw 2cqw; border-radius: 99px; background: var(--ochre); color: #16343B; font-size: max(10px, 1.7cqw); font-weight: 700; opacity: var(--a); }

/* Fragments: each one is both a loose piece and, once assembled, a tile of the dashboard. */
.frag, .scrap { position: absolute; box-sizing: border-box; color: var(--text); background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 1.6cqw; overflow: hidden; }
.frag { --tt: clamp(0, calc(var(--t) * 1.4 - var(--d, 0)), 1); --lift: 1.4; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); font-size: var(--fs);
  box-shadow: 0 calc(.7cqw + (1 - var(--tt)) * 2.6cqw) calc(1.8cqw + (1 - var(--tt)) * 4cqw) rgba(var(--shadow-rgb), calc(.16 + (1 - var(--tt)) * .2));
  transform: translate3d(calc(var(--dx) * (1 - var(--tt)) * 1cqw), calc(var(--dy) * (1 - var(--tt)) * 1cqw), calc((var(--dz) * (1 - var(--tt)) + var(--lift) * var(--tt)) * 1cqw))
    rotateX(calc(var(--rx) * (1 - var(--tt)) * 1deg)) rotateY(calc(var(--ry) * (1 - var(--tt)) * 1deg)) rotateZ(calc(var(--rz) * (1 - var(--tt)) * 1deg)); }
.f-p1 { --x: 3; --y: 13; --w: 46; --h: 22; --dx: -10; --dy: -18; --dz: 26; --rx: 10; --ry: -22; --rz: -12; --d: 0; }
.f-p2 { --x: 3; --y: 37; --w: 22; --h: 22; --dx: -12; --dy: 12; --dz: -8; --rx: -18; --ry: 30; --rz: 15; --d: .08; }
.f-p3 { --x: 27; --y: 37; --w: 22; --h: 22; --dx: -6; --dy: 26; --dz: 22; --rx: 8; --ry: -20; --rz: -18; --d: .16; }
.f-b1 { --x: 51; --y: 13; --w: 46; --h: 22; --dx: 14; --dy: -16; --dz: 14; --rx: 12; --ry: 48; --rz: 11; --d: .04; }
.f-b2 { --x: 51; --y: 37; --w: 26; --h: 22; --dx: 12; --dy: 22; --dz: 34; --rx: -14; --ry: -24; --rz: -14; --d: .12; }
.f-b3 { --x: 79; --y: 37; --w: 18; --h: 22; --dx: 16; --dy: 4; --dz: -14; --rx: 10; --ry: 40; --rz: 17; --d: .2; }
.f-b2 { --lift: calc(1.4 + var(--a) * 2.4); box-shadow: 0 .9cqw 2.2cqw rgba(var(--shadow-rgb), .2), 0 0 0 calc(var(--a) * .6cqw) var(--ochre), 0 0 calc(var(--a) * 7cqw) rgba(201, 154, 69, calc(var(--a) * .5)); }
.tag { display: block; padding: .9cqw 1.8cqw; font-size: max(9px, 1.5cqw); letter-spacing: .05em; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--band-life); color: var(--on-band); }
[data-k="work"] > .tag { background: var(--band-work); }
.body { position: relative; z-index: 1; background: var(--sheet); padding: 1.4cqw 1.8cqw; display: grid; gap: .8cqw; align-content: start; }
.body p, .body small { margin: 0; font-size: max(9.5px, 1.6cqw); line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.body small { color: var(--muted); }
.big { font-size: max(13px, 3cqw); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; height: 8cqw; align-items: end; }
.wk span { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; position: relative; }
.wk i { grid-row: 2; font-style: normal; font-size: max(8.5px, 1.4cqw); color: var(--muted); font-weight: 600; }
.wk u { grid-row: 1; align-self: end; width: 100%; height: var(--h); border-radius: .6cqw; background: var(--teal); text-decoration: none; }
[data-k="work"] .wk u { background: var(--band-work); border: 1px solid var(--sheet-edge); }
.wk .on i { color: var(--text); }
.ring { grid-template-columns: 1fr; justify-items: center; gap: .4cqw; }
.ring svg { width: 11cqw; height: 11cqw; color: var(--text); }
.ring .seg { stroke: var(--teal); }
.bar { display: grid; grid-template-columns: 7cqw 1fr; align-items: center; gap: 1cqw; font-size: max(8.5px, 1.4cqw); color: var(--muted); }
.bar em { display: block; height: .9cqw; width: var(--w); border-radius: 1cqw; background: var(--teal); }
.body .row { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: .5cqw 0; border-top: 1px solid var(--border); }
.body .row em { font-style: normal; color: var(--muted); }
.body .row.hot { color: var(--text); font-weight: 700; }
.body .row.hot em { color: var(--text); background: color-mix(in srgb, var(--ochre) 38%, transparent); border-radius: 99px; padding: 0 1.2cqw; }
.d { display: inline-flex; gap: .5cqw; }
.d s { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--band-work); display: block; }

.scrap { padding: 1.3cqw 2cqw; font-size: max(10px, 1.7cqw); border-radius: .8cqw; opacity: calc(1 - var(--t) * 2); box-shadow: 0 1.4cqw 3cqw rgba(var(--shadow-rgb), .24); border-left: .9cqw solid var(--teal);
  transform: translate3d(0, 0, calc(var(--sz) * (1 - var(--t)) * 1cqw)) rotateZ(calc(var(--sr) * 1deg)) scale(calc(1 - var(--t) * .3)); }
.scrap[data-k="work"] { border-left-color: var(--band-work); }
.scrap b { font-weight: 600; white-space: nowrap; }
.s1 { left: 68%; top: 71%; --sz: 30; --sr: 7; }
.s2 { left: 2%; top: 3%; --sz: 36; --sr: -9; }
.s3 { left: 38%; top: 76%; --sz: 18; --sr: -4; }
.s4 { left: 72%; top: 3%; --sz: 26; --sr: 10; }

.hq-next { position: absolute; left: 3cqw; top: 62cqw; width: 94cqw; height: 10cqw; box-sizing: border-box; padding: 0 3cqw; border-radius: 99px; background: var(--ochre); color: #16343B; display: flex; align-items: center; gap: 2cqw; opacity: var(--n); font-size: var(--fs);
  box-shadow: 0 3cqw 6cqw rgba(var(--shadow-rgb), .35); transform: translate3d(0, calc((1 - var(--n)) * 5cqw), calc(var(--n) * 8cqw)); }
.hq-next i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #16343B; flex: none; box-shadow: 0 0 0 calc(var(--n) * .9cqw) rgba(22, 52, 59, .18); }
.hq-next span { font-size: max(9px, 1.5cqw); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.hq-next strong { font-size: max(12px, 2.5cqw); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:not(#_):not(#__) #dashio-embed .hq-next strong, :root:not(#_):not(#__) #dashio-embed .hq-next span { color: #16343B; }

/* ---- Lower page: one quiet band ---------------------------------------- */
.hq-duo { padding: 36px 0 18px; border-top: 1px solid var(--border); display: grid; grid-template-columns: .7fr 1.3fr; column-gap: clamp(20px, 5vw, 72px); align-items: start; }
:root:not(#_):not(#__) #dashio-embed .hq-duo h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -.04em; margin: 0; }
.hq-duo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
:root:not(#_):not(#__) #dashio-embed .hq-duo h3 { font-size: 15px; margin: 0 0 6px; letter-spacing: -.01em; }
.hq-duo-cols p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.hq-both-note { grid-column: 2; margin: 18px 0 0; max-width: 640px; color: var(--muted); font-size: 13px; line-height: 1.6; }
:root:not(#_):not(#__) #dashio-embed .hq-package-note { text-align: left; margin-left: 0; margin-top: 8px; }

/* ---- Phones / narrow: portrait centerpiece, tap steps ------------------ */
@media (max-width: 800px) {
  .hq-stage { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 22px; }
  .hq-hero-copy, .hq-chapters, .hq-scene-wrap { grid-column: 1; grid-row: auto; }
  .hq-scene-wrap { margin-right: 0; }
  /* Phone order: headline, main action, centerpiece, then the supporting copy. */
  .hq-stage { row-gap: 18px; }
  .hq-hero-copy { display: contents; }
  .hq-eyebrow { order: 1; margin: 0; } :root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-eyebrow { margin: 0; }
  :root:not(#_):not(#__) #dashio-embed .hq-hero-copy h1 { order: 2; }
  .hq-hero-actions { order: 3; }
  .hq-scene-wrap { order: 4; overflow: clip; }
  :root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-hero-description { order: 5; margin: 0; }
  .hq-walkthrough-trigger { order: 6; }
  :root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-walkthrough-trigger { justify-self: start; margin: 0 0 0 -12px; }
  .hq-chapters { order: 7; }
  :root:not(#_):not(#__) #dashio-embed .hq-hero-copy h1 { font-size: clamp(40px, 12.4vw, 62px); }
  :root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-hero-description { font-size: 17px; margin: 16px 0 20px; }
  .hq-scene { --sh: 126; --fs: 3.1cqw; width: 100%; aspect-ratio: 100 / 134; }
  .f-p1 { --x: 3; --y: 13; --w: 94; --h: 21; }
  .f-p2 { --x: 3; --y: 36; --w: 46; --h: 25; }
  .f-p3 { --x: 51; --y: 36; --w: 46; --h: 25; }
  .f-b1 { --x: 3; --y: 64; --w: 94; --h: 21; }
  .f-b2 { --x: 3; --y: 87; --w: 46; --h: 25; }
  .f-b3 { --x: 51; --y: 87; --w: 46; --h: 25; }
  .hq-next { top: 114cqw; height: 9cqw; }
  .tag { font-size: max(10px, 2.9cqw); } .body p, .body small, .bar { font-size: max(10.5px, 3cqw); } .big { font-size: 6cqw; } .wk i { font-size: 2.6cqw; } .wk { height: 7cqw; } .ring svg { width: 13cqw; height: 13cqw; } .bar { grid-template-columns: 14cqw 1fr; } .bar em { height: 1.4cqw; }
  .hq-top-title { font-size: 3cqw; top: 3.4cqw; } .hq-top-pill { font-size: 2.8cqw; top: 2.6cqw; } .hq-next span { font-size: 2.4cqw; } .hq-next strong { font-size: 3.9cqw; }
  .scrap { font-size: 3cqw; }
  .s1 { top: 62%; } .s3 { top: 72%; }
  .hq-duo { grid-template-columns: 1fr; row-gap: 14px; }
  .hq-duo-cols { grid-template-columns: 1fr; gap: 16px; }
  .hq-both-note { grid-column: 1; }
}
@media (max-height: 800px) and (min-width: 801px) {
  .hq-story-copy p { display: none; }
  .hq-story.is-live .hq-story-copy { min-height: 64px; }
}
@media (max-height: 700px) and (min-width: 801px) {
  :root:not(#_):not(#__) #dashio-embed .hq-hero-copy .hq-hero-description { display: none; }
}

/* ---- Reduced motion: no scroll choreography, no transitions ------------ */
@media (prefers-reduced-motion: reduce) {
  .hq-story, .hq-story *, .hq-tilt { transition: none !important; }
  .hq-tilt { transform: none; }
}