/* The engravings on the business page (js/engrave/business.js): a locked gate for why own it, the bridge in place of
   the old line drawing, an emblem for each step of raising the arch, and a tool for each member of the crew. */

/* business.js marks the page .biz when it can engrave; without it the page keeps its plain layout. Every engraved
   canvas waits unseen until it is drawn and in view, then comes up from the top left, like a print lifted off the
   plate */
.biz-cv { display: none; }
.biz .biz-cv { display: block; opacity: 0; }
.biz .biz-cv.biz-on {
  opacity: 1;
  /* a soft diagonal edge, fully off the canvas at the start and fully past it at the end */
  -webkit-mask-image: linear-gradient(135deg, #000 44%, transparent 56%); mask-image: linear-gradient(135deg, #000 44%, transparent 56%);
  -webkit-mask-size: 240% 240%; mask-size: 240% 240%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: biz-pull 1.6s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}
.biz .biz-cv.biz-done, .reduced .biz-cv.biz-on { -webkit-mask-image: none; mask-image: none; animation: none; }
.biz .biz-cv.biz-fail { display: none; }
@keyframes biz-pull {
  from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.biz .biz-emb { width: min(100%, 250px); aspect-ratio: 240 / 200; height: auto; margin: 0 auto 2px; }

/* our crew: a tool over each step; where the steps stack, beside it */
.biz .biz-tool { width: min(100%, 124px); aspect-ratio: 1; height: auto; margin: -6px 0 -2px -8px; }
@media (max-width: 980px) {
  .biz .c-loop-steps li { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-content: center; }
  .biz .c-loop-steps li > .biz-tool { grid-column: 1; grid-row: 1 / span 2; width: 84px; margin: -8px 0 -8px -6px; align-self: center; }
  .biz .c-loop-steps li > b, .biz .c-loop-steps li > span { grid-column: 2; }
}

/* what we build: the engraved bridge takes the line drawing's place; the drawing stands in until the engraving is up */
.c-bridge { position: relative; }
.biz .biz-bridge-cv { width: 100%; aspect-ratio: 1200 / 520; height: auto; }
.biz .c-bridge svg.plate { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.2s ease; }
.biz .c-bridge.biz-eng svg.plate { opacity: 0; }
.biz .c-bridge.biz-gone svg.plate { display: none; }
/* on a phone the drawing was left out; the engraving comes back, edge to edge, showing the middle of the river */
@media (max-width: 560px) {
  .biz .c-bridge { display: block; margin-inline: calc(var(--gutter) * -1);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .biz .biz-bridge-cv { aspect-ratio: 700 / 440; }
  .biz .c-bridge svg.plate, .biz .c-bridge.biz-nobridge { display: none; }
}

/* why own it: a locked gate and a toll post, in the two cells the grid of three leaves empty beside the last card;
   where the cards pair up or stack, a band under them (on a phone, just the gate and the post) */
.biz-gate { display: none; margin: 0; }
.biz-gate-host { position: relative; }
.biz .biz-gate { display: block; margin-top: clamp(20px, 4vh, 36px); pointer-events: none; }
.biz .biz-gate-cv { width: 100%; aspect-ratio: 720 / 200; height: auto; }
.biz .biz-gate.biz-fit { position: absolute; margin: 0; }
.biz .biz-gate.biz-fit .biz-gate-cv { height: 100%; aspect-ratio: auto; }
@media (max-width: 560px) { .biz .biz-gate-cv { aspect-ratio: 420 / 200; } }


/* ---------- how we work: the path. Beside the six steps, one arch is built as you read: surveyed, founded, raised,
   and at the last step its keystone drops in (js/consulting.js sets the stage). On a phone each step carries its
   own engraving instead. ---------- */
.c-path { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.c-path-fig { position: sticky; top: clamp(92px, 15vh, 136px); margin: 0; display: grid; gap: 18px; justify-items: center; }
.c-path-arch { position: relative; width: 100%; max-width: 500px; aspect-ratio: 6 / 5; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.c-path-layer { position: absolute; inset: 6%; opacity: 0; transition: opacity 0.9s var(--ease); }
.c-path-layer.is-on { opacity: 1; }
.biz .c-path-cv { width: 100%; height: 100%; }
.c-path-key { display: none; }
.c-path-cap { min-height: 1.5em; font: 500 0.92rem var(--f-body); letter-spacing: 0.01em; color: var(--ink-soft); text-align: center; transition: opacity 0.4s ease; }
.c-path-cap.is-swap { opacity: 0; }

.c-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(30px, 3vw, 44px); }
/* the path the steps hang on, and how far along it you are */
.c-steps::before, .c-steps::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; }
.c-steps::before { background: var(--rule-night); }
.c-steps::after { background: var(--white); transform-origin: top; transform: scaleY(var(--path, 0)); }
.c-step { position: relative; display: grid; gap: 14px; align-content: start; padding-block: clamp(34px, 8vh, 88px); border-top: 1px solid var(--rule-night); opacity: 0.42; transition: opacity 0.6s var(--ease); }
.c-step:first-child { border-top: 0; padding-top: 8px; }
.c-step.is-past { opacity: 0.78; }
.c-step.is-active { opacity: 1; }
/* its stone on the path */
.c-step::before { content: ""; position: absolute; top: calc(clamp(34px, 8vh, 88px) + 0.55rem); left: calc(clamp(30px, 3vw, 44px) * -1 - 5px); width: 11px; height: 11px;
  background: var(--arc); box-shadow: inset 0 0 0 1px var(--white); transform: rotate(45deg); transition: background 0.4s ease; }
.c-step:first-child::before { top: calc(8px + 0.55rem); }
.c-step.is-active::before, .c-step.is-past::before { background: var(--white); }
.c-step-num { font: 400 clamp(1.3rem, 1.7vw, 1.6rem)/1 var(--f-display); letter-spacing: 0.04em; color: var(--ink-faint); }
.c-step h3 { font: 400 clamp(2rem, 3vw, 2.8rem)/1.02 var(--f-display); text-transform: none; }
.c-step p { max-width: 34em; color: var(--ink-soft); }
.c-step .c-out { max-width: 34em; }
.biz .c-step-emb { display: none; }
.c-path-note { max-width: 44em; margin: clamp(26px, 4vh, 44px) 0 0; font-size: 0.95rem; color: var(--ink-faint); }

@media (max-width: 980px) {
  .c-path { grid-template-columns: minmax(0, 1fr); }
  .c-path-fig { display: none; }
  .c-step { opacity: 1; }
  .biz .c-step-emb { display: block; width: min(100%, 300px); aspect-ratio: 240 / 200; height: auto; margin: 2px 0 0; }
}
.reduced .c-step, .reduced .c-path-layer, .reduced .c-path-key, .reduced .c-path-cap { transition: none; }
.reduced .c-step { opacity: 1; }

/* ---------- your package: the portal under an arch, and the rest of the package in a ruled list ---------- */
.c-pkg { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.c-pkg-portal { display: grid; gap: 18px; align-content: start; padding: clamp(26px, 3.2vw, 46px);
  background: var(--white); color: var(--arc); }
.c-pkg-kicker { font: 600 0.86rem var(--f-body); letter-spacing: 0.01em; color: rgba(0, 45, 222, 0.72); }
.c-pkg-portal h3 { font: 400 clamp(1.9rem, 2.7vw, 2.6rem)/1.04 var(--f-display); text-transform: none; color: var(--arc); max-width: 15em; }
.c-pkg-portal dl { display: grid; margin: 6px 0 0; }
.c-pkg-portal dl > div { display: grid; grid-template-columns: minmax(0, 9.6rem) minmax(0, 1fr); gap: 6px 18px; align-items: baseline; padding-block: 16px; border-top: 1px solid rgba(0, 45, 222, 0.22); }
.c-pkg-portal dt { font: 400 1.4rem/1.05 var(--f-display); color: var(--arc); }
.c-pkg-portal dd { margin: 0; color: #00189a; }
.c-pkg-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.c-pkg-list li { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 10px 28px; align-items: baseline; padding-block: clamp(20px, 3.2vh, 32px); border-top: 1px solid var(--line); }
.c-pkg-list h3 { font: 400 clamp(1.7rem, 2.3vw, 2.2rem)/1.05 var(--f-display); text-transform: none; }
.c-pkg-list p { color: var(--ink-soft); }
@media (max-width: 1180px) {
  .c-pkg-portal dl > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .c-pkg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .c-pkg-list li, .c-pkg-portal dl > div { grid-template-columns: minmax(0, 1fr); }
}

/* the package and the path come up as they are reached (only once consulting.js has marked them ready) */
.c-rise-ready .c-rise { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.c-rise-ready .c-rise.is-in { opacity: 1; transform: none; }

/* ---------- no arch outlines on this page: the form sits in a plain hairline panel (site.css draws it arched) ---------- */
.page-consulting .join-form { border-radius: 0; padding: clamp(24px, 3vw, 40px); }

/* ---------- the engravings breathe: a slow light crosses the hero's aqueduct, and the figures drift a touch as the
   page scrolls (consulting.js sets --drift); nothing moves with reduced motion ---------- */
.c-plate { position: relative; overflow: hidden; }
.c-plate::after { content: ""; position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-70%); animation: c-sun 11s ease-in-out 1.5s infinite; }
@keyframes c-sun { 0% { transform: translateX(-70%); } 55%, 100% { transform: translateX(70%); } }
.c-plate-canvas, .biz .biz-bridge-cv, .biz .biz-gate-cv { transform: translateY(var(--drift, 0px)); will-change: transform; }
.biz .biz-cv.biz-done { animation: c-breathe 9s ease-in-out infinite alternate; }
@keyframes c-breathe { from { opacity: 1; } to { opacity: 0.84; } }
.reduced .biz .biz-cv.biz-done { animation: none; }
.reduced .c-plate::after { display: none; }
.reduced .c-plate-canvas, .reduced .biz-cv { transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .c-plate::after { display: none; } .c-plate-canvas, .biz-cv { transform: none !important; animation: none !important; } }