/* ============================================================
   Danylo Zaporozhets — Portfolio
   Design system rebuilt from measured values. Original content.
   Fluid scale: 360px (22.5rem) → 1440px (90rem) viewport.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (extracted) */
  --brand: #c6fb50;
  --brand-600: #a1d233;
  --black: #0d0d0d;
  --white: #ffffff;
  --orange: #ff6835;
  --green: #5ccc90;
  --violet: #6437d8;
  --bg-violet: #d4d7fe;
  --grey-100: #f8f8f7;
  --grey-500: #e7e7e7;
  --grey-600: #cfcfcf;
  --grey-700: #858585;
  --grey-800: #555555;
  --light-grey: #9d9d9d;

  --border: #e7e7e7;
  --border-black: #0d0d0d;
  --border-light: #cfcfcf;
  --border-white-30: rgba(255,255,255,.3);
  --border-white-10: rgba(255,255,255,.1);

  /* Theme */
  --bg: var(--white);
  --text: var(--black);

  /* Typography */
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-display: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);      /* 40 → 80 */
  --fs-h1:      clamp(2.25rem, 1.75rem + 2.222vw, 4rem);      /* 36 → 64 */
  --fs-h2:      clamp(2rem, 1.333rem + 2.963vw, 4rem);        /* 32 → 64 */
  --fs-title-72:clamp(3rem, 2.5rem + 2.222vw, 4.5rem);        /* 48 → 72 */
  --fs-h3:      clamp(1.5rem, 1rem + 2.222vw, 3rem);          /* 24 → 48 */
  --fs-h4:      clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);/* 22 → 30 */
  --fs-email:   clamp(1.5rem, 1.333rem + 0.741vw, 2rem);      /* 24 → 32 */
  --fs-large:   clamp(1.125rem, 1rem + 0.556vw, 1.5rem);      /* 18 → 24 */
  --fs-body:    clamp(1rem, 0.958rem + 0.185vw, 1.125rem);    /* 16 → 18 */
  --fs-small:   clamp(0.875rem, 0.833rem + 0.185vw, 1rem);    /* 14 → 16 */

  --lh-tiny: 1; --lh-small: 1.1; --lh-medium: 1.2; --lh-large: 1.3;
  --lh-big: 1.4; --lh-huge: 1.5;
  --ls-tight: -.02em; --ls-tighter: -.03em;

  /* Spacing (fluid) */
  --space-1: clamp(.375rem, .354rem + .093vw, .5rem);
  --space-2: clamp(.625rem, .604rem + .093vw, .75rem);
  --space-3: clamp(.875rem, .833rem + .185vw, 1rem);
  --space-4: clamp(1.25rem, 1.208rem + .185vw, 1.5rem);
  --space-5: clamp(1.75rem, 1.708rem + .185vw, 2rem);
  --space-6: clamp(2rem, 1.917rem + .37vw, 2.5rem);
  --space-7: clamp(2.25rem, 2.083rem + .741vw, 3rem);
  --space-8: clamp(2.5rem, 2rem + 2.222vw, 4rem);
  --section-space: clamp(3.75rem, 2.5rem + 5.556vw, 7.5rem);
  --section-space-large: clamp(6.75rem, 4.75rem + 8.889vw, 12.75rem);
  --section-space-small: clamp(3rem, 2.333rem + 2.963vw, 5rem);
  --page-top: clamp(8rem, 6.667rem + 5.926vw, 11rem);

  /* Layout */
  --margin: clamp(1rem, .667rem + 1.481vw, 2rem);
  --gutter: 2rem;
  --max-width: 90rem;      /* 1440 */
  --container: 85rem;      /* 1360 content */

  /* Radius */
  --radius-main: 3rem;
  --radius-small: .5rem;
  --radius-round: 100vw;

  /* Nav */
  --nav-height: 4rem;
  --nav-duration: .4s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-huge);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,h2,h3,h4,h5,h6,p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-align: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--bg-violet); color: var(--black); }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.u-max-60ch { max-width: 60ch; }
.eyebrow {
  font-size: var(--fs-small);
  color: var(--grey-700);
  letter-spacing: .01em;
}
.accent { color: var(--brand-600); }

/* ============================================================
   NAV
   ============================================================ */
.nav_bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: var(--space-2) var(--margin);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav_bar_wrap { width: 100%; max-width: var(--max-width); display: flex; justify-content: center; }
.nav_bar_container {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--max-width);
  padding: .5rem .75rem .5rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  transition: max-width .8s ease;
}
.nav_bar_container.is-active-main { max-width: 46.25rem; }
.nav_bar_container.is-active-main .nav_bar_logo_text { display: none; }

.nav_bar_logo_link { display: flex; align-items: center; gap: .55rem; flex: none; }
.nav_bar_logo_icon { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.nav_bar_logo_text { font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }

.nav_bar_menu { display: flex; align-items: center; }
.nav_link {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: .5rem 1rem;
  color: var(--black);
  transition: color var(--nav-duration) ease;
}
.nav_link:hover { color: var(--grey-700); }
.nav_link_number {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 12px; line-height: 1; color: #fff;
  background: var(--orange); border-radius: var(--radius-round);
}
.nav_cta {
  flex: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem;
  background: var(--black); color: var(--white);
  border: 1px solid var(--black);
  border-radius: var(--radius-round);
  transition: background .4s ease, color .4s ease;
}
.nav_cta:hover { background: #fff; color: var(--black); }
.nav_hamburger { display: none; }

/* ============================================================
   HERO — s-work-h
   ============================================================ */
.s-work-h { padding-top: var(--page-top); padding-bottom: var(--section-space); }
.s_work_h_head { text-align: center; margin-bottom: var(--space-8); }
.s_work_h_title {
  font-size: var(--fs-display);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-medium);
}
.s_work_h_sub {
  margin: var(--space-4) auto 0;
  max-width: 48ch;
  color: var(--grey-700);
  font-size: var(--fs-large);
}

/* live "open to work" banner */
.s_work_banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: var(--black); color: var(--white);
  border-radius: var(--radius-round);
}
.s_work_banner_text { font-size: var(--fs-large); }
.live_pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 4px 14px 4px 12px;
  background: rgba(255,255,255,.14);
  border-radius: var(--radius-round);
  font-size: var(--fs-small);
}
.live_dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); position: relative; }
.live_dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--orange); opacity: .5; animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .6; }
  100% { transform: scale(2.4); opacity: 0; }
}
.s_work_banner_meta {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: 6px 16px; background: rgba(255,255,255,.14);
  border-radius: var(--radius-round); font-size: var(--fs-small);
}
.s_work_banner_meta b { color: var(--brand); font-weight: var(--fw-bold); }

/* hero slider */
.s_case_h_slider { position: relative; }
.swiper.is-slider-case-work { overflow: hidden; }
.swiper.is-slider-case-work .swiper-slide { width: 27rem; max-width: 82vw; height: auto; }
.case_card { display: flex; flex-direction: column; }
.case_card_img {
  aspect-ratio: 16 / 11; width: 100%; object-fit: cover;
  border-radius: 1.25rem; border: 1px solid var(--border);
  background: var(--grey-100);
}
.case_card_title { margin-top: var(--space-4); font-size: var(--fs-h4); line-height: var(--lh-medium); letter-spacing: var(--ls-tight); }
.case_card_tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-3); }
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-round);
  font-size: var(--fs-small); color: var(--grey-800);
}
.tag.is-time { color: var(--grey-700); }

.bn_slider_wrap {
  display: flex; align-items: center; justify-content: center; gap: var(--space-6);
  margin-top: var(--space-8);
}
.bn_slider {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 56px;
  border: 1px solid var(--border); border-radius: var(--radius-round);
  color: var(--black);
  transition: background .4s ease, color .4s ease, border-color .4s ease, opacity .3s ease;
}
.bn_slider:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.bn_slider.is-disabled { opacity: .35; pointer-events: none; }
.swiper_counter { font-variant-numeric: tabular-nums; font-size: 1.25rem; letter-spacing: var(--ls-tight); color: var(--grey-700); }
.swiper_counter b { color: var(--black); font-weight: var(--fw-medium); }

/* ============================================================
   STACKING CARDS — s-work-cards (dark)
   ============================================================ */
.s-work-cards {
  position: relative;
  background: var(--black);
  border-radius: var(--radius-main);
  color: var(--white);
  padding-bottom: var(--section-space);
}
.s_work_cards_head {
  text-align: center;
  padding: var(--section-space) var(--margin) var(--space-6);
}
.s_work_cards_head h2 { font-size: var(--fs-h2); line-height: var(--lh-small); letter-spacing: var(--ls-tight); }
.s_work_cards_head p { margin-top: var(--space-3); color: var(--grey-700); font-size: var(--fs-large); }

/* sticky category pill nav */
.s_work_cards_nav_menu {
  position: sticky; top: calc(100dvh - 5.5rem); z-index: 25;
  display: flex; justify-content: center;
  padding: 0 var(--margin);
  margin-bottom: var(--space-8);
  pointer-events: none;
}
.s_work_cards_nav_list {
  pointer-events: auto;
  display: flex; align-items: center; gap: .25rem;
  padding: .5rem; max-width: 100%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-round);
  overflow-x: auto; scrollbar-width: none;
}
.s_work_cards_nav_list::-webkit-scrollbar { display: none; }
.s_work_cards_nav_link {
  flex: none;
  padding: .6rem 1rem; border-radius: var(--radius-round);
  color: rgba(255,255,255,.6); white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.s_work_cards_nav_link:hover { color: #fff; }
.s_work_cards_nav_link.is-active { background: var(--white); color: var(--black); }

/* sticky stacking cards */
.s_work_card_wrap {
  position: sticky; top: 2.5rem;
  min-height: 88vh;                 /* more scroll per card → slower, deliberate stacking */
  padding: var(--space-8) var(--margin);
  display: flex; flex-direction: column; justify-content: center;
}
.s_work_card_wrap:first-child { min-height: 78vh; }
.s_work_card {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--space-6);
  width: 100%; max-width: var(--container); margin-inline: auto;
  min-height: 37.5rem;
  padding: var(--space-8) var(--space-5) var(--space-8) var(--space-7);
  background: var(--white); color: var(--black);
  border-radius: 4rem;
  transform-origin: center top;
  box-shadow: 0 -8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  will-change: transform;
}
.s_work_card_left { display: flex; flex-direction: column; gap: var(--space-4); }
.s_work_card_index { font-size: var(--fs-small); color: var(--grey-700); font-variant-numeric: tabular-nums; }
.s_work_card_title { font-size: var(--fs-h3); line-height: var(--lh-medium); letter-spacing: var(--ls-tight); }
.s_work_card_text { color: var(--grey-800); max-width: 34ch; }
.s_work_card_foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); }
.s_work_card_avatars { display: flex; align-items: center; }
.s_work_card_avatar { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--white);
  margin-left: -12px; object-fit: cover; background: var(--grey-100); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.s_work_card_avatar:first-child { margin-left: 0; }
.s_work_card_avatars_count { margin-left: var(--space-3); font-size: var(--fs-small); color: var(--grey-700); }
.s_work_card_cta {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--grey-800);
  font-size: var(--fs-small);
}
.s_work_card_list { display: flex; flex-direction: column; gap: var(--space-4); align-self: center; }

.s_work_card_item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  border-radius: 2rem;
  transition: transform .5s cubic-bezier(.22,1,.36,1), background-color .4s ease;
}
.s_work_card_item:hover { background: var(--grey-100); }
.s_work_card_item_main { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.s_work_card_item_icon {
  width: 56px; height: 56px; border-radius: 16px; flex: none;
  object-fit: cover; background: var(--grey-100);
}
.s_work_card_item_info { min-width: 0; }
.s_work_card_item_title { font-size: var(--fs-large); line-height: var(--lh-small); }
.s_work_card_item_meta { margin-top: 4px; color: var(--grey-700); font-size: var(--fs-small); }
.s_work_card_item_meta .dot { color: var(--grey-600); margin: 0 .4rem; }
.s_work_card_item_icon_wrap {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 16px; flex: none;
  color: var(--grey-700);
  border-radius: var(--radius-round);
  transition: background-color .4s ease, color .4s ease;
}
.s_work_card_item_icon_wrap.is-case {
  background: var(--white); border: 1px solid var(--border);
  font-size: var(--fs-small);
}
.s_work_card_item_icon_wrap.is-tag {
  background: #f2f2f2; font-size: var(--fs-small);
}
.s_work_card_item:hover .s_work_card_item_icon_wrap { color: var(--black); }
.s_work_card_item:hover .s_work_card_item_icon_wrap.is-arrow { background: var(--black); color: var(--white); }

/* ============================================================
   PROJECTS TABLE — s-work-list
   ============================================================ */
.s-work-list { padding: var(--section-space) 0; }
.s_work_list_head_wrap { padding-inline: var(--margin); }
.s_work_list_title { font-size: var(--fs-title-72); line-height: var(--lh-small); letter-spacing: var(--ls-tight); }
.s_work_list_sub { margin-top: var(--space-3); color: var(--grey-700); font-size: var(--fs-large); max-width: 46ch; }

.s_work_list {
  width: 100%; max-width: var(--max-width);
  margin: var(--space-8) auto 0; padding-inline: var(--margin);
}
.s_work_list_row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.6fr 1.8fr 1.4fr auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}
.s_work_list_row.is-head {
  border-top: none;
  color: var(--grey-700); font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: var(--space-3);
}
.s_work_list_row:not(.is-head) { transition: background-color .3s ease; }
.s_work_list_row:not(.is-head):hover { background: var(--grey-100); }
.s_work_list_cell { min-width: 0; }
.s_work_list_cell.is-project { font-weight: var(--fw-medium); }
.s_work_list_cell.is-muted { color: var(--grey-800); }
.s_work_list_row_icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  opacity: 0; transition: opacity .4s ease, background-color .4s ease, color .4s ease;
}
.s_work_list_row:hover .s_work_list_row_icon { opacity: 1; }
.s_work_list_row_icon.is-live:hover { background: var(--black); color: var(--white); }

/* ============================================================
   FOOTER — s-footer
   ============================================================ */
.s-footer { }
.s_footer_marquee_band {
  background: var(--black); color: var(--white);
  padding: var(--space-6) 0; overflow: hidden;
}
.s_footer_marquee { display: flex; overflow: hidden; }
.s_footer_marquee .swiper-wrapper { transition-timing-function: linear !important; align-items: center; }
.s_footer_marquee .swiper-slide { width: auto; display: flex; align-items: center; gap: var(--space-6); padding-right: var(--space-6); }
.s_footer_marquee_text { font-size: var(--fs-title-72); line-height: var(--lh-tiny); white-space: nowrap; letter-spacing: var(--ls-tight); }
.s_footer_orb { width: 56px; height: 56px; object-fit: contain; flex: none; }

.s_footer_container {
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding: var(--space-8) var(--margin) var(--space-6);
}
.s_footer_top {
  display: grid; grid-template-columns: 1fr 1.2fr auto; gap: var(--space-8);
  align-items: start;
}
.s_footer_nav { display: flex; flex-direction: column; gap: var(--space-3); }
.s_footer_nav a { color: var(--black); width: fit-content; transition: color .3s ease; }
.s_footer_nav a:hover { color: var(--grey-700); }

.s_footer_mid { display: flex; flex-direction: column; align-items: flex-start; }
.s_footer_link_email { display: inline-flex; flex-direction: column; }

/* shimmering conic-gradient email — continuously "переливается" */
@property --email-angle {
  syntax: "<angle>"; initial-value: -12deg; inherits: false;
}
:root { --email-grad: #221C32 67.5deg, #39559D 108deg, #BECCFF 202deg, #9A68F6 271deg, #8B43FF 305deg, #5A3DAD 350deg; }
.s_footer_link_email { max-width: 100%; }
.s_footer_link_email_text {
  display: inline-block; max-width: 100%;
  font-size: clamp(0.95rem, 3.6vw, 1.45rem); line-height: var(--lh-large);
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
  -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: conic-gradient(from var(--email-angle) at 25% 24%, var(--email-grad));
  animation: emailShimmer 7s linear infinite;
}
.s_footer_link_email_line {
  height: 2px; width: 100%;
  background: conic-gradient(from var(--email-angle) at 25% 24%, var(--email-grad));
  animation: emailShimmer 7s linear infinite;
  transition: width .45s cubic-bezier(.65,0,.35,1);
}
.s_footer_link_email:hover .s_footer_link_email_line { width: 0; }
@keyframes emailShimmer { to { --email-angle: 348deg; } }
@media (prefers-reduced-motion: reduce) {
  .s_footer_link_email_text, .s_footer_link_email_line { animation: none; }
}

.s_footer_cta { margin-top: var(--space-6); }
.s_footer_cta_title { font-size: var(--fs-h3); line-height: var(--lh-medium); letter-spacing: var(--ls-tight); }
.s_footer_cta_title span { color: var(--grey-700); }
.s_footer_cta_btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: .85rem 2rem; border-radius: var(--radius-round);
  font-weight: var(--fw-medium); overflow: hidden;
}
.btn.is-primary { background: var(--black); color: var(--white); }
.btn.is-secondary { border: 1px solid var(--border-black); color: var(--black); transition: background .3s ease, color .3s ease; }
.btn.is-secondary:hover { background: var(--black); color: var(--white); }
.btn_arrow { position: relative; width: 20px; height: 20px; flex: none; overflow: hidden; }
.btn_arrow svg { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.btn_arrow .is-abs { transform: translate(-2rem, 2rem); }
.btn:hover .btn_arrow svg:not(.is-abs) { transform: translate(2rem, -2rem); }
.btn:hover .btn_arrow .is-abs { transform: translate(0,0); }

.s_footer_up {
  justify-self: end;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  transition: border-color .4s ease, background .4s ease, color .4s ease;
}
.s_footer_up:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.s_footer_proof {
  display: flex; align-items: center; gap: var(--space-6);
  margin-top: var(--space-8); padding: var(--space-6);
  background: var(--grey-100); border-radius: 2rem;
}
.s_footer_proof_badges { display: flex; align-items: center; gap: var(--space-6); flex: none; }
.s_footer_proof_badge { text-align: center; }
.s_footer_proof_badge b { display: block; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--ls-tight); }
.s_footer_proof_badge span { font-size: var(--fs-small); color: var(--grey-700); }
.s_footer_proof_text { color: var(--grey-800); }
.s_footer_proof_text b { color: var(--black); }

.s_footer_bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
  justify-content: space-between; align-items: flex-start;
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.s_footer_place_title { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.s_footer_place_text { color: var(--grey-700); font-size: var(--fs-small); margin-top: 4px; }
.s_footer_social { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.s_footer_social a { color: var(--black); transition: color .3s ease; }
.s_footer_social a:hover { color: var(--grey-700); }
.s_footer_copy { color: var(--grey-700); font-size: var(--fs-small); }

/* ============================================================
   SHOWCASE — mousemove parallax featured case
   ============================================================ */
.s-showcase {
  position: relative;
  margin: var(--section-space) var(--margin) 0;
  border-radius: var(--radius-main);
  background: var(--black); color: var(--white);
  overflow: clip;
  isolation: isolate;
}
.s_showcase_inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);
  align-items: center;
  padding: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  min-height: 34rem;
}
.s_showcase_left { display: flex; flex-direction: column; gap: var(--space-5); max-width: 30rem; }
.s_showcase_badge {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-round);
  font-size: var(--fs-small); color: rgba(255,255,255,.75);
}
.s_showcase_badge .live_dot { width: 8px; height: 8px; }
.s_showcase_title { font-size: var(--fs-h3); line-height: var(--lh-small); letter-spacing: var(--ls-tight); }
.s_showcase_text { color: rgba(255,255,255,.65); }
.s_showcase_stats { display: flex; gap: var(--space-8); margin-top: var(--space-2); }
.s_showcase_stat b { display: block; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--ls-tight); }
.s_showcase_stat span { font-size: var(--fs-small); color: rgba(255,255,255,.55); }
.s_showcase_cta {
  display: inline-flex; align-items: center; gap: .6rem; width: fit-content;
  padding: .8rem 1.4rem; margin-top: var(--space-2);
  background: var(--white); color: var(--black); border-radius: var(--radius-round);
  transition: transform .3s ease;
}
.s_showcase_cta:hover { transform: translateY(-2px); }

.s_showcase_right { position: relative; display: flex; justify-content: center; align-items: center; }
.s_showcase_device {
  position: relative; z-index: 2; width: 100%; max-width: 34rem;
  border-radius: 1.25rem;
  transition: opacity .45s ease;
}
.s_showcase_device.is-swap { opacity: 0; }

/* floating parallax shapes — IN FRONT of the device, framing it — transform via JS rAF lerp */
.s_showcase_shape {
  position: absolute; z-index: 3; pointer-events: none;
  width: clamp(4rem, 3rem + 6vw, 8rem); height: auto;
  will-change: transform; opacity: 1;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.45));
}
.s_showcase_shape.s1 { top: 2%;    left: -7%;  width: clamp(4.5rem, 3.6rem + 6vw, 8.5rem); }   /* lime orb, top-left */
.s_showcase_shape.s2 { top: 12%;   right: 1%;  width: clamp(3rem, 2.6rem + 3vw, 5rem); }        /* chevron, top-right */
.s_showcase_shape.s3 { bottom: 10%; right: 1%; width: clamp(3.6rem, 3rem + 4vw, 6rem); }        /* violet orb, bottom-right */
.s_showcase_shape.s4 { bottom: 3%;  left: 4%;  width: clamp(4.2rem, 3.4rem + 6vw, 7.5rem); }    /* blob, bottom-left */
.s_showcase_shape.s5 { top: 46%;   left: -9%;  width: clamp(2.8rem, 2.2rem + 2.8vw, 4.6rem); }  /* gear, mid-left */

/* tab bar */
.s_showcase_tabs {
  position: relative; z-index: 3;
  display: flex; justify-content: center; gap: .25rem;
  margin: 0 auto clamp(2rem, 1rem + 4vw, 3.5rem);
  padding: .5rem; width: fit-content; max-width: calc(100% - 2 * var(--margin));
  background: rgba(255,255,255,.06); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-round);
  overflow-x: auto; scrollbar-width: none;
}
.s_showcase_tabs::-webkit-scrollbar { display: none; }
.s_showcase_tab {
  flex: none; padding: .55rem 1.1rem; border-radius: var(--radius-round);
  color: rgba(255,255,255,.6); white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.s_showcase_tab:hover { color: #fff; }
.s_showcase_tab.is-active { background: var(--white); color: var(--black); }

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mobile_menu {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--black); color: var(--white);
  padding: 6rem var(--margin) var(--margin);
  display: flex; flex-direction: column; gap: var(--space-4);
  transform: translateY(-100%); transition: transform .5s cubic-bezier(.76,0,.24,1);
  visibility: hidden;
}
.mobile_menu.is-open { transform: translateY(0); visibility: visible; }
.mobile_menu a { font-size: var(--fs-h3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-white-10); }
.mobile_menu_close { position: absolute; top: 1.6rem; right: var(--margin); width: 44px; height: 44px; border: 1px solid var(--border-white-30); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .s_showcase_inner { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; }
  .s_showcase_left { max-width: none; align-items: center; }
  .s_showcase_stats { justify-content: center; }
  .s_showcase_right { order: -1; }
  .s_showcase_shape.s2, .s_showcase_shape.s5 { display: none; }
  .s_work_card { grid-template-columns: 1fr; gap: var(--space-6); min-height: 0; padding: var(--space-7) var(--space-5); }
  .s_work_card_left { gap: var(--space-3); }
  .s_work_card_cta { margin-top: var(--space-2); }
  .s_footer_top { grid-template-columns: 1fr; gap: var(--space-6); }
  .s_footer_up { justify-self: start; }
  .s_work_list_row { grid-template-columns: 1fr 1.6fr 1.4fr auto; }
  .s_work_list_cell.is-services, .s_work_list_row.is-head .is-services { display: none; }
}

@media (max-width: 767px) {
  .nav_bar_menu { display: none; }
  .nav_bar_container.is-active-main { max-width: none; }
  .nav_bar_container.is-active-main .nav_bar_logo_text { display: block; }
  .nav_hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 44px; height: 44px; margin-left: auto;
    border: 1px solid var(--border); border-radius: 50%;
  }
  .nav_bar_container { gap: var(--space-3); }
  .nav_hamburger span { width: 16px; height: 1.5px; background: var(--black); position: relative; }
  .nav_hamburger span::before, .nav_hamburger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--black); }
  .nav_hamburger span::before { top: -5px; } .nav_hamburger span::after { top: 5px; }

  /* stacking pile-up on mobile too (touch-tuned) */
  .s_work_card_wrap { position: sticky; top: 4.5rem; min-height: 84vh; padding: var(--space-4) var(--margin); }
  .s_work_card_wrap:first-child { min-height: 72vh; }
  /* category filter: fixed bottom dock, shown only while the cards section is in view (JS toggles .is-nav-visible) */
  .s_work_cards_nav_menu {
    position: fixed; left: 0; right: 0; bottom: 1rem; top: auto; z-index: 40; margin-bottom: 0;
    opacity: 0; visibility: hidden; transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .s-work-cards.is-nav-visible .s_work_cards_nav_menu { opacity: 1; visibility: visible; transform: none; }

  .s_work_banner { flex-direction: column; align-items: stretch; text-align: center; border-radius: 1.5rem; }
  .s_work_banner_text { font-size: var(--fs-body); }

  .s-showcase { margin-inline: 0; border-radius: 2rem; }
  .s_showcase_shape.s1, .s_showcase_shape.s3 { opacity: .7; }
  .s_showcase_stats { gap: var(--space-6); }

  /* row = icon | info(shrinks, breaks long words) | badge(fixed) — no overlap */
  .s_work_card_item { display: flex; align-items: center; gap: var(--space-3); grid-template-columns: none; }
  .s_work_card_item_main { flex: 1 1 auto; min-width: 0; }
  .s_work_card_item_icon { width: 48px; height: 48px; }
  .s_work_card_item_title { overflow-wrap: normal; word-break: normal; }
  .s_work_card_item_meta { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .s_work_card_item_icon_wrap { display: inline-flex; flex: none; padding: 0 .7rem; height: 34px; font-size: var(--fs-small); }
  .s_work_card_item_icon_wrap.is-arrow svg { width: 16px; height: 16px; }

  .s_work_list_row.is-head { display: none; }
  .s_work_list_row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem;
    grid-template-columns: none;
    position: relative; padding: var(--space-4) 2.5rem var(--space-4) 0;
  }
  .s_work_list_row .s_work_list_cell.is-project { order: 1; flex-basis: 100%; font-size: var(--fs-large); line-height: 1.2; }
  .s_work_list_row .s_work_list_cell.is-year,
  .s_work_list_row .s_work_list_cell.is-type,
  .s_work_list_row .s_work_list_cell.is-domain { order: 2; color: var(--grey-700); font-size: var(--fs-small); }
  .s_work_list_row .s_work_list_cell.is-year::after,
  .s_work_list_row .s_work_list_cell.is-type::after { content: "·"; margin-left: .55rem; color: var(--grey-600); }
  .s_work_list_row .s_work_list_cell.is-services { order: 3; flex-basis: 100%; color: var(--grey-800); font-size: var(--fs-small); }
  .s_work_list_row .s_work_list_row_icon { position: absolute; top: var(--space-4); right: 0; opacity: 1; }
  .s_footer_proof { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .s_footer_proof_badges { gap: var(--space-5); }
  .s_footer_bottom { gap: var(--space-5); }
}

@media (max-width: 479px) {
  .swiper.is-slider-case-work .swiper-slide { width: 20rem; }
}

/* ============================================================
   ROUND-3 POLISH
   ============================================================ */

/* ---- Accessibility: focus-visible ---- */
:where(a, button, .s_showcase_tab, .s_work_cards_nav_link, .table_filter, .bn_slider, .s_footer_up, .copy_btn, .s_work_card_item, .s_work_list_row):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--black);
  border-radius: var(--radius-small);
}
.s-showcase :focus-visible, .s-work-cards :focus-visible, .s_footer_marquee_band :focus-visible {
  box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--brand);
}

/* ---- Anchor offset so headings clear the floating nav ---- */
#about, #showcase, #work, #projects, #contact { scroll-margin-top: calc(var(--nav-height) + 1.5rem); }

/* ---- Nav glass + color inversion over dark sections ---- */
.nav_bar_container { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(255,255,255,.8); }
.nav_bar_container[data-theme="dark"] { background: rgba(18,18,20,.66); border-color: rgba(255,255,255,.14); }
.nav_bar_container[data-theme="dark"] .nav_link,
.nav_bar_container[data-theme="dark"] .nav_bar_logo_text { color: #fff; }
.nav_bar_container[data-theme="dark"] .nav_link:hover { color: rgba(255,255,255,.65); }
.nav_bar_container[data-theme="dark"] .nav_cta { background: #fff; color: var(--black); border-color: #fff; }
.nav_bar_container[data-theme="dark"] .nav_cta:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.nav_bar_container[data-theme="dark"] .nav_hamburger { border-color: rgba(255,255,255,.28); }
.nav_bar_container[data-theme="dark"] .nav_hamburger span,
.nav_bar_container[data-theme="dark"] .nav_hamburger span::before,
.nav_bar_container[data-theme="dark"] .nav_hamburger span::after { background: #fff; }

/* ---- Masked word reveal for headings ---- */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.02em; }
.rw-i { display: inline-block; transform: translateY(115%); transition: transform .72s cubic-bezier(.22,1,.36,1); }
.is-revealed .rw-i { transform: translateY(0); }

/* ---- Button color-mix crossfade (smooth simultaneous bg/text) ---- */
@property --btn-t { syntax: "<number>"; initial-value: 1; inherits: false; }
.btn.is-secondary, .nav_cta, .s_showcase_cta, .s_work_cards_nav_link, .table_filter {
  --btn-t: 1; transition: --btn-t .28s ease, color .28s ease, background-color .28s ease, border-color .28s ease;
}

/* ---- Hero slider: equal card heights ---- */
.swiper.is-slider-case-work .swiper-wrapper { align-items: stretch; }
.swiper.is-slider-case-work .swiper-slide { height: auto; }
.case_card { height: 100%; }
.case_card_tags { margin-top: auto; padding-top: var(--space-3); }

/* ---- Tech stack marquee ---- */
.s-tech { padding: var(--section-space-small) 0; overflow: hidden; }
.s_tech_head { margin-bottom: var(--space-5); }
.s_tech_marquee { position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s_tech_track { display: inline-flex; gap: var(--space-3); white-space: nowrap; will-change: transform;
  animation: techScroll 34s linear infinite; }
.s_tech_marquee:hover .s_tech_track { animation-play-state: paused; }
.tech_pill { flex: none; padding: .7rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius-round);
  font-size: var(--fs-body); color: var(--grey-800); background: var(--white); }
@keyframes techScroll { to { transform: translateX(-50%); } }

/* ---- Table filter pills ---- */
.s_work_list_filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--space-5); }
.table_filter { padding: .5rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-round);
  color: var(--grey-800); font-size: var(--fs-small); background: var(--white);
  background: color-mix(in srgb, var(--white) calc(100% * var(--btn-t)), var(--black) calc(100% * (1 - var(--btn-t))));
  color: color-mix(in srgb, var(--grey-800) calc(100% * var(--btn-t)), var(--white) calc(100% * (1 - var(--btn-t)))); }
.table_filter:hover { --btn-t: .5; }
.table_filter.is-active { --btn-t: 0; border-color: var(--black); }
.s_work_list_row.is-hidden { display: none !important; }

/* ---- Contact card + rotating starburst ---- */
.s_footer_contact_left { display: flex; flex-direction: column; }
.s_footer_email_row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.copy_btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-round); color: var(--grey-700);
  font-size: var(--fs-small); transition: color .3s ease, border-color .3s ease; }
.copy_btn:hover { color: var(--black); border-color: var(--border-light); }
.copy_btn.is-copied { color: var(--brand-600); border-color: var(--brand-600); }

.s_contact_card { position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  min-height: 15rem; padding: var(--space-6); border-radius: 2rem;
  background: var(--black); color: var(--white); text-decoration: none;
  transition: transform .35s cubic-bezier(.22,1,.36,1); }
.s_contact_card:hover { transform: translateY(-3px); }
.s_contact_burst { position: absolute; inset: -35%; z-index: -1; aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(154,104,246,0) 0deg 6deg, rgba(154,104,246,.20) 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0%, rgba(0,0,0,.5) 40%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 52%, #000 0%, rgba(0,0,0,.5) 40%, transparent 58%);
  animation: burstSpin 40s linear infinite; }
@keyframes burstSpin { to { transform: rotate(360deg); } }
.s_contact_avatar { width: 52px; height: 52px; border-radius: 14px; margin-bottom: auto; }
.s_contact_card_meta { display: flex; flex-direction: column; }
.s_contact_card_meta b { font-size: var(--fs-large); }
.s_contact_card_meta span { color: rgba(255,255,255,.6); font-size: var(--fs-small); }
.s_contact_card_cta { color: var(--brand); font-size: var(--fs-small); }
.s_footer_mid { display: grid; grid-template-columns: 1.7fr 0.85fr; gap: var(--space-6); align-items: stretch; }

/* ---- Project modal ---- */
.project_modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: var(--margin); background: rgba(13,13,13,.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.project_modal.is-open { opacity: 1; visibility: visible; }
.modal_panel { position: relative; width: 100%; max-width: 34rem; max-height: 88vh; overflow-y: auto;
  background: var(--white); color: var(--black); border-radius: 2rem; padding: var(--space-8) var(--space-7);
  transform: translateY(16px) scale(.98); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.project_modal.is-open .modal_panel { transform: none; }
.modal_close { position: absolute; top: var(--space-5); right: var(--space-5);
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; transition: background .3s ease, color .3s ease; }
.modal_close:hover { background: var(--black); color: var(--white); }
.modal_image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1rem; margin-bottom: var(--space-5); background: var(--grey-100); border: 1px solid var(--border); }
.modal_eyebrow { font-size: var(--fs-small); color: var(--grey-700); }
.modal_title { margin-top: .5rem; font-size: var(--fs-h4); line-height: var(--lh-small); letter-spacing: var(--ls-tight); }
.modal_summary { margin-top: var(--space-4); color: var(--grey-800); }
.modal_list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: .55rem; }
.modal_list li { position: relative; padding-left: 1.4rem; color: var(--grey-800); font-size: var(--fs-small); }
.modal_list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand-600); }
.modal_actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.modal_actions .btn { padding: .8rem 1.4rem; }

/* ---- Mobile menu enrichment ---- */
.mobile_menu { justify-content: flex-start; gap: 0; padding: var(--space-5) var(--margin) var(--space-6); }
.mobile_menu_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.mobile_menu_brand { display: flex; align-items: center; gap: .55rem; font-size: 1.25rem; font-weight: var(--fw-bold); }
.mobile_menu_links { display: flex; flex-direction: column; gap: 0; }
.mobile_menu_foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-top: var(--space-6); }
.mobile_menu_foot .live_pill { background: rgba(255,255,255,.14); }
.mobile_menu_cta { background: var(--white); color: var(--black); border-color: var(--white); width: 100%; justify-content: center; padding: 1rem; }
.mobile_menu_cta:hover { background: transparent; color: #fff; border-color: var(--border-white-30); }
.mobile_menu_contacts { display: flex; flex-direction: column; gap: .4rem; }
.mobile_menu_contacts a { font-size: var(--fs-small); color: rgba(255,255,255,.7); border: none; padding: 0; }

@media (max-width: 991px) {
  .s_footer_mid { grid-template-columns: 1fr; }
  .s_contact_card { min-height: 12rem; }
}

/* ---- Reduced motion: neutralize the rest ---- */
@media (prefers-reduced-motion: reduce) {
  .rw-i { transform: none !important; transition: none !important; }
  .s_tech_track { animation: none !important; }
  .s_contact_burst { animation: none !important; }
  .live_dot::after { animation: none !important; }
  .s_work_card_item:hover, .s_work_card_item { transition: background-color .01ms; }
  .s_showcase_shape { transform: none !important; }
}

/* ============================================================
   MOBILE OVERHAUL (round-4)
   ============================================================ */

/* Showcase shape motion is JS-driven (autonomous drift + mouse parallax) — see main.js. */

@media (max-width: 767px) {
  /* full-width, stacked CTAs (footer + modal) — fixes ragged wrap */
  .s_footer_cta_btns { flex-direction: column; align-items: stretch; }
  .s_footer_cta_btns .btn { width: 100%; justify-content: center; }
  .modal_actions { flex-direction: column; }
  .modal_actions .btn { width: 100%; justify-content: center; }

  /* WCAG 2.2 min 44px tap targets */
  .table_filter { min-height: 44px; padding: .6rem 1.1rem; }
  .s_showcase_tab { min-height: 44px; }
  .s_work_cards_nav_link { min-height: 44px; display: inline-flex; align-items: center; }
  .copy_btn { min-height: 40px; }
  .s_footer_nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .s_footer_social a { min-height: 38px; display: inline-flex; align-items: center; }

  /* compact stacking cards so they fit the sticky pile */
  .s_work_card { padding: var(--space-6) var(--space-5); }
  .s_work_card_list { gap: var(--space-3); }
  .s_work_card_item { padding: var(--space-3); }

  /* showcase tabs: full-width scroll, no rounded-pill clipping, graceful edge fade */
  .s_showcase_tabs {
    width: 100%; max-width: 100%; justify-content: flex-start;
    background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: .25rem 0; gap: .35rem; scroll-padding-inline: 22%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .s_showcase_tab { flex: none; }

  /* balance */
  .s_footer_up { justify-self: center; }
}

@media (max-width: 479px) {
  .s_footer_proof_badges { flex-wrap: wrap; row-gap: var(--space-4); }
  .s_footer_proof_badge { flex: 1 1 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .s_showcase_shape { animation: none !important; }
  .s_work_card { animation: none !important; }
}