/* ============================================================
   GS Graphics — design tokens, matched to brand logo
   Palette: paper white / navy / magenta / orange / gold
   Type: Fraunces (display) · Inter (body) · IBM Plex Mono (specs)
   Signature: registration crop-marks + Pantone-style swatch bars
   + brand gradient (navy → magenta → orange → gold)
   ============================================================ */

:root {
  --paper: #F8F9FD;
  --paper-dim: #EEF0FA;
  --ink: #101A46;
  --ink-soft: #202C63;
  --ink-mute: #5C6488;
  --press: #E31C79;
  --press-dark: #B71463;
  --amber: #F7941D;
  --gold: #FFC72C;
  --line: #E1E4F0;
  --paper-rgb: 248, 249, 253;
  --brand-gradient: linear-gradient(100deg, #101A46 0%, #E31C79 45%, #F7941D 78%, #FFC72C 100%);
  --brand-gradient-soft: linear-gradient(100deg, #E31C79 0%, #F7941D 60%, #FFC72C 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-display { font-family: 'Fraunces', Georgia, serif; }
.font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

::selection { background: var(--press); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--press);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Registration crop-marks (signature motif) ----------
   Printer's crosshair registration marks used as a recurring
   corner ornament on hero panels & section frames. */
.crop-marks { position: relative; }
.crop-marks::before,
.crop-marks::after,
.crop-marks .cm-tr,
.crop-marks .cm-br {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink-mute), var(--ink-mute)) center / 100% 1px no-repeat,
    linear-gradient(90deg, var(--ink-mute), var(--ink-mute)) center / 1px 100% no-repeat;
  opacity: 0.55;
}
.crop-marks::before { top: -11px; left: -11px; }
.crop-marks::after { bottom: -11px; left: -11px; }
.crop-marks .cm-tr { top: -11px; right: -11px; }
.crop-marks .cm-br { bottom: -11px; right: -11px; }

/* ---------- Pantone-style swatch eyebrow ----------
   A strip of colour chips used instead of a plain text label
   above section headings — a nod to print colour swatches. */
.swatch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.swatch-eyebrow .chips { display: inline-flex; gap: 3px; }
.swatch-eyebrow .chips span {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.swatch-eyebrow .chips span:nth-child(1) { background: var(--ink); }
.swatch-eyebrow .chips span:nth-child(2) { background: var(--press); }
.swatch-eyebrow .chips span:nth-child(3) { background: var(--amber); }
.swatch-eyebrow .chips span:nth-child(4) { background: var(--gold); }

/* ---------- Gradient text (brand) ---------- */
.grad-text {
  background: var(--brand-gradient-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- CMYK dot texture (used sparingly as ambient decor) ---------- */
.dot-texture {
  background-image: radial-gradient(var(--ink) 0.8px, transparent 0.8px);
  background-size: 14px 14px;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Header ---------- */
#site-header { transition: box-shadow .3s ease, padding .3s ease, background-color .3s ease; }
#site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(20,25,43,0.25); }

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--press);
  transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Buttons ---------- */
.btn-press {
  background: var(--brand-gradient-soft);
  background-size: 160% 100%;
  background-position: 0% 0%;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background-position .35s ease;
  box-shadow: 0 10px 24px -8px rgba(227,28,121,0.45);
}
.btn-press:hover { background-position: 100% 0%; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(227,28,121,0.55); }
.btn-press:active { transform: translateY(0); }

.btn-outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transition: all .2s ease;
}
.btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-whatsapp {
  background: #21A85A;
  color: #fff;
  transition: transform .18s ease, background-color .18s ease;
}
.btn-whatsapp:hover { background: #1c8c4b; transform: translateY(-2px); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -22px rgba(16,26,70,0.32); border-color: transparent; }

.icon-badge {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  /* background: var(--brand-gradient); */
  background: #192a69;
  color: var(--paper);
}

/* ---------- Floating WhatsApp button ---------- */
#whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: 56px; height: 56px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(33,168,90,0.6);
  animation: float-pulse 2.6s ease-in-out infinite;
}
@keyframes float-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- Back to top ---------- */
#back-to-top {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 999px;
  display: none;
  align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 8px 20px -8px rgba(20,25,43,0.5);
  transition: opacity .2s ease, transform .2s ease;
}
#back-to-top:hover { transform: translateY(-3px); }

/* ---------- Mobile menu ---------- */
#mobile-menu { transition: max-height .35s ease, opacity .3s ease; overflow: hidden; }

/* ---------- Product filter chips ---------- */
.filter-chip {
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  transition: all .2s ease;
}
.filter-chip.active, .filter-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Gallery lightbox ---------- */
#lightbox { transition: opacity .25s ease; }
#lightbox.hidden-lb { opacity: 0; pointer-events: none; }

/* ---------- Timeline connector (How it works) ---------- */
.timeline-line { background: repeating-linear-gradient(90deg, var(--ink-mute) 0 8px, transparent 8px 16px); height: 2px; }
.timeline-line-v { background: repeating-linear-gradient(180deg, var(--ink-mute) 0 8px, transparent 8px 16px); width: 2px; }

/* ---------- Illustrative product glyphs (hero + placeholders) ----------
   Lightweight CSS/SVG stand-ins for photography — keeps pages fast
   and avoids broken external image links. */
.paper-swatch {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, #fff 0%, var(--paper-dim) 100%);
}

/* ---------- Counter ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Utility: line-clamp ---------- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }