/* ============================================================
   COMPONENTS — nav, buttons, cards, rows, forms, footer, cursor
   ============================================================ */

/* ================= NAVIGATION ================= */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  transition: background var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out),
              backdrop-filter var(--t-micro) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-nav .nav-inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}
.site-nav.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.brand {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  z-index: 1002; position: relative;
}
.brand .brand-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow); flex: none;
}
.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.nav-links a {
  font-size: var(--fs-small); font-weight: var(--weight-medium);
  color: var(--text-2); position: relative; padding-block: var(--sp-2);
  transition: color var(--t-micro) var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-micro) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.nav-cta { display: inline-flex; align-items: center; gap: var(--sp-4); }

/* Burger (mobile) */
.nav-burger {
  display: none; z-index: 1002; position: relative;
  width: 44px; height: 44px; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
}
.nav-burger span {
  display: block; width: 26px; height: 2px; background: var(--text);
  transition: transform var(--t-micro) var(--ease-out), opacity var(--t-micro);
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile full-screen menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(10, 10, 11, 0.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--gutter) var(--sp-8);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 600ms var(--ease-swift);
  visibility: hidden;
}
body.menu-open .mobile-menu { clip-path: inset(0 0 0% 0); visibility: visible; }
body.menu-open { overflow: hidden; }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-menu a.mlink {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2.25rem, 9vw, 3.5rem); letter-spacing: var(--tracking-tight);
  color: var(--text); padding-block: var(--sp-2);
  display: flex; align-items: baseline; gap: var(--sp-4);
  opacity: 0; transform: translateY(24px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color var(--t-micro);
}
body.menu-open .mobile-menu a.mlink { opacity: 1; transform: none; }
.mobile-menu a.mlink .idx { font-size: var(--fs-small); color: var(--accent); font-weight: var(--weight-medium); }
.mobile-menu a.mlink:hover { color: var(--accent-text); }
body.menu-open .mobile-menu a.mlink:nth-child(1) { transition-delay: 120ms; }
body.menu-open .mobile-menu a.mlink:nth-child(2) { transition-delay: 170ms; }
body.menu-open .mobile-menu a.mlink:nth-child(3) { transition-delay: 220ms; }
body.menu-open .mobile-menu a.mlink:nth-child(4) { transition-delay: 270ms; }
body.menu-open .mobile-menu a.mlink:nth-child(5) { transition-delay: 320ms; }
body.menu-open .mobile-menu a.mlink:nth-child(6) { transition-delay: 370ms; }
.mobile-menu .mfoot {
  margin-top: auto; padding-top: var(--sp-8);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-small);
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta .btn { display: none; }
}

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1rem 1.75rem; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out),
              box-shadow var(--t-micro) var(--ease-out);
  white-space: nowrap; position: relative;
}
.btn .arr { transition: transform var(--t-micro) var(--ease-out); display: inline-block; }
.btn:hover .arr { transform: translate(3px, -3px); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: var(--accent-text); color: #0a0a0b;
  box-shadow: 0 8px 32px -8px var(--accent-glow);
  transform: translateY(-2px);
}
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); background: var(--hover-wash); transform: translateY(-2px); }
.btn-light { background: var(--text); color: var(--text-invert); }
.btn-light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-sm { padding: 0.7rem 1.25rem; font-size: 0.78rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--t-micro), color var(--t-micro), gap var(--t-micro) var(--ease-out);
}
.link-arrow:hover { border-color: var(--accent); color: var(--accent-text); gap: var(--sp-3); }

/* ================= MARQUEE ================= */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  padding-block: var(--sp-5); user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track span { padding-right: var(--sp-8); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 2.5vw, 2rem); letter-spacing: var(--tracking-tight);
  color: var(--text-3); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-8);
}
.marquee-track span i { color: var(--accent); font-style: normal; font-size: 0.7em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ================= SERVICE ROWS ================= */
.service-list { border-top: 1px solid var(--line); }
.service-row {
  display: grid; grid-template-columns: 5.5rem 1fr auto 3rem; align-items: center;
  gap: var(--sp-5); padding: clamp(1.5rem, 3vw, 2.5rem) var(--sp-2);
  border-bottom: 1px solid var(--line);
  position: relative; isolation: isolate;
  transition: padding var(--t-med) var(--ease-out);
}
.service-row::before { /* hover wash */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--accent-soft), transparent 65%);
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
.service-row:hover::before, .service-row:focus-within::before { opacity: 1; }
.service-row .num {
  font-family: var(--font-display); font-size: var(--fs-small);
  color: var(--text-3); letter-spacing: var(--tracking-label);
  transition: color var(--t-micro), transform var(--t-med) var(--ease-out);
}
.service-row:hover .num { color: var(--accent-text); transform: translateX(6px); }
.service-row h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  transition: transform var(--t-med) var(--ease-out), color var(--t-micro);
}
.service-row:hover h3, .service-row:focus-within h3 { transform: translateX(12px); }
.service-row .tags {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end;
  max-width: 22rem;
}
.service-row .tags li {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line);
  padding: 0.35rem 0.7rem; border-radius: var(--r-pill); white-space: nowrap;
}
.service-row .go {
  width: 3rem; height: 3rem; border: 1px solid var(--line-strong); border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  transition: background var(--t-micro), border-color var(--t-micro), transform var(--t-med) var(--ease-out), color var(--t-micro);
}
.service-row:hover .go, .service-row:focus-within .go {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: rotate(-45deg);
}
.service-row .desc {
  grid-column: 2 / -1; color: var(--text-2); font-size: var(--fs-small);
  max-width: 56ch; padding-top: var(--sp-2);
}
/* floating preview (desktop hover) */
.service-preview {
  position: fixed; z-index: 900; width: 300px; aspect-ratio: 4/3;
  pointer-events: none; opacity: 0; transform: scale(0.9) rotate(-4deg);
  transition: opacity var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out);
  overflow: hidden; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
}
.service-preview.is-on { opacity: 1; transform: scale(1) rotate(-2deg); }
.service-preview img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .service-row { grid-template-columns: 3.5rem 1fr 2.75rem; }
  .service-row .tags { display: none; }
  .service-row .go { width: 2.75rem; height: 2.75rem; }
  .service-preview { display: none; }
}

/* ================= PROJECT CARDS (editorial) ================= */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.project { position: relative; display: block; }
.project .media {
  position: relative; overflow: hidden; border-radius: var(--r-sm);
  background: var(--bg-elev); aspect-ratio: 4/3;
}
.project .media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 1000ms var(--ease-out), filter 1000ms var(--ease-out);
  filter: saturate(0.92);
}
.project:hover .media img { transform: scale(1); filter: saturate(1.05); }
.project .media .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,11,0.55));
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
.project:hover .media .veil { opacity: 1; }
.project .meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-4);
}
.project .meta .cat {
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-text);
}
.project .meta .year { font-size: var(--fs-small); color: var(--text-3); }
.project h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); margin-top: var(--sp-2); }
.project .blurb { color: var(--text-3); font-size: var(--fs-small); margin-top: var(--sp-2); max-width: 44ch; }
.project .view {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--weight-medium);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.project .view .arr { transition: transform var(--t-micro) var(--ease-out); color: var(--accent-text); }
.project:hover .view .arr { transform: translateX(6px); }

/* editorial spans */
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; }
.project.tall .media { aspect-ratio: 3/4; }
.project.wide .media { aspect-ratio: 16/8; }
.project.offset { margin-top: clamp(2rem, 6vw, 5rem); }

@media (max-width: 900px) {
  .work-grid > * { grid-column: span 12 !important; }
  .project.offset { margin-top: 0; }
  .project .media, .project.tall .media, .project.wide .media { aspect-ratio: 4/3; }
}

/* ================= STATS (editorial) ================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat + .stat { padding-left: var(--sp-6); }
.stat .value {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 4.5vw, 4rem); letter-spacing: var(--tracking-tight);
  line-height: 1; display: flex; align-items: baseline; gap: 0.1em;
}
.stat .value .suffix { color: var(--accent); font-size: 0.6em; }
.stat .caption { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-small); max-width: 20ch; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--sp-5) 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--line); padding-right: var(--sp-4); }
  .stat:nth-child(even) { padding-left: var(--sp-4); }
}

/* ================= PROCESS ================= */
.process-rail { position: relative; }
.process-track { display: grid; grid-template-columns: repeat(6, minmax(300px, 1fr)); gap: var(--sp-6); }
.pstep {
  border-top: 1px solid var(--line-strong); padding-top: var(--sp-5);
  position: relative;
}
.pstep::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--accent); transition: width 1200ms var(--ease-out);
}
.pstep.is-in::before { width: 100%; }
.pstep .num {
  font-family: var(--font-display); font-size: var(--fs-small);
  color: var(--accent-text); letter-spacing: var(--tracking-label);
}
.pstep h3 { margin-top: var(--sp-4); font-size: var(--fs-h3); }
.pstep p { margin-top: var(--sp-3); font-size: var(--fs-small); }

/* horizontal scroll treatment (desktop) */
@media (min-width: 1024px) {
  .process-horizontal { overflow: hidden; }
  .process-horizontal .process-pin {
    position: sticky; top: 0; height: 100vh; max-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
  }
  .process-horizontal .process-viewport { overflow: visible; }
  .process-horizontal .process-track {
    display: flex; gap: clamp(2rem, 4vw, 4rem); width: max-content;
    will-change: transform;
  }
  .process-horizontal .pstep { width: clamp(300px, 26vw, 400px); flex: none; }
}
/* vertical stack (tablet + mobile) */
@media (max-width: 1023px) {
  .process-track { grid-template-columns: 1fr; }
}

/* ================= INDUSTRIES ticker / tags ================= */
.ind-ticker { border-block: 1px solid var(--line); }
.ind-tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ind-tag {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing: var(--tracking-tight);
  color: var(--text-2); border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  transition: color var(--t-micro), border-color var(--t-micro), background var(--t-micro), transform var(--t-micro) var(--ease-out);
  cursor: default;
}
.ind-tag:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); }

/* ================= TESTIMONIALS ================= */
.testimonial { max-width: 1000px; }
.testimonial blockquote {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(1.6rem, 3.4vw, 2.75rem); line-height: 1.25;
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.testimonial blockquote .q { color: var(--accent); }
.testimonial .who { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); }
.testimonial .who .avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--accent-text);
}
.testimonial .who .name { font-weight: var(--weight-medium); color: var(--text); }
.testimonial .who .role { font-size: var(--fs-small); color: var(--text-3); }
.testi-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); }
.testi-dot {
  width: 44px; height: 4px; border-radius: var(--r-pill); background: var(--line-strong);
  transition: background var(--t-micro); position: relative; overflow: hidden;
}
.testi-dot[aria-current="true"] { background: var(--accent); }

/* ================= FORMS ================= */
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2); font-weight: var(--weight-medium);
}
.field label .req { color: var(--accent-text); }
.field input, .field textarea, .field select {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.95rem 1.1rem; color: var(--text);
  width: 100%; transition: border-color var(--t-micro), background var(--t-micro), box-shadow var(--t-micro);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9a9b0' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); background: var(--bg-elev-2);
  box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.field .error-msg {
  display: none; font-size: var(--fs-small); color: #ff7a59;
}
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #ff7a59; }
.field.is-invalid .error-msg { display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* honeypot */

.form-note { font-size: var(--fs-small); color: var(--text-3); }
.form-status { display: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-small); }
.form-status.is-ok { display: block; background: rgba(46, 160, 90, 0.12); border: 1px solid rgba(46,160,90,0.4); color: #7bd9a3; }
.form-status.is-err { display: block; background: rgba(255, 78, 27, 0.08); border: 1px solid rgba(255,78,27,0.4); color: #ff8a5c; }
.btn.is-loading { pointer-events: none; opacity: 0.7; }
.btn.is-loading .btn-label::after { content: "…"; }

/* ================= CTA band ================= */
.cta-band {
  position: relative; overflow: hidden; border-block: 1px solid var(--line);
  background: var(--bg-elev);
}
.cta-band .cta-bg { position: absolute; inset: 0; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta-band .cta-inner { position: relative; z-index: 1; text-align: left; }
.cta-band h2 { font-size: var(--fs-display); max-width: 14ch; }
.cta-band h2 .accent-word { color: var(--accent-text); }
.cta-band p { margin-top: var(--sp-5); font-size: var(--fs-lead); }
.cta-band .btn-row { margin-top: var(--sp-8); display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ================= FOOTER ================= */
.site-footer { border-top: 1px solid var(--line); padding-top: var(--section-pad); overflow: hidden; }
.footer-giant {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(3.2rem, 12.5vw, 12rem);
  letter-spacing: var(--tracking-display); line-height: 0.95;
  white-space: nowrap; user-select: none;
}
.footer-giant .dot { color: var(--accent); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8);
  padding-block: var(--sp-10);
}
.footer-grid h4 {
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-weight: var(--weight-medium);
}
.footer-grid ul { display: grid; gap: var(--sp-3); }
.footer-grid a { color: var(--text-2); font-size: var(--fs-small); transition: color var(--t-micro); }
.footer-grid a:hover { color: var(--accent-text); }
.footer-tag { color: var(--text-2); font-size: var(--fs-lead); margin-top: var(--sp-4); max-width: 32ch; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-6); border-top: 1px solid var(--line);
  color: var(--text-3); font-size: var(--fs-small); flex-wrap: wrap;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ================= CUSTOM CURSOR (pointer devices only) ================= */
.cursor-dot, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor-dot, .cursor-ring {
    display: block; position: fixed; top: 0; left: 0; z-index: 2001;
    pointer-events: none; border-radius: 50%;
  }
  .cursor-dot { width: 6px; height: 6px; background: var(--accent); }
  .cursor-ring {
    width: 36px; height: 36px; border: 1px solid rgba(244,243,239,0.35);
    display: grid; place-items: center;
    transition: width var(--t-micro) var(--ease-out), height var(--t-micro) var(--ease-out),
                background var(--t-micro), border-color var(--t-micro);
  }
  .cursor-ring .cursor-label {
    font-family: var(--font-display); font-size: 0.62rem; font-weight: var(--weight-bold);
    letter-spacing: 0.12em; color: #fff; opacity: 0; transition: opacity var(--t-micro);
  }
  .cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--accent); }
  .cursor-ring.is-view { width: 88px; height: 88px; background: var(--accent); border-color: var(--accent); }
  .cursor-ring.is-view .cursor-label { opacity: 1; }
  .cursor-ring.is-down { transform-origin: center; }
}

/* ================= MISC ================= */
.scroll-hint {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3);
}
.scroll-hint .line { width: 1px; height: 44px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-hint .line::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--accent); animation: scroll-line 1.8s var(--ease-swift) infinite;
}
@keyframes scroll-line { to { top: 110%; } }

.counter-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-display); color: var(--text-3); font-size: var(--fs-small);
}
.counter-chip .cur { color: var(--text); font-size: 1.1rem; }

.page-hero { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)); }
.breadcrumb { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--line-strong); }