/* Consultancy page: shares ../style.css (nav, buttons, reveal, sheets' look); everything here is specific to it. */
body.cons { background: #05070f; }

/* sheets, as on the main page */
.chero, .csec { position: relative; }
.csec { margin-top: -48px; border-radius: 48px 48px 0 0; padding: calc(var(--pt, 120px) + 48px) var(--gutter) var(--pb, 120px); --pt: clamp(80px, 11vw, 140px); --pb: clamp(80px, 11vw, 140px); overflow: hidden; isolation: isolate; }
.csec .head { padding: 0; }
.csec.light { background: #f5f5f7; color: var(--ink); box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, .3); }
.csec.white { background: #fff; color: var(--ink); box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, .18); }
.csec.grey { background: #f5f5f7; color: var(--ink); box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, .18); }
.csec.dark { background: #05070f; color: #fff; }
.csec.light .kicker, .csec.white .kicker, .csec.grey .kicker { color: var(--blue); }
.csec.light .sub, .csec.white .sub, .csec.grey .sub { color: var(--mute); }
.csec.dark .kicker { color: #64d2ff; }
footer { position: relative; margin-top: -48px; border-radius: 48px 48px 0 0; padding-top: 82px; }

/* hero */
.chero { min-height: 100svh; padding: 118px var(--gutter) 150px; text-align: center; color: #fff; overflow: hidden; isolation: isolate; background: #05070f; }
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(48% 38% at 18% 8%, rgba(10, 132, 255, .38), transparent 70%),
  radial-gradient(44% 36% at 84% 2%, rgba(191, 90, 242, .30), transparent 70%),
  radial-gradient(60% 40% at 50% 100%, rgba(100, 210, 255, .16), transparent 70%); animation: sway 18s ease-in-out infinite alternate; }
@keyframes sway { to { transform: translate3d(0, 20px, 0) scale(1.06); } }
.chero .eyebrow { background: rgba(255, 255, 255, .1); }
.chero h1 { margin: 22px auto 0; max-width: 12em; }
.chero .lede { max-width: 36em; }
.js .chero .eyebrow, .js .chero h1, .js .chero .lede, .js .chero .cta, .js .chero .fan { animation: rise 1.3s var(--ease) both; }
.js .chero h1 { animation-delay: .1s; } .js .chero .lede { animation-delay: .22s; } .js .chero .cta { animation-delay: .34s; } .js .chero .fan { animation-delay: .5s; }
.fan { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1060px; }
.fan svg { width: 100%; height: auto; display: block; overflow: visible; }
.fan figcaption { margin-top: 12px; font-size: 14px; color: #8e8e93; }
.fan .axes line { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.fan .axes .now { stroke: rgba(255, 255, 255, .28); stroke-dasharray: 3 5; }
.fan .axes text { fill: #8e8e93; font: 500 13px var(--sans); letter-spacing: 0; }

/* horizon bar */
.horizon { max-width: 980px; margin: clamp(48px, 6vw, 80px) auto 0; }
.horizon .bar { display: grid; grid-template-columns: 1fr 3.3fr; gap: 6px; }
.horizon .bar > div { border-radius: 22px; padding: 26px 26px 24px; min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; }
.horizon b { font-size: clamp(18px, 2vw, 23px); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.horizon span { margin-top: 6px; font-size: 16px; opacity: .8; }
.seg-a { background: #e5e5ea; color: #3a3a3c; }
.seg-b { color: #fff; background: linear-gradient(100deg, #0a84ff, #5e5ce6 55%, #bf5af2); box-shadow: 0 24px 50px -22px rgba(94, 92, 230, .7); }
.horizon .ticks { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr 1.1fr; margin-top: 14px; font-size: 14px; color: var(--mute); text-align: left; }
.horizon .ticks span:last-child { text-align: right; }
@media (max-width: 640px) { .horizon .bar { grid-template-columns: 1fr; } .horizon .ticks { display: none; } }

/* track record */
.story { max-width: 880px; margin: clamp(48px, 6vw, 84px) auto 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; }
.node { position: relative; width: clamp(190px, 27vw, 280px); padding: 26px 26px 26px; border-radius: 28px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); text-align: left; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.node i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #64d2ff; box-shadow: 0 0 18px #64d2ff; margin-bottom: 30px; }
.node b { display: block; font-size: clamp(30px, 4vw, 44px); line-height: 1; font-weight: 650; letter-spacing: -.035em; }
.node span { display: block; margin-top: 10px; font-size: 17px; line-height: 1.35; color: #c7c7cc; }
.node.hot i { background: #ff9f5a; box-shadow: 0 0 22px #ff9f5a; }
.line { height: 2px; margin: 0 6px; background: linear-gradient(90deg, #64d2ff, #e8cf8c 55%, #ff9f5a); border-radius: 2px; opacity: .85; }
@media (max-width: 700px) { .story { grid-template-columns: 1fr; justify-items: center; gap: 0; } .line { width: 2px; height: 44px; margin: 6px 0; background: linear-gradient(#64d2ff, #ff9f5a); } .node { width: min(100%, 360px); } }

/* method tiles */
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: clamp(44px, 6vw, 80px) auto 0; }
.ctile { background: #fff; border-radius: 28px; padding: 28px 26px 32px; min-height: 280px; display: flex; flex-direction: column; text-align: left; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ctile:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .25); }
.ctile h3 { margin-top: 56px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.ctile p { margin-top: 10px; font-size: 17px; line-height: 1.38; color: var(--mute); }
@media (max-width: 860px) { .cgrid { grid-template-columns: 1fr; } .ctile { min-height: 0; } .ctile h3 { margin-top: 36px; } }

/* close */
.csec.end { text-align: center; padding-bottom: clamp(110px, 14vw, 180px); }
.csec.end .aurora { z-index: -1; }
.csec .btn.primary { background: #fff; color: #000; }

@media (max-width: 720px) {
  .csec, footer { margin-top: -32px; border-radius: 32px 32px 0 0; padding-top: calc(var(--pt, 80px) + 32px); }
  footer { padding-top: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .js .chero .eyebrow, .js .chero h1, .js .chero .lede, .js .chero .cta, .js .chero .fan { animation: none; }
}