/* ---------- Self-hosted font (Satoshi) ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root { --brand-font: "Satoshi"; --hr: rgba(0,0,0,.08); --ink60: rgba(0,0,0,.6); }
html, body { background:#fff; color:#000; }
body { font-feature-settings:"ss01","liga" on; }

.hairline { box-shadow: inset 0 -1px 0 var(--hr); }
.hairline-top { box-shadow: inset 0 1px 0 var(--hr); }
.cap { letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; }
.pill { border:1px solid #000; border-radius:999px; padding:.7rem 1rem; transition:transform .18s ease, background .18s ease, color .18s ease; }
.pill:hover { transform:translateY(-2px); background:#000; color:#fff; }
.ghost { border-color: rgba(0,0,0,.25); }
.ghost:hover { border-color:#000; }
.nav-link { padding:.6rem .9rem; border-radius:999px; transition: background .18s ease, transform .18s ease; }
.nav-link:hover { background:rgba(0,0,0,.06); transform: translateY(-1px); }
.kicker { color:var(--ink60); }
.hr { height:1px; background:var(--hr); transform:scaleY(.5); transform-origin:0 0; }

/* IMPORTANT: Default content is visible even if animations fail */
.reveal { opacity:1; transform:none; }

.pin-head { position: sticky; top: 84px; z-index: 10; background:linear-gradient(#fff,#fff); }
.card { border:1px solid rgba(0,0,0,.08); border-radius:18px; background:rgba(255,255,255,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--glass); }
.btn-ig { display:inline-flex; align-items:center; gap:.6rem; border:1px solid #000; border-radius:999px; padding:.85rem 1.1rem; transition:.18s ease; }
.btn-ig:hover { background:#000; color:#fff; transform: translateY(-2px); }
.badge { border:1px solid rgba(0,0,0,.2); border-radius:999px; padding:.35rem .7rem; font-size:.75rem; color:#000; }
details { border-top:1px solid var(--hr); padding:1rem 0; }
summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
summary::-webkit-details-marker { display:none; }
.rotate { transition: transform .25s ease; }
details[open] .rotate { transform: rotate(45deg); }

/* Smooth FAQ / details animation helpers */
details .details-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 360ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
  will-change: height, opacity;
}

/* When JS marks it open, allow visible */
details.open .details-content {
  opacity: 1;
}

/* rotate chevron already exists via .rotate; ensure summary remains interactive */
summary { cursor: pointer; }

/* Respect reduced-motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
  details .details-content { transition: none !important; }
}


/* Testimonials rail */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns: calc(33.333% - 10px); gap:15px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.rail > * { scroll-snap-align:start; }
@media (max-width: 1024px){ .rail{ grid-auto-columns: calc(50% - 10px);} }
@media (max-width: 640px){ .rail{ grid-auto-columns: 100%;} }


/* If JS is disabled entirely, hide preloader and show content */


/* Sticky nav shadow on scroll */
.nav-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

/* Hero visual placeholder (swap with your art if desired) */
.hero-visual { border:1px solid rgba(0,0,0,.08); border-radius:24px; height:420px; background:
  radial-gradient(80% 120% at 50% 0%, rgba(0,0,0,.05), transparent 60%),
  linear-gradient(120deg, rgba(0,0,0,.04), transparent 60%); }

  /* subtle active nav state (matches existing hover treatment) */
.nav-link.active,
.nav-link[aria-current="page"] {
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
  font-weight: 500;
}

/* --------------------------
  Custom sitewide scrollbar
  Thin, rounded, auto-fade behavior
  Works in WebKit (Chrome/Safari/Edge) + Firefox fallback
  --------------------------*/

/* Firefox: use thin scrollbar and colors */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent; /* thumb, track */
}

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  /* keep subtle so page background shows through */
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  border: 2px solid transparent; /* creates padding effect */
  background-clip: padding-box;
  transition: background-color .22s ease, opacity .22s ease, transform .22s ease;
  opacity: 0.6; /* base visibility */
}

/* Hover/focus state for easier grabbing */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active,
html.scrolling ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.30);
  opacity: 1;
  transform: translateZ(0); /* trigger GPU compose */
}

/* Corner (when both scrollbars present) */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Accessibility: keyboard focus on scrollable element (for some browsers) */
:focus::-webkit-scrollbar-thumb {
  outline: 3px solid rgba(0,0,0,0.06);
}

/* Mobile/touch: hide native scrollbars so touch UI remains clean */
@media (pointer: coarse) {
  ::-webkit-scrollbar { display: none; } /* only hides on WebKit-based mobile */
  html { scrollbar-width: none; } /* firefox mobile */
}

/* Optional: slightly larger thumb on larger viewport for precision */
@media (min-width: 1280px) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb { border: 2px solid transparent; }
}

/* === POLISH: focus, error, divider, overlay fade === */

/* Glassy focus for inputs */
input:focus, textarea:focus {
  box-shadow: 0 6px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.35);
  border-color: rgba(0,0,0,0.18);
  outline: none;
}

/* Subtle invalid field styling */
.input-error {
  border-color: rgba(185,28,28,0.9) !important;
  box-shadow: 0 6px 20px rgba(185,28,28,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Small helper error text */
.form-error {
  color: rgb(185 28 28);
  font-size: 0.875rem;
  margin-top: 0.4rem;
}

/* Vertical divider for large screens between left & right columns */
@media (min-width: 1024px) {
  .contact-divider {
    border-left: 1px solid rgba(0,0,0,0.06);
    padding-left: 1.5rem;
  }
}

/* Lottie overlay fade timing smoothing */
#lottieOverlay {
  transition: opacity .45s cubic-bezier(.2,.9,.2,1);
}
#lottieOverlay.hidden { opacity: 0; pointer-events: none; }
#lottieOverlay.visible { opacity: 1; pointer-events: auto; }

/* Subtle hover lift for .card buttons (already exist but tuned) */
.card .btn-ig {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.card .btn-ig:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

/* Small spacing/timing for reveal animations to feel smooth */
.reveal {
  will-change: transform, opacity;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.9,.2,1);
}