/* ============================================================
   UNFO · CINEMATIC — Part 2
   work video grid · services · geometric band · testi · faq · cta · footer
   ============================================================ */

/* section head */
.shead { margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.shead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.shead__title { font-family: var(--display); font-weight: 800; font-size: clamp(3rem,10vw,10rem); line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase; }
.shead__title .accent { color: var(--red); }
.shead__meta { display: flex; flex-direction: column; gap: 0.3rem; text-align: right; padding-bottom: 0.5rem; }
.shead__meta p { color: var(--ink-dim); font-size: 0.92rem; max-width: 26ch; }

/* ============================================================
   WORK — video grid (VYZN-style)
   ============================================================ */
.work__filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.filterbtn { font-family: var(--body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.5rem 1.05rem; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-dim); transition: 0.3s; text-transform: uppercase; }
.filterbtn.on { background: var(--white); color: var(--black); border-color: var(--white); }
.filterbtn:hover:not(.on) { border-color: var(--white); color: var(--ink); }

.work__grid { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(0.8rem,1.2vw,1.3rem); }
.tile { position: relative; overflow: hidden; border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: opacity 0.5s, filter 0.5s; }
.tile.hide { display: none; }
.tile video, .tile image-slot { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-cine); }
.tile:hover video, .tile:hover image-slot { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(5,0,0,0.9) 3%, transparent 52%); opacity: 0.78; transition: opacity 0.4s; }
.tile:hover::after { opacity: 1; }
.tile__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(1rem,1.8vw,1.6rem); transform: translateY(8px); transition: transform 0.45s var(--ease-out); }
.tile:hover .tile__meta { transform: translateY(0); }
.tile__t { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem,1.9vw,1.8rem); line-height: 1; letter-spacing: -0.02em; }
.tile__c { font-family: var(--body); font-size: 0.8rem; color: var(--ink-dim); margin-top: 0.4rem; }
.tile__no { position: absolute; top: 1rem; left: 1rem; z-index: 3; font-family: var(--body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: var(--white); background: rgba(5,0,0,0.5); border: 1px solid var(--line); padding: 0.32rem 0.6rem; border-radius: 100px; backdrop-filter: blur(6px); }
.tile__live { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: flex; align-items: center; gap: 0.4rem; font-family: var(--body); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.tile__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.6s ease-in-out infinite; }
/* spans */
.tile.s-hero { grid-column: span 8; aspect-ratio: 16/9; }
.tile.s-tall { grid-column: span 4; aspect-ratio: 3/4; }
.tile.s-half { grid-column: span 6; aspect-ratio: 16/10; }
.tile.s-third { grid-column: span 4; aspect-ratio: 4/5; }
.work__foot { margin-top: clamp(2.5rem,4vw,3.5rem); display: flex; justify-content: center; }

/* ============================================================
   SERVICES — single horizontal-slide module (click to switch in place)
   ============================================================ */
.svcx { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line-soft); padding-block: clamp(5rem,9vw,7rem); }
.svcx__bgs { position: absolute; inset: 0; z-index: 0; }
.svcx__bgs video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s var(--ease-cine); }
.svcx__bgs video.on { opacity: 1; }
.svcx__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(102deg, rgba(5,0,0,0.95) 0%, rgba(5,0,0,0.74) 42%, rgba(5,0,0,0.35) 76%, rgba(5,0,0,0.62) 100%); }
.svcx__inner { position: relative; z-index: 3; width: min(1560px,100% - clamp(2.5rem,10vw,12rem)); margin-inline: auto; display: flex; flex-direction: column; gap: clamp(1.6rem,3vw,2.6rem); }
.svcx__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding-bottom: 1.2rem; }
.svcx__tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.svcx__tab { font-family: var(--body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-dim); transition: 0.3s; }
.svcx__tab.on { background: var(--red); border-color: var(--red); color: var(--white); }
.svcx__tab:hover:not(.on) { border-color: var(--white); color: var(--ink); }
.svcx__body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,6rem); align-items: center; min-height: min(54vh, 480px); }
.svcx__left { display: flex; flex-direction: column; gap: clamp(1rem,2vw,1.6rem); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.svcx__right { transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); transition-delay: 0.05s; }
.svcx.swapping .svcx__left, .svcx.swapping .svcx__right { opacity: 0; transform: translateY(18px); }
.svcx__n { font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--red); }
.svcx__t { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem,5.5vw,5.4rem); line-height: 0.92; letter-spacing: -0.035em; }
.svcx__d { font-size: var(--fs-sub); color: var(--ink-dim); max-width: 34ch; }
.svcx__pk { font-family: var(--body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 0.5rem; }
.svcx__proc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem,3vw,3rem); }
.proc-row { display: grid; grid-template-columns: 40px 1fr; gap: 0.8rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--line-soft); }
.proc-row__n { font-family: var(--body); font-size: 0.7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.proc-row__t { font-family: var(--display); font-weight: 600; font-size: clamp(1rem,1.5vw,1.35rem); letter-spacing: -0.01em; }
.svcx__nav { display: flex; align-items: center; gap: 1.2rem; }
.svcx__arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.15rem; color: var(--ink); transition: 0.3s; }
.svcx__arrow:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.svcx__count { font-family: var(--body); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.svcx__count b { color: var(--ink); }
@media (max-width: 1024px) { .svcx__body { grid-template-columns: 1fr; gap: 1.8rem; min-height: 0; } }
@media (max-width: 560px) { .svcx__proc { grid-template-columns: 1fr; } }

/* ============================================================
   GEOMETRIC BAND — brand motion moment (circles/triangles grid)
   ============================================================ */
.geo { padding: clamp(4rem,8vw,8rem) 0; overflow: hidden; border-block: 1px solid var(--line-soft); background: var(--surface); position: relative; }
.geo__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(0.6rem,1.2vw,1.2rem); width: min(1560px,100% - clamp(2.5rem,8vw,8rem)); margin-inline: auto; }
.geo__cell { aspect-ratio: 1; position: relative; }
.geo__shape { position: absolute; inset: 0; }
/* circle */
.g-circle { border-radius: 50%; background: var(--red); }
.g-circle.o { background: transparent; border: 1.5px solid var(--line); }
/* half circle */
.g-half { border-radius: 100% 0 0 0; background: var(--ink); opacity: 0.1; }
.g-half.r { background: var(--red); opacity: 1; }
/* triangle */
.g-tri { width: 0; height: 0; inset: auto 0 0 0; margin: auto; border-left: 50% solid transparent; border-right: 50% solid transparent; }
.g-tri::before { content: ""; position: absolute; }
.g-triangle { background: var(--ink); opacity: 0.08; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-triangle.r { background: var(--red); opacity: 1; }
.g-ring { border-radius: 50%; border: 1.5px solid var(--red); }
.g-quarter { background: var(--ink); opacity: 0.1; clip-path: circle(100% at 0 100%); }
.g-dot { border-radius: 50%; background: var(--ink); opacity: 0.12; transform: scale(0.4); }
/* slow drift */
.anim .geo__cell .geo__shape { animation: drift var(--dur,9s) var(--ease-cine) infinite alternate; animation-delay: var(--dly,0s); }
@keyframes drift { from { transform: translateY(0) rotate(0); } to { transform: translateY(-12px) rotate(var(--rot,0deg)); } }
.no-anim .geo__cell .geo__shape { animation: none; }
.geo__line { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem,9vw,9rem); letter-spacing: -0.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--line); white-space: nowrap; pointer-events: none; opacity: 0; }

.geo__cap { width: min(1560px,100% - clamp(2.5rem,8vw,8rem)); margin: clamp(2rem,4vw,3.5rem) auto 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.geo__cap h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem,3.4vw,3rem); line-height: 0.96; letter-spacing: -0.025em; max-width: 18ch; }
.geo__cap h3 .accent { color: var(--red); }
.geo__cap p { color: var(--ink-dim); font-size: 0.95rem; max-width: 30ch; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testi .wrap { display: grid; grid-template-columns: 0.3fr 1fr; gap: clamp(1.5rem,4vw,5rem); align-items: center; }
.testi__quote { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem,3.8vw,3.4rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.testi__quote::before { content: "“"; color: var(--red); } .testi__quote::after { content: "”"; color: var(--red); }
.testi__who { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.5rem,3vw,2.5rem); }
.testi__who image-slot { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.testi__who .nm { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.testi__who .rl { font-family: var(--body); font-size: 0.82rem; color: var(--ink-dim); }

/* ============================================================
   FAQ
   ============================================================ */
.faq .wrap { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(1.5rem,4vw,5rem); align-items: start; }
.faq__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem,5vw,4.4rem); line-height: 0.92; letter-spacing: -0.035em; position: sticky; top: 120px; }
.faq__list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q { display: flex; align-items: center; gap: 1.2rem; width: 100%; text-align: left; padding: clamp(1.3rem,2.4vw,2rem) 0; }
.faq-item__n { font-family: var(--body); font-weight: 600; font-size: 0.74rem; color: var(--red); }
.faq-item__x { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem,2.4vw,1.7rem); letter-spacing: -0.01em; flex: 1; transition: color 0.3s; }
.faq-item__ic { width: 22px; height: 22px; position: relative; flex-shrink: 0; }
.faq-item__ic::before, .faq-item__ic::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.35s var(--ease-out); }
.faq-item__ic::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-item__ic::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item.open .faq-item__ic::after { transform: translateX(-50%) scaleY(0); }
.faq-item.open .faq-item__x { color: var(--red); }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.faq-item.open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { color: var(--ink-dim); font-size: var(--fs-body); max-width: 60ch; padding-bottom: clamp(1.3rem,2.4vw,2rem); }

/* ============================================================
   CTA
   ============================================================ */
.cta { text-align: center; position: relative; overflow: hidden; }
.cta__rings { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: min(120vw,1100px); aspect-ratio: 1; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.6 * var(--accent-amt)); }
.cta__glow { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px; background: radial-gradient(circle, rgba(234,7,7,0.24), transparent 60%); filter: blur(40px); pointer-events: none; opacity: var(--accent-amt); z-index: 0; }
.cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem,3vw,2.4rem); }
.cta__t { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem,8vw,8rem); line-height: 0.9; letter-spacing: -0.04em; max-width: 14ch; }
.cta__t .accent { color: var(--red); }
.cta__mail { font-family: var(--body); font-weight: 600; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color 0.3s; }
.cta__mail:hover { border-color: var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line-soft); padding: clamp(3rem,6vw,5rem) 0 2rem; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: clamp(2.5rem,5vw,4rem); border-bottom: 1px solid var(--line-soft); }
.footer__brand img { height: 28px; margin-bottom: 1.1rem; }
.footer__wordmark { height: auto !important; width: min(240px, 70%); margin-bottom: 1.3rem; }
.footer__brand p { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--ink-dim); max-width: 20ch; }
.footer__brand .footer__parent { font-family: var(--body); font-style: normal; font-size: 0.84rem; color: var(--ink-faint); margin-top: 0.7rem; max-width: none; }
.footer__brand .footer__parent a { color: var(--ink-dim); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color 0.25s, border-color 0.25s; }
.footer__brand .footer__parent a:hover { color: var(--red); border-color: var(--red); }
.footer__col h4 { font-family: var(--body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; }
.footer__col a, .footer__col p { display: block; color: var(--ink-dim); font-size: 0.92rem; padding: 0.3rem 0; transition: color 0.25s; }
.footer__col a:hover { color: var(--ink); }
.footer__bot { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6rem; flex-wrap: wrap; gap: 1rem; }
.footer__bot p { font-size: 0.78rem; color: var(--ink-faint); }
.footer__big { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem,17vw,17rem); line-height: 0.8; letter-spacing: -0.04em; text-align: center; margin-top: clamp(1.5rem,3vw,2.5rem); color: transparent; -webkit-text-stroke: 1px var(--line); user-select: none; text-transform: uppercase; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .nav { grid-template-columns: auto auto; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__links.open { display: flex; flex-direction: column; position: fixed; inset: 0; background: rgba(5,0,0,0.97); backdrop-filter: blur(20px); justify-content: center; align-items: center; gap: 2rem; z-index: 999; }
  .nav__links.open a { font-size: 1.8rem; color: var(--ink); } .nav__links.open .nav__sep { display: none; }
  .svc-panel__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .statement .wrap, .testi .wrap, .faq .wrap { grid-template-columns: 1fr; }
  .faq__title { position: static; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .stats .wrap { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .rings { right: -20vw; width: 90vw; opacity: 0.7; }
  .geo__grid { grid-template-columns: repeat(6,1fr); }
}
@media (max-width: 640px) {
  .work__grid .tile { grid-column: span 12 !important; aspect-ratio: 16/10 !important; }
  .hero__row { flex-direction: column; align-items: flex-start; }
  .footer__top { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: 1fr; }
  .shead__meta { text-align: left; }
  .nav__brand .bn span { display: none; }
  .geo__grid { grid-template-columns: repeat(4,1fr); }
}