/* Invoxity homepage (index-new.html): a particle field that morphs from section
   to section, a chapter rail, a sticky product list, a pinned horizontal method
   and tabbed industries. Loaded after services.css, whose tokens it uses. */

/* ---------------- tones: every section is dark, light or grey ---------------- */
.tone-dark { --t-bg: #0b0b0b; --t-ink: #f3f3f3; --t-ink2: #a9a9a9; --t-ink3: #7d7d7d; --t-line: #2a2a2a; --t-panel: #151515; --t-accent-text: #ff8d74; }
.tone-light { --t-bg: var(--bg); --t-ink: var(--ink); --t-ink2: var(--ink-2); --t-ink3: var(--ink-3); --t-line: var(--line); --t-panel: var(--panel); --t-accent-text: var(--accent-text); }
.tone-grey { --t-bg: #e7e7e4; --t-ink: #1d1d1d; --t-ink2: #555555; --t-ink3: #7a7a7a; --t-line: #cfcfcb; --t-panel: #f3f3f1; --t-accent-text: #c2461f; }
[data-bs-theme="dark"] .tone-grey { --t-bg: #1c1c1c; --t-ink: #f0f0f0; --t-ink2: #a8a8a8; --t-ink3: #8a8a8a; --t-line: #333333; --t-panel: #242424; --t-accent-text: #ff8d74; }
.tone-dark, .tone-light, .tone-grey { position: relative; background: var(--t-bg); color: var(--t-ink); }
/* With the particle field running, sections go transparent and the page colour follows the section in view. */
html.fx .tone-dark, html.fx .tone-light, html.fx .tone-grey { background: transparent; }
html.fx body { transition: background-color .7s ease; }
#px { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main.home { position: relative; z-index: 1; }
.ivx-f { position: relative; z-index: 2; }

.mono-label { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-ink3); }
.mono-label b { font-weight: 500; color: var(--accent); }
.h-sec { padding: 120px var(--pad) 110px; }
.h-h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(40px, 6vw, 92px); text-wrap: balance; }
.h-h2 em { font-style: normal; color: var(--accent); }
.h-lead { margin-top: 22px; max-width: 50ch; font-size: 18px; color: var(--t-ink2); }

/* The side menu is the shared one (site-header/rail.css); home.js marks the chapter in view. */

/* ---------------- hero ---------------- */
.h-hero { min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--pad) 56px; text-align: center; }
@media (max-width: 1199.98px) { .h-hero { min-height: calc(100svh - 64px); } }
.h-hero h1 { margin-top: 18px; font-family: var(--display); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-size: clamp(44px, 8vw, 124px); }
.h-hero h1 > span { display: block; }
.h-hero .rot { color: var(--accent); }
.h-hero .rot-word { color: inherit; }
.h-hero .sub { margin: 24px auto 0; max-width: 56ch; font-size: clamp(16px, 1.5vw, 19px); color: var(--t-ink2); }
.h-hero .row { margin-top: 30px; justify-content: center; }
.h-hero .btn.white { background: #ffffff; color: #0b0b0b; }
.h-hero .rot-nav button { background: rgb(255 255 255 / .04); border-color: #333; color: #bdbdbd; }
.h-hero .rot-nav button:hover { color: #fff; border-color: #555; }
.h-hero .rot-nav button[aria-current="true"] { color: #fff; border-color: var(--accent); }
.h-facts { margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--t-ink3); }
.h-facts b { color: var(--t-ink); font-weight: 500; }
.scroll-cue { margin: 30px auto 0; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--accent), transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* ---------------- products: sticky list + scrolling panels ---------------- */
.hp-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hp-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } }
.hp-sticky { position: sticky; top: 120px; }
.hp-list { margin: 28px 0 0; padding: 0; list-style: none; }
.hp-list button { display: block; width: 100%; padding: 4px 0; background: none; border: 0; text-align: left; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 3.8vw, 58px); letter-spacing: -.04em; line-height: 1.12; color: var(--t-ink3); opacity: .45; transition: color .35s, opacity .35s, transform .35s; }
.hp-list button:hover { opacity: .8; }
.hp-list button[aria-current="true"] { color: var(--t-ink); opacity: 1; transform: translateX(10px); }
.hp-list button[aria-current="true"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 14px; background: var(--accent); vertical-align: .2em; }
.hp-note { margin-top: 26px; max-width: 40ch; color: var(--t-ink2); }
@media (max-width: 999px) { .hp-list, .hp-note { display: none; } .hp-sticky { position: static; } }
.hp-panels { display: grid; gap: 28px; }
.hp-panel { min-height: 72vh; display: grid; align-content: center; gap: 18px; padding: 36px; background: var(--t-panel); border: 1px solid var(--t-line); }
@media (max-width: 999px) { .hp-panel { min-height: 0; padding: 24px 20px; } }
.hp-panel small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-accent-text); }
/* The example cards are always white, so their label keeps the darker coral whatever the section's tone. */
.hp-panel .pv-card small { color: #c2461f; }
.hp-panel h3 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.035em; line-height: 1.05; }
.hp-panel p { color: var(--t-ink2); font-size: 16.5px; max-width: 52ch; }
.hp-panel .vis { display: grid; place-items: center; padding: 28px 12px; background: var(--t-bg); border: 1px solid var(--t-line); background-image: radial-gradient(var(--t-line) 1.2px, transparent 1.5px); background-size: 24px 24px; }
.hp-panel .go { font-weight: 600; color: var(--t-accent-text); }
.hp-panel .go:hover { text-decoration: underline; }

/* ---------------- the question ---------------- */
.h-audit { text-align: center; }
.h-audit .pick-grid { margin-top: 56px; text-align: left; }
.typed { display: block; min-height: 1.3em; margin-top: 18px; font-family: var(--mono); font-size: clamp(16px, 2vw, 24px); color: var(--accent); }
.typed i { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--accent); animation: blink 1s steps(2, start) infinite; }
.pick-sec.h-audit { background: var(--t-bg); }
html.fx .pick-sec.h-audit { background: transparent; }

/* ---------------- services rows ---------------- */
.svc-rows { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--t-line); }
@media (min-width: 900px) { .svc-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.svc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 4px 12px; align-items: baseline; padding: 24px 6px; border-bottom: 1px solid var(--t-line); transition: padding .25s, background .25s; }
.svc-row .n { font-family: var(--mono); font-size: 12px; color: var(--t-ink3); }
.svc-row b { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
.svc-row .d { grid-column: 2; color: var(--t-ink2); font-size: 15px; }
.svc-row i { grid-column: 3; grid-row: 1; font-style: normal; color: var(--t-accent-text); transition: transform .25s; }
.svc-row:hover { padding-left: 16px; }
.svc-row:hover i { transform: translateX(6px); }
.svc-row:hover b { color: var(--t-accent-text); }

/* ---------------- method: pinned, scrolls sideways ---------------- */
.h-method { position: relative; }
.hm-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 40px; }
.hm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 0 var(--pad); }
.hm-steps { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; }
.hm-steps span { color: var(--t-ink3); transition: color .3s; }
.hm-steps span.on { color: var(--accent); }
.hm-steps em { width: 26px; height: 1px; background: var(--t-line); }
.hm-strip { display: flex; gap: 6vw; padding: 0 var(--pad); margin-top: 40px; will-change: transform; }
.hm-ch { position: relative; isolation: isolate; flex: none; width: min(72vw, 880px); padding: 20px 0 10px; }
.hm-num { position: absolute; left: -.04em; top: -.42em; z-index: -1; font-family: var(--mono); font-weight: 700; font-size: clamp(160px, 22vw, 340px); line-height: 1; letter-spacing: -.06em; color: var(--t-ink); opacity: .06; }
.hm-ch h2 { font-family: var(--display); font-weight: 600; font-size: clamp(56px, 8vw, 132px); letter-spacing: -.045em; line-height: .95; }
.hm-ch h2 em { font-style: normal; color: var(--accent); }
.hm-ch .q { margin-top: 26px; max-width: 34ch; font-family: var(--mono); font-size: 16px; line-height: 1.6; color: var(--t-ink); }
.hm-ch ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 46ch; }
.hm-ch li { display: flex; gap: 12px; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; color: var(--t-ink2); }
.hm-ch li::before { content: "—"; color: var(--t-ink3); }
@media (max-width: 899px) {
  .h-method { height: auto !important; }
  .hm-pin { position: static; height: auto; padding: 96px 0; }
  .hm-strip { flex-direction: column; gap: 64px; transform: none !important; }
  .hm-ch { width: 100%; }
}

/* ---------------- industries: tabs ---------------- */
.hi-tabs { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 6px; }
.hi-tabs button { height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--t-line); color: var(--t-ink2); font: 600 14.5px var(--body); transition: all .2s; }
.hi-tabs button:hover { color: var(--t-ink); border-color: var(--t-ink3); }
.hi-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #141414; }
.hi-panel { margin-top: 18px; display: grid; gap: 28px; padding: 40px; background: var(--t-panel); border: 1px solid var(--t-line); grid-template-columns: minmax(0, 1fr); animation: panel-in .45s cubic-bezier(.2, .7, .2, 1); }
.hi-panel[hidden] { display: none; }
@media (min-width: 960px) { .hi-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 56px; } }
@media (max-width: 700px) { .hi-panel { padding: 24px 20px; } }
.hi-panel h3 { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 4.4vw, 64px); letter-spacing: -.04em; line-height: 1; }
.hi-panel p { margin-top: 14px; color: var(--t-ink2); font-size: 17px; max-width: 44ch; }
.hi-panel .go { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--t-accent-text); }
.hi-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: st; }
.hi-flow li { counter-increment: st; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--t-line); font-weight: 600; opacity: 0; transform: translateX(14px); animation: flow-in .5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * .09s); }
.hi-flow li::before { content: counter(st, decimal-leading-zero); font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
@keyframes flow-in { to { opacity: 1; transform: none; } }

/* ---------------- offices & close ---------------- */
.h-offices .office { background: var(--t-panel); border-color: var(--t-line); }
.h-close { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 140px var(--pad); }
/* The particles form the Invoxity mark beside the text (wide screens) or above it (narrow). */
@media (min-width: 900px) { .h-close { align-items: flex-start; text-align: left; } .h-close > * { max-width: 52%; } .h-close .row { justify-content: flex-start; } }
@media (max-width: 899px) { .h-close { padding-top: 46vh; } }
.h-close h2 { margin-top: 20px; font-family: var(--display); font-weight: 600; font-size: clamp(46px, 7.4vw, 124px); letter-spacing: -.045em; line-height: .98; max-width: 14ch; text-wrap: balance; }
.h-close h2 em { font-style: normal; color: var(--accent); }
.h-close p { margin-top: 24px; color: var(--t-ink2); font-size: 18px; max-width: 46ch; }
.h-close .row { margin-top: 34px; justify-content: center; }
.h-close .btn.white { background: #ffffff; color: #0b0b0b; }

@media (prefers-reduced-motion: reduce) { .scroll-cue, .hi-flow li { animation: none; opacity: 1; transform: none; } }