/* ══════════════════════════════════════════════════════════
   SAGEN GRAPHIX — shared styles (all pages)
   Palette: forest #224332 · moss #397354 · indigo #404671
            haze #707ba6 · ice #d0e0e3
   ══════════════════════════════════════════════════════════ */

:root {
  --forest: #224332; --pine: #1b3527; --deep: #152a1f; --abyss: #101f17;
  --moss: #397354; --mint: #a7c9b3;
  --indigo: #404671; --night: #343b60; --haze: #707ba6;
  --ice: #d0e0e3; --frost: #e7edee;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono:  "Space Mono", "Courier New", monospace;
  --font-sans:  "Space Grotesk", system-ui, sans-serif;
}

/* ── base + readability ─────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  font-weight: 400;              /* never thin — 300 was hard to read */
  letter-spacing: 0.005em;
  overflow-x: hidden;
}
::selection { background: #397354; color: #d0e0e3; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #152a1f; }
::-webkit-scrollbar-thumb { background: #397354; border: 2px solid #152a1f; }
::-webkit-scrollbar-thumb:hover { background: #707ba6; }
:focus-visible { outline: 1px dashed #a7c9b3; outline-offset: 3px; }
.lucide { stroke-width: 1.5; flex-shrink: 0; }

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #d0e0e3;
  transition: background-color 99999s ease-in-out 0s;
}
select option { background: #224332; color: #d0e0e3; }

/* ── shared typography (readability-tuned) ──────────────── */
.kicker {                       /* section labels: [ 01 — What we do ] */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}
.mono-m {                       /* metadata, list items, card labels */
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.mono-s {                       /* the smallest legal type on the site */
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
}
.btn-type {                     /* buttons & nav */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.copy {                         /* main body copy — generously sized */
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
}
.copy-sm {                      /* secondary copy */
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
}

/* ── film grain ─────────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  z-index: 80; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(10) infinite;
}
@keyframes grainShift {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)}
  20%{transform:translate(3%,2%)} 30%{transform:translate(-4%,1%)}
  40%{transform:translate(2%,-4%)} 50%{transform:translate(-3%,3%)}
  60%{transform:translate(4%,-2%)} 70%{transform:translate(-1%,4%)}
  80%{transform:translate(3%,1%)} 90%{transform:translate(-4%,-2%)}
}

/* ── loader (home page only) ────────────────────────────── */
#loader { transition: transform 1s cubic-bezier(.87,0,.13,1); }
#loader.done { transform: translateY(-101%); }
#loader .bar { transform-origin: left; transform: scaleX(0); transition: transform .2s linear; }
.h-mask { display: block; overflow: hidden; }
.h-line { display: block; transform: translateY(115%); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.h-line > span { display: block; }
body.loaded .h-line { transform: translateY(0); }

/* ── scroll reveals ─────────────────────────────────────── */
.reveal, .reveal-x {
  opacity: 0; transform: translateY(30px);
  transition: opacity .95s cubic-bezier(.22,1,.36,1) var(--d,0s),
              transform .95s cubic-bezier(.22,1,.36,1) var(--d,0s);
}
.reveal-x { transform: translateX(-36px); }
.reveal.in, .reveal-x.in { opacity: 1; transform: none; }

/* ── marquee ────────────────────────────────────────────── */
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── nav link sweep + active page ───────────────────────── */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); transform-origin: left; }
.navlink.active { color: #a7c9b3; }

/* ── buttons ────────────────────────────────────────────── */
.btn-sweep { position: relative; isolation: isolate; overflow: hidden; }
.btn-sweep::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; opacity: .08; transform: translateY(101%);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.btn-sweep:hover::before { transform: translateY(0); }

/* ── work / media hover ─────────────────────────────────── */
.work-media img { transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .8s ease; filter: saturate(.82); }
.work-card:hover .work-media img { transform: scale(1.055); filter: saturate(1.06); }
.work-card .w-arrow { transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease; opacity: .35; }
.work-card:hover .w-arrow { transform: translate(6px,-6px); opacity: 1; }
#workPill {
  position: absolute; z-index: 20; pointer-events: none; opacity: 0;
  transform: translate(-50%,-50%) scale(.7); transition: opacity .25s ease, transform .25s ease;
}
#workPill.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ── studio images band ─────────────────────────────────── */
.zoom-img img { transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .8s ease; filter: saturate(.85); }
.zoom-img:hover img { transform: scale(1.04); filter: saturate(1); }

/* ── big service index rows (home + services) ───────────── */
.index-row { transition: background-color .45s ease, color .45s ease, padding-left .45s cubic-bezier(.22,1,.36,1); }
.index-row:hover { padding-left: 1.25rem; }
.index-row .row-arrow { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.index-row:hover .row-arrow { transform: translateX(8px); }

/* ── FAQ accordion ──────────────────────────────────────── */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .f-ic { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.faq[open] .f-ic { transform: rotate(45deg); }
.faq .f-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.faq[open] .f-body { grid-template-rows: 1fr; }
.faq .f-inner { overflow: hidden; }

/* ── site logo ──────────────────────────────────────────── */
.site-logo { display: inline-flex; align-items: center; gap: 0; height: 32px; }
.site-logo svg { height: 100%; width: auto; }
.site-logo-lg { height: 40px; }

/* ── misc ───────────────────────────────────────────────── */
.spinner { width: 14px; height: 14px; border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-line { width: 1px; height: 56px; background: linear-gradient(#a7c9b3, transparent);
  animation: scrollPulse 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes scrollPulse {
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-x, .h-line { opacity: 1 !important; transform: none !important; }
  #loader { display: none !important; }
  .faq .f-body { grid-template-rows: 1fr; }
}