/* =====================================================================
   Roach Solution v16: section motion + image-free intro vignette.
   Hidden "before" states only apply under html.sq-motion (added by
   js/site-motion.js once anime.js has loaded and motion is allowed).
   ===================================================================== */

/* ---------- Featured intro vignette ---------- */
.sq-vig { background: #111114; --mx: 0; --my: 0; isolation: isolate; }
.sq-vig-bg { position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(60% 55% at 70% 35%, rgba(212,175,55,.16), transparent 70%),
        radial-gradient(45% 40% at 18% 80%, rgba(212,175,55,.08), transparent 70%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(160deg, #18181c, #0d0d10);
}
.sq-vig-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; }
.sq-vig-lines path { stroke: rgba(212,175,55,.35); stroke-width: 1.2; stroke-linejoin: round; }
.sq-vig-lines path.c { stroke: #f3d77a; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 6 400; stroke-dashoffset: 6; opacity: 0;
    filter: drop-shadow(0 0 3px rgba(243,215,122,.9)); animation: sq-comet 3.6s linear infinite; animation-delay: var(--d); }
@keyframes sq-comet { 0% { stroke-dashoffset: 6; opacity: 0; } 6% { opacity: 1; } 60% { stroke-dashoffset: -330; opacity: 1; } 66%, 100% { stroke-dashoffset: -330; opacity: 0; } }
.sq-vig-lines circle { fill: #111114; stroke: var(--sq-gold); stroke-width: 1.4; }
.sq-vig-layer { position: absolute; z-index: 2; --z: 1;
    transform: translate3d(calc(var(--mx) * var(--z) * 9px), calc(var(--my) * var(--z) * 7px), 0);
    transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sq-vig-card { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, #202025, #19191d);
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden; animation: sq-vfloat 7s ease-in-out infinite; animation-delay: calc(var(--f, 0s) * -1); }
@keyframes sq-vfloat { 50% { transform: translateY(-6px); } }
.sq-vig-bar { display: flex; align-items: center; gap: 5px; height: 11%; min-height: 18px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.sq-vig-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a40; }
.sq-vig-bar i:first-child { background: var(--sq-gold); }
.sq-vig-bar span { margin-left: 8px; font: 500 10px/1 ui-monospace, 'JetBrains Mono', Menlo, monospace; color: #8d8a82; }
.sq-vig-code { padding: 4% 4%; font: 500 clamp(8px, .78vw, 11.5px)/1.75 ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; color: #d9d6ce; white-space: nowrap; }
.sq-vig-ln { display: flex; gap: 10px; }
.sq-vig-ln em { font-style: normal; color: #55534d; width: 1.2em; text-align: right; flex: none; }
.sq-vig-ln span { display: inline-block; clip-path: inset(0 0 0 0); }
.sq-vig-ln .k { font-style: normal; color: #e9c85a; } .sq-vig-ln .s { font-style: normal; color: #9fd49a; }
.sq-vig-ln .f { font-style: normal; color: #f2efe6; font-weight: 700; } .sq-vig-ln .n { font-style: normal; color: #e79b6b; }
.sq-vig.is-live .sq-vig-ln span { animation: sq-type 9s infinite; animation-delay: calc(var(--l) * .55s); }
@keyframes sq-type {
    0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(16, end); }
    7%, 86% { clip-path: inset(0 0 0 0); }
    92%, 100% { clip-path: inset(0 100% 0 0); }
}
.sq-vig-dash { padding: 9% 9% 8%; display: flex; flex-direction: column; gap: 6%; }
.sq-vig-kpi { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sq-vig-kpi span { width: 100%; font: 500 10px/1 var(--sq-body); color: #8d8a82; text-transform: uppercase; letter-spacing: .1em; }
.sq-vig-kpi b { font: 600 clamp(14px, 1.5vw, 22px)/1 var(--sq-head); color: #f2efe6; }
.sq-vig-kpi em { font: 600 10px/1 var(--sq-body); font-style: normal; color: #3ad07a; background: rgba(58,208,122,.12); padding: 3px 6px; border-radius: 999px; }
.sq-vig-chart { width: 100%; height: 30%; overflow: visible; }
.sq-vig-chart .a { fill: rgba(212,175,55,.14); }
.sq-vig-chart .l { fill: none; stroke: var(--sq-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sq-vig.is-live .sq-vig-chart .l { animation: sq-draw 6s ease-in-out infinite; }
@keyframes sq-draw { 0% { stroke-dashoffset: 100; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.sq-vig-bars { flex: 1; display: flex; align-items: flex-end; gap: 7%; }
.sq-vig-bars i { flex: 1; height: 100%; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #e9c85a, #9c7a1c); transform-origin: 50% 100%; transform: scaleY(var(--h)); }
.sq-vig-bars i:nth-child(3n) { background: linear-gradient(180deg, #4a4a52, #2c2c32); }
.sq-vig.is-live .sq-vig-bars i { animation: sq-bar 4.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes sq-bar { 0%, 100% { transform: scaleY(var(--h)); } 50% { transform: scaleY(calc(var(--h) * .55 + .12)); } }
.sq-vig-ph { border-radius: 16px; border: 2px solid #3a3a42; background: #141417; padding: 22% 9% 0; box-shadow: 0 22px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.25); }
.sq-vig-notch { position: absolute; left: 50%; top: 5px; width: 34%; height: 7px; border-radius: 6px; background: #000; transform: translateX(-50%); }
.sq-vig-app { display: flex; flex-direction: column; gap: 7px; }
.sq-vig-app span { display: block; height: 7px; border-radius: 4px; background: #2c2c32; }
.sq-vig-app .hd { width: 60%; height: 9px; background: #e9e6de; opacity: .85; }
.sq-vig-app .row { height: 16px; border-radius: 6px; background: #222227; border: 1px solid rgba(255,255,255,.05); }
.sq-vig-app .row.s { width: 70%; }
.sq-vig-app .trk { position: relative; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #2a2a30, #1f1f24); border: 1px solid rgba(212,175,55,.35); padding: 8px 7px; box-sizing: border-box; }
.sq-vig-app .trk span { width: 55%; height: 5px; background: #8d8a82; }
.sq-vig-app .trk i { position: absolute; left: 7px; right: 7px; bottom: 8px; height: 4px; border-radius: 3px; background: var(--sq-gold); transform-origin: 0 50%; transform: scaleX(.62); }
.sq-vig.is-live .sq-vig-app .trk i { animation: sq-track 5s ease-in-out infinite; }
@keyframes sq-track { 0% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
.sq-vig-toast { position: absolute; left: 6%; right: 6%; top: 9%; z-index: 2; height: 22px; border-radius: 8px; background: rgba(240,236,226,.95); display: flex; align-items: center; gap: 5px; padding: 0 6px; box-sizing: border-box;
    opacity: 0; transform: translateY(-30px); }
.sq-vig-toast b { width: 10px; height: 10px; border-radius: 3px; background: var(--sq-gold); flex: none; }
.sq-vig-toast span { flex: 1; height: 4px; border-radius: 2px; background: #9b978d; }
.sq-vig.is-live .sq-vig-toast { animation: sq-toast 6s cubic-bezier(.2,.8,.2,1) infinite 1.5s; }
@keyframes sq-toast { 0% { opacity: 0; transform: translateY(-30px); } 8%, 45% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(-30px); } }
.sq-vig-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-around; align-items: center; }
.sq-vig-tabs i { width: 9px; height: 9px; border-radius: 3px; background: #3a3a42; }
.sq-vig-tabs i.on { background: var(--sq-gold); }
.sq-vig-dep { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 10px; }
.sq-vig-dep b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(58,208,122,.15); color: #3ad07a; font-size: 11px; flex: none; }
.sq-vig-dep span { flex: 1; font: 600 clamp(9px, .8vw, 12px)/1 var(--sq-body); color: #e6e3db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-vig-dep em { font: 500 10px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #8d8a82; }
.sq-vig-dep i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--sq-gold), #f3d77a); transform-origin: 0 50%; transform: scaleX(1); }
.sq-vig.is-live .sq-vig-dep i { animation: sq-track 4.2s ease-in-out infinite; }
.sq-vig .sq-media-tag { z-index: 5; }
.sq-vig:not(.is-live) *, .sq-vig:not(.is-live) { animation-play-state: paused !important; }
@media (max-width: 560px) {
    .sq-vig-code { line-height: 1.6; }
    .sq-vig-ln:nth-child(2) { display: none; }
    .sq-vig-kpi span { display: none; }
    .sq-vig-dep { gap: 7px; padding: 0 9px; }
    .sq-vig-dep em { display: none; }
    .sq-vig-app .row { height: 11px; }
    .sq-vig-app .trk { height: 24px; padding: 5px; }
    .sq-vig-toast { height: 16px; }
}

/* ---------- global: scroll progress + back to top ---------- */
.sq-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; z-index: 2; }
.sq-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--sq-gold-deep), var(--sq-gold), #f3d77a); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 8px rgba(212,175,55,.6); }
.sq-totop { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 900; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--sq-gold-deep); background: rgba(20,20,22,.88); color: var(--sq-gold-hi); display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.35); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background .25s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sq-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sq-totop:hover, .sq-totop:focus-visible { background: var(--sq-gold); color: #141416; }
.sq-totop svg { width: 18px; height: 18px; transition: transform .25s ease; }
.sq-totop:hover svg { transform: translateY(-2px); }

/* ---------- labels: gold underline draws on enter ---------- */
.sq-motion .sq-label { position: relative; display: inline-block; padding-bottom: 6px; }
.sq-motion .sq-label.sq-center { display: block; width: max-content; margin-left: auto; margin-right: auto; }
.sq-motion .sq-label::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--sq-gold), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2,.7,.2,1) .15s; }
.sq-motion .sq-label.is-in::after { transform: scaleX(1); }

/* ---------- split headings ---------- */
.sq-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sq-wi { display: inline-block; will-change: transform; }

/* ---------- capabilities panels ---------- */
.sq-panel-no { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--sq-head); letter-spacing: .12em; color: var(--sq-gold); margin-bottom: 14px; }
.sq-panel-no::after { content: ''; width: 64px; height: 1px; background: var(--sq-gold); transform-origin: 0 50%; transform: scaleX(var(--pl, 1)); }
.sq-panel-copy li::marker { color: var(--sq-gold); }

/* ---------- Our Work ---------- */
.sq-site-frame { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease; }
.sq-site-frame img { transform: translateY(var(--py, 0px)) scale(var(--ps, 1)) !important; will-change: transform; }
.sq-motion .sq-site-frame img { --ps: 1.07; }
.sq-work-panel:hover .sq-site-frame { transform: translateY(-6px); border-color: rgba(212,175,55,.5); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.25), 0 0 40px rgba(212,175,55,.18); }
.sq-motion .sq-work-panel:hover .sq-site-frame img { --ps: 1.1; }
.sq-work-panel:hover .sq-site-visit i { animation: sq-nudge .9s ease-in-out infinite; }
@keyframes sq-nudge { 50% { transform: translate(4px, -4px); } }

/* ---------- Our Story timeline ---------- */
.sq-timeline { position: relative; }
.sq-tl-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--sq-gold-deep), var(--sq-gold), #f3d77a); transform-origin: 0 50%; transform: scaleX(var(--tp, 1)); }
.sq-timeline > div { position: relative; }
.sq-timeline > div::before { content: ''; position: absolute; left: 22px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--sq-gold); box-shadow: 0 0 0 4px rgba(212,175,55,.2); }
.sq-timeline > div:first-child::before { left: 0; }
.sq-motion .sq-timeline > div { opacity: .15; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.sq-motion .sq-timeline > div::before { transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.sq-motion .sq-timeline > div.is-on { opacity: 1; transform: none; }
.sq-motion .sq-timeline > div.is-on::before { transform: scale(1); }

/* ---------- team: hover tilt ---------- */
.sq-team .sq-card { perspective: 900px; }
.sq-team .sq-card-img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; position: relative; }
.sq-team .sq-card:hover .sq-card-img { box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.35); }
.sq-team .sq-card-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.18), transparent 55%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.sq-team .sq-card:hover .sq-card-img::after { opacity: 1; }

/* ---------- How We Work: circles fill + line draws ---------- */
.sq-steps { position: relative; }
.sq-step span { width: 64px; height: 64px; border-radius: 50%; display: grid !important; place-items: center; border: 1px solid var(--sq-gold); font-size: 22px !important; -webkit-text-stroke: 0 !important; color: var(--sq-gold) !important; background: #121215; position: relative; z-index: 1; transition: background .5s ease, color .5s ease, box-shadow .5s ease; }
.sq-step.is-on span { background: var(--sq-gold); color: #141416 !important; box-shadow: 0 0 0 6px rgba(212,175,55,.15), 0 10px 30px rgba(212,175,55,.3); }
.sq-steps-line { position: absolute; top: 59px; height: 2px; left: 32px; width: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, var(--sq-gold), #f3d77a); transform-origin: 0 50%; transform: scaleX(var(--sp, 1)); }
@media (max-width: 1100px) { .sq-steps-line { display: none; } }

/* ---------- FAQ ---------- */
.sq-faq .faq-item { transition: background .3s ease; }
.sq-faq .faq-item.active .faq-question i { transform: rotate(180deg); }

/* ---------- CTA band ---------- */
.sq-cta::before { content: ''; position: absolute; inset: -40% -10%; z-index: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(212,175,55,.10) 46%, rgba(243,215,122,.22) 50%, rgba(212,175,55,.10) 54%, transparent 62%);
    background-size: 250% 100%; animation: sq-sweep 7s ease-in-out infinite; }
@keyframes sq-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.sq-cta h2, .sq-cta .sq-btn { z-index: 1; }
.sq-cta .sq-btn { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease; }

/* ---------- contact ---------- */
.sq-form input:focus, .sq-form textarea:focus, .sq-form select:focus { animation: sq-focus 1.6s ease-out 1; }
@keyframes sq-focus { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.45); } 100% { box-shadow: 0 0 0 3px rgba(212,175,55,.2); } }

/* ---------- footer ---------- */
.sq-wordmark span {
    background: linear-gradient(110deg, transparent 40%, rgba(255,244,210,.85) 50%, transparent 60%) 140% 0 / 250% 100% no-repeat,
                linear-gradient(180deg, rgba(212,175,55,.95), rgba(212,175,55,.05) 92%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    animation: sq-shimmer 6.5s ease-in-out infinite;
}
@keyframes sq-shimmer { 0%, 55% { background-position: 140% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
    .sq-vig *, .sq-vig, .sq-cta::before, .sq-wordmark span, .sq-work-panel:hover .sq-site-visit i, .sq-form input:focus, .sq-form textarea:focus { animation: none !important; }
    .sq-vig-layer, .sq-team .sq-card-img, .sq-site-frame, .sq-totop { transition: none !important; transform: none !important; }
    .sq-totop:not(.is-on) { opacity: 0; }
    .sq-vig-toast { opacity: 1; transform: none; }
}