/* ==========================================================================
   Architive – page sections (home + shared blocks)
   ========================================================================== */

/* ---- Generic sections ---------------------------------------------------- */
.section { position: relative; padding-block: clamp(4.2rem, 9vw, 7.5rem); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--dark { background: var(--dark); color: var(--on-dark); overflow: hidden; }
.section--dark + .section--dark { border-top: 1px solid var(--on-dark-line); }
.section-head > div { max-width: 780px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.process__glow { position: absolute; width: 640px; height: 640px; right: -180px; top: -240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 10, .14), transparent 70%); pointer-events: none; animation: glow-drift 14s ease-in-out infinite alternate; }
@keyframes glow-drift { to { transform: translate(-80px, 60px) scale(1.12); } }
.section--dark > .wrap { position: relative; }

/* ---- HERO ---------------------------------------------------------------- */
.hero { padding: .85rem clamp(.5rem, 1.6vw, 1.3rem) 0; }
.hero__card {
  position: relative; max-width: 1480px; margin-inline: auto; display: flex; align-items: flex-end;
  min-height: clamp(620px, calc(100svh - var(--header-h) - 1.4rem), 800px);
  border-radius: 28px; overflow: hidden; color: #fff; background: #1d1d1b; box-shadow: var(--shadow-lg); isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -3; animation: hero-zoom 2.6s var(--ease) both; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); will-change: transform; }
@keyframes hero-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero__shade { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(8, 8, 8, .84) 0%, rgba(8, 8, 8, .58) 36%, rgba(8, 8, 8, .1) 66%, rgba(8, 8, 8, 0) 100%),
  linear-gradient(0deg, rgba(8, 8, 8, .72) 0%, rgba(8, 8, 8, 0) 46%), linear-gradient(180deg, rgba(8, 8, 8, .35), rgba(8, 8, 8, 0) 24%); }
.hero__frame { position: absolute; inset: clamp(10px, 1.5vw, 22px); z-index: -1; border: 1px solid rgba(255, 255, 255, .26); border-radius: 20px; pointer-events: none; animation: fade-in 1.6s var(--ease) .3s both; }
.hero__arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; transition: transform .6s var(--ease); }
.hero__arc .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3.2s var(--ease-io) .5s forwards; }
.hero__arc-tags { opacity: 0; animation: fade-in 1.4s ease 2.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero__top { position: absolute; top: clamp(26px, 3.4vw, 46px); left: clamp(26px, 3.4vw, 46px); right: 26px; margin: 0; font: 500 .66rem/1.5 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .88); animation: fade-in 1.2s ease .5s both; }
.hero__top i { margin: 0 .5em; font-style: normal; opacity: .7; }
.hero__content { position: relative; z-index: 2; width: 100%; max-width: 920px; padding: clamp(5rem, 9vw, 7rem) clamp(1.7rem, 4.2vw, 3.7rem) clamp(2.4rem, 5vw, 4.2rem); }
.hero__content > *:not(.hero__title) { opacity: 0; animation: fade-up 1s var(--ease) forwards; }
.hero__meta { animation-delay: .35s !important; display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0 0 1.1rem; font: 400 .72rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.hero__meta i { font-style: normal; opacity: .6; }
.hero__title { margin: 0 0 1.2rem; font: 650 clamp(1.9rem, 4.4vw, 3.55rem)/1 var(--f-body); letter-spacing: -.005em; text-transform: uppercase; }   /* weight/tracking matched to the client dummy */
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; transform: translateY(108%); animation: line-up 1.3s var(--ease) .45s forwards; }
.hero__title .line--sm { font-size: .62em; font-weight: 650; letter-spacing: -.01em; color: rgba(255, 255, 255, .94); margin-top: .12em; }
.hero__title .line--sm > span { animation-delay: .62s; }
@keyframes line-up { to { transform: none; } }
.hero__lead { animation-delay: .8s !important; max-width: 56ch; margin: 0 0 .9rem; font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.6; font-weight: 400; color: rgba(255, 255, 255, .92); }
.hero__lead2 { animation-delay: .9s !important; max-width: 60ch; margin: 0 0 1.3rem; font-size: .92rem; line-height: 1.65; font-weight: 400; color: rgba(255, 255, 255, .72); }
.hero__actions { animation-delay: 1s !important; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 1.4rem; }
.hero__note { animation-delay: 1.1s !important; margin: 1rem 0 0; font-size: .78rem; color: rgba(255, 255, 255, .66); }
.hero__chips { animation-delay: 1.2s !important; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 1.3rem 0 0; font: 500 .68rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.hero__chips li { display: inline-flex; align-items: center; }
.hero__chips b { margin-right: .5rem; padding: .22rem .4rem; border-radius: 5px; background: var(--accent); color: #141414; font-weight: 700; }
.hero__chips .plain { opacity: .7; }

.proof-card {
  position: absolute; right: clamp(26px, 3.6vw, 48px); bottom: clamp(26px, 3.6vw, 48px); z-index: 3; width: min(300px, calc(100% - 3rem));
  display: grid; gap: .5rem; padding: 1.3rem 1.4rem 1.1rem; border-radius: 20px; background: #fff; color: #141414 !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
  animation: fade-up 1.1s var(--ease) 1.2s both; transition: transform .5s var(--ease), box-shadow .5s;
}
.proof-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -22px rgba(0, 0, 0, .65); }
.proof-card__arrow { position: absolute; top: 1.1rem; right: 1.1rem; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #ddd; border-radius: 50%; font-size: .95rem; transition: .4s var(--ease); }
.proof-card:hover .proof-card__arrow { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.proof-card__num { font: 700 2.3rem/1 var(--f-body); letter-spacing: -.03em; }
.proof-card__text { font-size: .8rem; line-height: 1.5; color: #55554f; padding-right: 1rem; }
.proof-card__foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .45rem; padding-top: .75rem; border-top: 1px solid #ececec; font: 500 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.proof-card__foot b { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.proof-card__foot i { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; animation: blink 2s ease-in-out infinite; }
.proof-card__foot em { font-style: normal; color: #8a8a83; }
@keyframes blink { 50% { opacity: .35; } }

@media (max-width: 991.98px) {
  .hero__card { flex-direction: column; justify-content: flex-end; align-items: stretch; min-height: 700px; }
  .hero__shade { background: linear-gradient(0deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .65) 45%, rgba(8, 8, 8, .15) 80%), linear-gradient(180deg, rgba(8, 8, 8, .4), transparent 22%); }
  .hero__media img { object-position: 58% 50%; }
  .proof-card { position: relative; right: auto; bottom: auto; width: auto; margin: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem); animation-delay: 1.3s; }
  .hero__content { padding-bottom: 1.4rem; }
  .hero__frame { display: none; }
  .hero__top { font-size: .56rem; letter-spacing: .16em; }
}
@media (max-width: 575.98px) {
  .hero { padding-inline: .4rem; }
  .hero__card { border-radius: 22px; min-height: 740px; }
  .hero__chips { gap: .45rem .8rem; font-size: .6rem; }
  .hero__meta { font-size: .62rem; }
}

/* ---- Proof / stats / ticker --------------------------------------------- */
.proof { padding-top: clamp(3.2rem, 6vw, 5rem); }
.stat { border-left: 2px solid var(--line); padding-left: 1.2rem; transition: border-color .4s; }
.stat:hover { border-color: var(--accent); }
.stat__num { display: block; font: 400 clamp(2.5rem, 4.8vw, 3.9rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.stat__num--word { font-size: clamp(2rem, 3.8vw, 3.1rem); padding-top: .3em; }
.stat__num i { display: inline-block; width: .13em; height: .13em; margin-left: .08em; border-radius: 50%; background: var(--accent); font-size: 0; vertical-align: .55em; }
.stat__label { display: block; margin-top: .55rem; font: 700 .76rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.stat__sub { display: block; margin-top: .25rem; font: 400 .76rem/1.5 var(--f-mono); color: var(--ink-3); }

.ticker { margin-top: clamp(3rem, 6vw, 5rem); border-block: 1px solid var(--line); background: var(--bg-alt); }
.ticker__wrap { display: flex; align-items: center; gap: 2rem; padding-block: 1.1rem; }
.ticker__label { flex: none; font: 400 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ticker__viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker__track { display: flex; width: max-content; gap: 3rem; animation: marquee 26s linear infinite; }
.ticker__viewport:hover .ticker__track { animation-play-state: paused; }
.ticker__track li { display: inline-flex; align-items: center; gap: .6rem; font: 500 .8rem/1 var(--f-mono); white-space: nowrap; }
.ticker__track i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { to { transform: translateX(calc(-50% - 1.5rem)); } }
@media (max-width: 575.98px) { .ticker__label { display: none; } }

/* ---- Unify diagram ------------------------------------------------------- */
.unify { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 2.4vw, 1.6rem); box-shadow: var(--shadow-md); }
.unify__tabs { display: inline-flex; padding: .3rem; gap: .2rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); max-width: 100%; flex-wrap: wrap; }
.unify__tabs button { border: 0; background: transparent; cursor: pointer; padding: .55rem 1rem; border-radius: 999px; font: 600 .66rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: .35s var(--ease); }
.unify__tabs button.is-active { background: var(--accent); color: #141414; box-shadow: 0 6px 16px -8px rgba(255, 214, 10, .9); }
.unify__svg { display: block; width: 100%; height: auto; margin-top: .6rem; overflow: visible; }
.unify__svg text { font-family: var(--f-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; fill: var(--ink); }
.u-node { transition: transform 1s var(--ease); }
.u-node circle { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; transition: fill .6s, stroke .6s; }
.u-you circle { fill: var(--dark); stroke: var(--dark); }
[data-theme="dark"] .u-you circle { fill: #fff; stroke: #fff; }
.u-you text { fill: #fff; }
[data-theme="dark"] .u-you text { fill: #141414; }
.u-you { transform: translate(260px, 200px); } .u-cad { transform: translate(90px, 80px); } .u-bim { transform: translate(430px, 80px); } .u-viz { transform: translate(260px, 330px); }
[data-state="one"] .u-you { transform: translate(100px, 190px); } [data-state="one"] .u-cad { transform: translate(325px, 164px); }
[data-state="one"] .u-bim { transform: translate(395px, 164px); } [data-state="one"] .u-viz { transform: translate(360px, 226px); }
[data-state="one"] .u-cad circle, [data-state="one"] .u-bim circle, [data-state="one"] .u-viz circle { fill: var(--accent); stroke: var(--accent); }
[data-state="one"] .u-cad text, [data-state="one"] .u-bim text, [data-state="one"] .u-viz text { fill: #141414; }
.u-line { stroke: var(--ink-3); stroke-width: 1.4; fill: none; }
.u-line--dash { stroke-dasharray: 4 6; opacity: .55; animation: dash 2.4s linear infinite; }
.u-line--accent { stroke: var(--accent-2); stroke-width: 2.4; }
.u-arrow { stroke: var(--accent-2); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.u-warn text { fill: #d2552d; font-size: 8.5px; }
.u-split, .u-one, .u-hub { transition: opacity .7s var(--ease), transform 1s var(--ease); }
.u-one, .u-hub { opacity: 0; }
.u-hub { transform-origin: 360px 190px; transform: scale(.7); }
.u-hub circle { fill: rgba(255, 214, 10, .14); stroke: var(--accent); stroke-width: 1.6; }
.u-hub__ring { fill: none !important; stroke-dasharray: 3 8; animation: spin 40s linear infinite; transform-origin: 360px 190px; }
.u-hub text { fill: var(--ink-2); font-size: 9px; }
.u-tag { fill: var(--ink-2) !important; font-size: 8.5px !important; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-state="one"] .u-split { opacity: 0; } [data-state="one"] .u-one, [data-state="one"] .u-hub { opacity: 1; } [data-state="one"] .u-hub { transform: none; }
.unify__caption { margin: .4rem 0 0; text-align: center; font-size: .95rem; color: var(--ink-2); min-height: 1.6em; }
.unify__caption b { color: var(--ink); }

/* ---- Services cards ------------------------------------------------------ */
.svc-grid > * { display: flex; }
.svc-card, .collab-card, .principle, .disc-card { --mx: 50%; --my: 0%; }
.svc-card {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 1.8rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
}
.svc-card::before, .principle::before, .disc-card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 214, 10, .16), transparent 55%); }
.svc-card:hover, .principle:hover, .disc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.svc-card:hover::before, .principle:hover::before, .disc-card:hover::before { opacity: 1; }
.svc-card__icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.4rem; border-radius: 13px; background: var(--bg-alt); font-size: 1.2rem; transition: .5s var(--ease); }
.svc-card:hover .svc-card__icon { background: var(--accent); color: #141414; transform: rotate(-8deg) scale(1.08); }
.svc-card__title { margin: 0 0 .8rem; font: 700 .82rem/1.45 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.svc-card__text { font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.svc-card__list { margin: .2rem 0 1.4rem; display: grid; gap: .4rem; }
.svc-card__list li { position: relative; padding-left: 1rem; font: 400 .74rem/1.5 var(--f-mono); color: var(--ink-3); }
.svc-card__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.svc-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1.1rem; border-top: 1px solid var(--line); font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); transition: color .3s; }
.svc-card__foot .ic { transition: transform .45s var(--ease); }
.svc-card:hover .svc-card__foot { color: var(--ink); } .svc-card:hover .svc-card__foot .ic { transform: translateX(6px); }

/* ---- Pillars / audience --------------------------------------------------- */
.pillar { height: 100%; padding: 1.5rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: .5s var(--ease); }
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.pillar__icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 12px; background: var(--accent); color: #141414; font-size: 1.1rem; }
.pillar h3 { margin: 0 0 .45rem; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.pillar p { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.65; }

.aud-card { height: 100%; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: .5s var(--ease); }
.aud-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.aud-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.aud-card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--bg-alt); color: var(--accent-2); font-size: 1.1rem; }
[data-theme="dark"] .aud-card__icon { color: var(--accent); }
.tag { padding: .42rem .8rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); font: 700 .6rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.aud-card h3 { font: 400 clamp(1.4rem, 2.4vw, 1.75rem)/1.2 var(--f-display); margin-bottom: .8rem; }
.aud-card > p { color: var(--ink-2); font-size: .94rem; }
.aud-list { display: grid; gap: 1rem; margin: .6rem 0 1.5rem; }
.aud-list li { position: relative; padding-left: 1.2rem; }
.aud-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.aud-list strong { display: block; font-size: .98rem; font-weight: 600; }
.aud-list span { display: block; margin-top: .15rem; font: 400 .78rem/1.65 var(--f-mono); color: var(--ink-2); }
.aud-card .btn-ay { margin-top: auto; }
.callout { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; margin: 0 0 1.4rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-alt); font-size: .84rem; line-height: 1.55; }
.callout .ic { flex: none; margin-top: .15rem; color: var(--accent-2); font-size: 1.1rem; }
.callout--sm { font-size: .8rem; }
.callout--wide { font-size: .95rem; padding: 1.3rem 1.5rem; }

/* ---- Founder -------------------------------------------------------------- */
.studio-card { position: relative; padding: 1.4rem 1.4rem 1.2rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--ink); transition: transform .3s; transform-style: preserve-3d; }
.studio-card__top { display: flex; justify-content: space-between; gap: 1rem; font: 400 .62rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.studio-card__top b { color: var(--accent-2); font-weight: 700; }
.studio-drawing { display: block; width: 100%; height: auto; margin: .6rem 0 1.6rem; color: var(--ink); }
.studio-drawing text { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; fill: var(--ink-3); }
.studio-drawing .sd-dim path { stroke: var(--ink-3); stroke-width: 1; fill: none; } .studio-drawing .sd-dim text { font-size: 8.5px; font-weight: 400; }
.sd-cad rect, .sd-bim rect { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1.4; }
.sd-bim rect { fill-opacity: .85; }
.sd-ground { stroke: var(--ink); stroke-width: 1.4; }
.sd-dash { stroke: var(--accent-2); stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; }
.sd-accent { stroke: var(--accent); stroke-width: 2; fill: none; }
.sd-thin { stroke: var(--line-2); stroke-width: 1; fill: none; }
.js .studio-drawing .draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 2.4s var(--ease-io) .3s; }
.js [data-reveal].is-in .studio-drawing .draw { stroke-dashoffset: 0; }
.studio-badge { position: absolute; right: -14px; bottom: -22px; min-width: 156px; padding: 1rem 1.2rem; border-radius: 16px; background: #141414; color: #fff; box-shadow: var(--shadow-lg); }
[data-theme="dark"] .studio-badge { background: #262624; border: 1px solid #3a3a37; }
.studio-badge strong { display: block; font: 400 2.5rem/1 var(--f-display); }
.studio-badge sup { font-size: 1.4rem; top: -.5em; }
.studio-badge i { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.studio-badge span { display: block; margin-top: .4rem; font: 400 .6rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #bdbdb5; }
.studio-badge em { display: block; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .15); font: 700 .58rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--accent); }
[data-float] { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.signature { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.signature__name { display: block; font: italic 400 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--f-display); }
.signature__role { display: block; margin-top: .3rem; font: 400 .66rem/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---- Collaboration cards + blueprint line art ---------------------------- */
.collab-card { display: block; }
.collab-card__art { padding: 1.1rem 1.3rem 1rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; position: relative; overflow: hidden; }
.collab-card__art::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 214, 10, .16), transparent 55%); pointer-events: none; }
.collab-card:hover .collab-card__art { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.collab-card:hover .collab-card__art::before { opacity: 1; }
.collab-card__row { display: flex; justify-content: space-between; align-items: center; font: 400 .6rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.collab-card__row b { font-weight: 700; } .tag-visualization, .tag-cad, .tag-bim { color: var(--accent-2); }
[data-theme="dark"] .tag-visualization, [data-theme="dark"] .tag-cad, [data-theme="dark"] .tag-bim { color: var(--accent); }
.collab-card__go { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-alt); color: var(--ink); font-size: .85rem; transition: .45s var(--ease); }
.collab-card:hover .collab-card__go { background: var(--accent); transform: rotate(45deg); }
.collab-card__title { margin: 1.2rem 0 .3rem; font: 400 1.4rem/1.25 var(--f-display); }
.collab-card__meta { margin: 0; font: 400 .66rem/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bp { display: block; width: 100%; height: auto; margin: .9rem 0 .6rem; }
.bp__dash { fill: none; stroke: var(--line-2); stroke-dasharray: 3 4; }
.bp__ground { stroke: var(--ink); stroke-width: 1.4; }
.bp__line { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.bp__thin { stroke-width: 1; stroke: var(--ink-3); fill: none; }
.bp__accent { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 260; stroke-dashoffset: 0; }
.bp__accent-dot { fill: var(--accent); }
.bp__cam { fill: none; stroke: var(--accent-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.bp__tag { font: 700 9px var(--f-mono); fill: var(--ink-3); letter-spacing: .08em; }
.collab-card:hover .bp__accent { animation: redraw 1s var(--ease-io); }
@keyframes redraw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

/* ---- Process steps (dark) ------------------------------------------------- */
.steps { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1.6rem; counter-reset: none; }
.steps__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; }
.steps__num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); font: 700 .72rem/1 var(--f-mono); transition: .5s var(--ease); }
.steps__item:hover .steps__num { background: var(--accent); color: #141414; transform: scale(1.12); }
.steps__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(255, 214, 10, .15)); transform-origin: 0 50%; }
.js .steps__line { transform: scaleX(0); transition: transform 1.4s var(--ease-io) calc(var(--d, 0s) + .3s); }
.js .steps__item.is-in .steps__line { transform: scaleX(1); }
.steps__title { margin: 0 0 .6rem; font: 700 .8rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.steps__text { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--on-dark-2); }
@media (max-width: 991.98px) {
  .steps { grid-template-columns: 1fr; gap: 0; border-left: 1px solid rgba(255, 214, 10, .3); margin-left: 17px; }
  .steps__item { position: relative; padding: 0 0 2.2rem 2.4rem; }
  .steps__head { position: absolute; left: -18px; top: 0; margin: 0; } .steps__line { display: none; }
  .steps__title { padding-top: .5rem; }
}

/* ---- Quotes --------------------------------------------------------------- */
.quotes-sec { background: var(--bg); }
.quotes { position: relative; }
.quotes__mark { width: 40px; height: 40px; display: inline-grid; place-items: center; margin: 0 0 1.6rem; border-radius: 50%; border: 1px solid rgba(255, 214, 10, .6); color: var(--accent-2); font-size: 1rem; background: rgba(255, 214, 10, .08); }
.quotes__stage { display: grid; }
.quotes__slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease), visibility .7s; }
.quotes__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.quotes blockquote { margin: 0 0 1.8rem; }
.quotes blockquote p { font: 400 clamp(1.3rem, 2.8vw, 2rem)/1.5 var(--f-display); text-wrap: balance; margin: 0; }
.quotes figcaption strong { display: block; font-size: 1rem; font-weight: 600; }
.quotes figcaption span { display: block; margin-top: .25rem; font: 400 .7rem/1.5 var(--f-mono); color: var(--ink-3); }
.quotes figcaption em { display: block; margin-top: .3rem; font: 400 .62rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }
.quotes__ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.2rem; }
.quotes__ctrl > button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: .35s var(--ease); }
.quotes__ctrl > button:hover { background: var(--accent); border-color: var(--accent); color: #141414; transform: scale(1.1); }
.quotes__dots { display: flex; gap: .4rem; }
.quotes__dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: var(--line-2); cursor: pointer; transition: .45s var(--ease); }
.quotes__dots button.is-active { width: 24px; background: var(--accent); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq-tools { margin-bottom: 1.8rem; }
.faq-search { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.2rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); transition: border-color .3s, box-shadow .3s; }
.faq-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 214, 10, .25); }
.faq-search .ic { color: var(--ink-3); font-size: 1.1rem; }
.faq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .92rem; }
.faq-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.faq-cats button { padding: .55rem 1rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; font: 500 .7rem/1 var(--f-mono); transition: .35s var(--ease); }
.faq-cats button:hover { border-color: var(--ink); }
.faq-cats button.is-active { background: var(--accent); border-color: var(--accent); color: #141414; font-weight: 700; }
.faq__item { margin-bottom: .8rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; transition: box-shadow .4s, border-color .4s; }
.faq__item:hover { border-color: var(--line-2); }
.faq__item:has(.faq__btn[aria-expanded="true"]) { box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.faq__item[hidden] { display: none; }
.faq__q { margin: 0; }
.faq__btn { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border: 0; background: transparent; text-align: left; cursor: pointer; }
.faq__num { flex: none; font: 700 .72rem/1 var(--f-mono); color: var(--accent-2); }
.faq__text { flex: 1; font: 400 clamp(1.02rem, 1.7vw, 1.2rem)/1.35 var(--f-display); }
.faq__icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-alt); transition: transform .5s var(--ease), background .3s; }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(180deg); background: var(--accent); color: #141414; }
.faq__a { padding: 0 1.5rem 1.4rem 3.9rem; border-top: 1px solid var(--line); }
.faq__a p { margin: 1rem 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.75; }
.faq__empty { text-align: center; color: var(--ink-2); padding: 2rem 0; }
.faq__empty a { text-decoration: underline; }
@media (max-width: 575.98px) { .faq__btn { padding: 1.05rem 1.05rem; gap: .7rem; } .faq__a { padding: 0 1.1rem 1.2rem 1.1rem; } }

/* ---- CTA band ------------------------------------------------------------- */
.cta-band { position: relative; padding-block: clamp(3.6rem, 7vw, 5.5rem) clamp(2.6rem, 5vw, 3.6rem); }
.cta-band__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cta-band__bg span { position: absolute; top: -10%; bottom: -10%; width: 1px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 14px); animation: sway 9s ease-in-out infinite alternate; }
.cta-band__bg span:nth-child(1) { left: 12%; } .cta-band__bg span:nth-child(2) { left: 52%; animation-delay: -3s; } .cta-band__bg span:nth-child(3) { left: 86%; animation-delay: -6s; }
@keyframes sway { to { transform: translateX(36px); } }
.cta-band__text { max-width: 54ch; color: var(--on-dark-2); font-size: 1.02rem; margin: 0; }
.cta-band .display-h { margin-bottom: 1rem; }
.cta-band__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--on-dark-line); font: 400 .72rem/1.4 var(--f-mono); color: var(--on-dark-2); }
.cta-band__foot ul { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.cta-band__foot li { display: inline-flex; align-items: center; gap: .45rem; }
.cta-band__foot .ic { color: var(--accent); }
.cta-band__foot a { color: var(--on-dark); transition: color .3s; } .cta-band__foot a:hover { color: var(--accent); }

/* ---- Inner page hero ------------------------------------------------------ */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(500px, 68vh, 680px); color: #fff; background: #111; overflow: hidden; isolation: isolate; }
.page-hero--plain { min-height: clamp(420px, 56vh, 560px); background: radial-gradient(900px 500px at 85% 10%, rgba(255, 214, 10, .12), transparent 60%), #141414; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img { width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; animation: hero-zoom 2.2s var(--ease) both; }
.page-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .62) 45%, rgba(8, 8, 8, .25) 100%), linear-gradient(0deg, rgba(8, 8, 8, .75), transparent 55%); }
.page-hero__grid { position: absolute; inset: 0; color: #fff; opacity: .07; mask-image: linear-gradient(180deg, transparent, #000 30%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent); }
.page-hero__inner { position: relative; width: 100%; padding-block: clamp(2.6rem, 5vw, 4.4rem) clamp(3rem, 6vw, 5rem); }
.page-hero .crumbs { color: #fff; }
.page-hero__title { margin: 0 0 1.4rem; font: 400 clamp(2.2rem, 5.2vw, 4.3rem)/1.06 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.page-hero__title em { color: var(--accent); }
.page-hero__lead { max-width: 58ch; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; font-weight: 400; color: rgba(255, 255, 255, .84); margin-bottom: 1.8rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.page-hero .mono-note { margin-top: 1.1rem; }
.hero-chips { display: grid; gap: .7rem; max-width: 380px; margin-left: auto; }
.hero-chips li { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .76rem/1.4 var(--f-mono); letter-spacing: .04em; transition: .4s var(--ease); }
.hero-chips li:hover { background: rgba(255, 255, 255, .14); transform: translateX(-6px); }
.hero-chips span { color: var(--accent); font-weight: 700; }

@media (max-width: 767.98px) { .page-hero { min-height: 560px; } .page-hero__shade { background: linear-gradient(0deg, rgba(8, 8, 8, .92), rgba(8, 8, 8, .5) 70%, rgba(8, 8, 8, .35)); } }