/* ==========================================================================
   Warna Visual Indonesia — Design System v2
   Concept: "Buku Sampel" — a professional color/material sample book.
   Base = ink + paper (80% of every surface). Process Magenta is the
   signature accent, committed in full-bleed blocks, never sprinkled.
   Cyan/Yellow are seasoning. The CMYK strip and swatch grid are the two
   places multiple process colors legitimately appear together, as a
   fixed, repeatable system (not random per-section accents).
   ========================================================================== */

:root {
  --ink: #16130f;
  --ink-soft: #55503f;
  --paper: #f7f3ea;
  --paper-alt: #efe8d8;
  --paper-deep: #e6dcc4;
  --line: rgba(22, 19, 15, 0.14);

  --magenta: #e6007e;
  --magenta-ink: #b8005f;
  --cyan: #009fe3;
  --yellow: #ffd100;
  --warm-grey: #b8b0a2;

  --accent: var(--magenta);
  --accent-ink: #ffffff;
  --accent-soft: #fbe0ef;

  --radius-card: 4px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(22, 19, 15, 0.08), 0 16px 36px -18px rgba(22, 19, 15, 0.35);

  --container: 1240px;
  --nav-h: 76px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  font-family: "General Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  position: relative;
}

/* faint paper grain, fixed so it never repaints on scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }

h1, h2, h3 {
  font-family: "Clash Display", "General Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.04;
}
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
h3 { font-size: 1.2rem; }

.body-lg {
  font-size: 1.125rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 58ch;
}
.body { color: var(--ink-soft); line-height: 1.65; max-width: 62ch; }

/* ==========================================================================
   CMYK calibration strip — the one recurring multi-color device
   ========================================================================== */

.cal-strip {
  display: flex;
  height: 5px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.cal-strip span { flex: 1; }
.cal-strip span:nth-child(1) { background: var(--cyan); }
.cal-strip span:nth-child(2) { background: var(--magenta); }
.cal-strip span:nth-child(3) { background: var(--yellow); }
.cal-strip span:nth-child(4) { background: var(--ink); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 15px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 140ms var(--ease), background 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }

.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { background: var(--magenta-ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-on-ink { background: var(--paper); color: var(--ink); }
.btn-on-ink:hover { background: var(--paper-deep); }

.btn-on-magenta { background: var(--ink); color: var(--paper); }
.btn-on-magenta:hover { background: #000; }

.btn svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   Header / Navigation — persistent light chrome across every page,
   including the dark hero on Home. Nav never inverts.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 234, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 58px; width: auto; border-radius: 3px; }

.nav-links { display: none; align-items: center; gap: 32px; font-weight: 500; font-size: 0.95rem; }
.nav-links a {
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--magenta); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn-primary { display: none; padding: 12px 24px; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-card);
  border: 1px solid var(--line); background: transparent; flex: none;
}
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 24px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-in-out), opacity 200ms ease, padding 320ms var(--ease-in-out);
}
.mobile-menu.is-open { max-height: 480px; opacity: 1; padding: 8px 24px 20px; }
.mobile-menu a {
  padding: 12px 4px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 160ms ease;
}
.mobile-menu a[aria-current="page"] { color: #fff; background: var(--magenta); border-radius: var(--radius-card); border-color: transparent; padding-left: 12px; }
.mobile-menu a.btn { margin-top: 14px; border-bottom: none; }
.mobile-menu a.btn-primary { color: #fff; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-actions .btn-primary { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Dark canvas hero (Home only) — self-contained full-bleed block.
   Deliberate one-time theme inversion, per the "color block story" device.
   ========================================================================== */

.hero-dark {
  position: relative;
  background: #07060d;
  overflow: hidden;
  min-height: calc(100dvh - var(--nav-h));
}
.hero-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 18% 15%, rgba(255, 42, 166, 0.22), transparent 70%),
    radial-gradient(closest-side at 85% 85%, rgba(46, 217, 255, 0.16), transparent 70%),
    radial-gradient(closest-side at 60% 40%, rgba(139, 92, 255, 0.1), transparent 70%);
}
.hero-dark::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.3;
  background-image:
    linear-gradient(rgba(140, 140, 190, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 140, 190, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
}
.hero-stage { position: relative; z-index: 2; min-height: calc(100dvh - var(--nav-h)); }
#heroCanvas { position: relative; z-index: 1; display: block; width: 100%; height: calc(100dvh - var(--nav-h)); }

.hero-copy-dark {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 56px); z-index: 5;
  padding: 0 clamp(20px, 5vw, 64px); pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.hero-copy-dark .headline { max-width: 900px; opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease) 0.1s, transform 0.9s var(--ease) 0.1s; }
.hero-copy-dark .headline.in { opacity: 1; transform: none; }
.hero-copy-dark h1 { color: #eceaf6; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; font-size: clamp(1.6rem, 1.05rem + 2.9vw, 3.1rem); }
.hero-copy-dark h1 em { font-style: normal; color: #ff2aa6; text-shadow: 0 0 26px rgba(255, 42, 166, 0.55); }
.hero-cta-dark { pointer-events: auto; opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease) 0.25s, transform 0.9s var(--ease) 0.25s; }
.hero-cta-dark.in { opacity: 1; transform: none; }
.hero-cta-dark a {
  background: #ff2aa6; color: #fff; font-weight: 600; font-size: 0.98rem;
  padding: 16px 28px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 0 34px -8px rgba(255, 42, 166, 0.85); transition: transform 0.2s, box-shadow 0.2s;
}
.hero-cta-dark a:hover { transform: translateY(-2px); box-shadow: 0 0 46px -6px rgba(255, 42, 166, 0.95); }
.hero-cta-dark a svg { width: 18px; height: 18px; }

/* Sits where the WVI mark was, once it has shattered away into the swatch
   grid. Top-anchored (not vertically centered) so JS can measure its real
   height and push the grid down by exactly that much — see layout() in
   hero.js. Never derived from a guessed percentage. */
.hero-services-row {
  position: absolute;
  left: 50%;
  top: clamp(52px, 8vh, 96px);
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 64px);
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out) 0.15s;
  pointer-events: none;
}
.hero-services-row.in { opacity: 1; }

.hero-services-tag {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 20px);
}

.services-eyebrow {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #8a87a6;
  margin-bottom: clamp(-4px, -0.6vh, 0px);
}

/* Flanking machine photos — real renders, kept in their native dark frame
   so they blend into the hero. Hidden below 860px: there isn't enough
   horizontal room next to the title once the swatch grid also needs the
   width. The "printing in progress" read comes from overlays (sweep,
   carriage glow, blinking status LEDs), never from warping the photo
   itself — a photo faking a 3D tilt just looks broken. Two photos per
   side, paired, so four machines cost the same width as two used to. */
.hero-machine-group {
  display: none;
  flex: none;
  gap: 8px;
}
@media (min-width: 860px) { .hero-machine-group { display: flex; } }

.hm-photo {
  position: relative;
  width: clamp(58px, 6vw, 112px);
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  animation: hm-float 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(46, 217, 255, 0.35)) drop-shadow(0 0 22px rgba(255, 42, 166, 0.18));
}
.hm-photo:nth-child(2) { animation-delay: -2.2s; }
@keyframes hm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.hm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* diagonal light sweep, reads as an active scan/print pass */
.hm-sweep {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.22) 49%, rgba(46, 217, 255, 0.35) 50%, rgba(255, 255, 255, 0.22) 51%, transparent 58%);
  background-size: 240% 240%;
  background-position: -60% -60%;
  animation: hm-sweep-move 3.6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes hm-sweep-move {
  0% { background-position: -60% -60%; }
  55%, 100% { background-position: 60% 60%; }
}

/* a small glowing "print head" gliding along the machine's working edge */
.hm-carriage-glow {
  position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 16px 4px #2ed9ff;
  top: var(--y, 48%); left: 0;
}
.hm-anim-carriage-a { animation: hm-carriage-a 2.8s ease-in-out infinite; }
@keyframes hm-carriage-a { 0%, 100% { left: 6%; top: 47%; } 50% { left: 34%; top: 51%; } }
.hm-anim-carriage-b { animation: hm-carriage-b 2.8s ease-in-out infinite; }
@keyframes hm-carriage-b { 0%, 100% { left: 18%; top: 27%; } 50% { left: 68%; top: 27%; } }
.hm-anim-carriage-c { animation: hm-carriage-c 2.6s ease-in-out infinite; }
@keyframes hm-carriage-c { 0%, 100% { left: 58%; top: 40%; } 50% { left: 80%; top: 55%; } }
.hm-anim-carriage-d { animation: hm-carriage-d 2.4s ease-in-out infinite; }
@keyframes hm-carriage-d { 0%, 100% { left: 18%; top: 34%; } 50% { left: 68%; top: 34%; } }

/* status LEDs, positioned per-photo via --x/--y custom properties */
.hm-led {
  position: absolute; z-index: 3;
  top: var(--y); left: var(--x);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--c, #4ade80);
  box-shadow: 0 0 4px 1px var(--c, #4ade80);
  animation: hm-blink 1.8s ease-in-out infinite;
}
@keyframes hm-blink { 0%, 40% { opacity: 1; } 55%, 85% { opacity: 0.15; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hm-photo, .hm-sweep, .hm-led,
  .hm-anim-carriage-a, .hm-anim-carriage-b, .hm-anim-carriage-c, .hm-anim-carriage-d {
    animation: none;
  }
  .hm-sweep { display: none; }
}

.services-title {
  font-family: "Monoton", "Clash Display", cursive;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.75rem);
  color: #fff9fc;
  text-shadow:
    0 0 4px #fff,
    0 0 11px #fff,
    0 0 19px rgba(255, 255, 255, 0.85),
    0 0 42px #ff2aa6,
    0 0 80px #ff2aa6,
    0 0 110px #ff2aa6,
    0 0 150px rgba(255, 42, 166, 0.6);
}

.services-tagline {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: clamp(0.8rem, 0.6rem + 0.6vw, 1.05rem);
  color: #d9d6ee;
  text-shadow: 0 0 4px rgba(217, 214, 238, 0.6), 0 0 22px rgba(46, 217, 255, 0.5);
  max-width: min(88vw, 480px);
}

.hero-crop { position: absolute; width: 20px; height: 20px; z-index: 5; opacity: 0; transition: opacity 0.8s var(--ease) 0.2s; }
.hero-crop.in { opacity: 0.45; }
.hero-crop::before, .hero-crop::after { content: ""; position: absolute; background: #2ed9ff; box-shadow: 0 0 8px #2ed9ff; }
.hero-crop::before { width: 100%; height: 1.5px; }
.hero-crop::after { height: 100%; width: 1.5px; }
.hero-crop.tl { top: 24px; left: 24px; }
.hero-crop.tr { top: 24px; right: 24px; }
.hero-crop.tr::before, .hero-crop.tr::after { right: 0; }
.hero-crop.bl { bottom: 24px; left: 24px; }
.hero-crop.bl::before { bottom: 0; }
.hero-crop.br { bottom: 24px; right: 24px; }
.hero-crop.br::before { bottom: 0; right: 0; }
.hero-crop.br::after { right: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy-dark .headline, .hero-cta-dark, .hero-crop { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Bold opening statement — full-bleed color block used once per interior
   page (ink or magenta), per "every page needs one confident moment"
   ========================================================================== */

.statement {
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.statement--ink { background: var(--ink); color: var(--paper); }
.statement--magenta { background: var(--magenta); color: #fff; }
.statement h1 {
  font-size: clamp(2.1rem, 1.5rem + 3vw, 4rem);
  max-width: 16ch;
  color: inherit;
}
.statement .body-lg { color: inherit; opacity: 0.78; margin-top: 18px; max-width: 52ch; }
.statement .eyebrow { color: inherit; opacity: 0.55; }

/* ==========================================================================
   Sections generic
   ========================================================================== */

section { position: relative; }
.section { padding: 80px 0; }
.section-alt { background: var(--paper-alt); }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { margin-bottom: 14px; }
.eyebrow {
  display: inline-block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--magenta-ink); margin-bottom: 14px;
}

.section-foot-link { margin-top: 36px; }

/* ==========================================================================
   Swatch grid (Layanan as color chart)
   ========================================================================== */

.swatch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 700px) { .swatch-grid { grid-template-columns: repeat(3, 1fr); } }

.swatch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.swatch-card:active { transform: translateY(-1px) scale(0.98); transition-duration: 100ms; }

.swatch-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.swatch-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) contrast(1.05); transition: filter 300ms ease; }
.swatch-media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--swatch, var(--magenta));
  mix-blend-mode: multiply; opacity: 0.6; transition: opacity 300ms ease;
}
.swatch-corner {
  position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; z-index: 2;
  opacity: 0; transition: opacity 250ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .swatch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
  .swatch-card:hover .swatch-media::after { opacity: 0.34; }
  .swatch-card:hover .swatch-media img { filter: grayscale(10%) contrast(1.02); }
  .swatch-card:hover .swatch-corner { opacity: 0.9; }
}
.swatch-corner::before, .swatch-corner::after { content: ""; position: absolute; background: #fff; }
.swatch-corner::before { top: 0; right: 0; width: 100%; height: 1.5px; }
.swatch-corner::after { top: 0; right: 0; height: 100%; width: 1.5px; }

.swatch-label { padding: 16px 18px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.swatch-label h3 { font-size: 1.08rem; }
.swatch-desc { padding: 0 18px 18px; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; max-width: none; }

/* ==========================================================================
   Curated portfolio — big, editorial, not a dump grid
   ========================================================================== */

.curated-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .curated-grid { grid-template-columns: repeat(2, 1fr); } }

.curated-item {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-alt);
  cursor: zoom-in;
  transition: transform 160ms var(--ease);
}
.curated-item:active { transform: scale(0.985); transition-duration: 100ms; }
.curated-item.span-2 { grid-column: 1 / -1; }
.curated-item .media { aspect-ratio: 4 / 3; overflow: hidden; }
.curated-item.span-2 .media { aspect-ratio: 16 / 8; }
.curated-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .curated-item:hover img { transform: scale(1.035); }
}
.curated-caption {
  padding: 16px 18px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.curated-caption h3 { font-size: 1rem; }
.curated-caption span { font-size: 0.78rem; color: var(--warm-grey); white-space: nowrap; }

.secondary-toggle {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.secondary-grid {
  display: none;
  columns: 2;
  column-gap: 14px;
  margin-top: 32px;
}
.secondary-grid.is-open { display: block; }
@media (min-width: 640px) { .secondary-grid { columns: 3; } }
@media (min-width: 1024px) { .secondary-grid { columns: 4; } }
.secondary-item {
  break-inside: avoid; margin-bottom: 14px; border-radius: var(--radius-card);
  overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: var(--paper-alt);
  transition: transform 160ms var(--ease);
}
.secondary-item:active { transform: scale(0.98); transition-duration: 100ms; }
.secondary-item img { width: 100%; height: auto; display: block; transition: transform 380ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .secondary-item:hover img { transform: scale(1.04); }
}

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 8, 6, 0.94);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, visibility 0ms linear 220ms;
}
.lightbox.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 220ms ease, visibility 0ms linear;
}
.lightbox img {
  max-width: min(90vw, 920px); max-height: 85vh; width: auto; border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96); transition: transform 260ms var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; border: none;
}
.lightbox-close svg { width: 20px; height: 20px; }

/* ==========================================================================
   Why WVI — bento, asymmetric, no equal 3-cards
   ========================================================================== */

.why-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(140px, auto); }
.why-cell { border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; border: 1px solid var(--line); }
.why-cell h3 { font-size: 1.15rem; }
.why-cell p { font-size: 0.94rem; color: var(--ink-soft); max-width: none; }
.why-cell--wide { grid-column: span 2; }
.why-cell--tall { grid-row: span 2; }
.why-cell--ink { background: var(--ink); color: var(--paper); border: none; }
.why-cell--ink h3, .why-cell--ink p { color: var(--paper); }
.why-cell--ink p { opacity: 0.68; }
.why-cell--magenta { background: var(--magenta); color: #fff; border: none; }
.why-cell--magenta h3, .why-cell--magenta p { color: #fff; }
.why-cell--magenta p { opacity: 0.85; }
.why-cell--photo { background-size: cover; background-position: center; color: #fff; border: none; }
.why-cell--photo h3, .why-cell--photo p { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cell--tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-cell--wide { grid-column: span 1; }
}

/* ==========================================================================
   Values / list rows
   ========================================================================== */

.value-list { border-top: 1px solid var(--line); }
.value-row { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.value-row svg { width: 26px; height: 26px; color: var(--magenta); }
.value-row h3 { margin-bottom: 6px; }
.value-row p { font-size: 0.95rem; color: var(--ink-soft); max-width: 55ch; }

/* ==========================================================================
   CTA banner (closing, light-theme pages)
   ========================================================================== */

.cta-banner {
  background: var(--ink); color: var(--paper); border-radius: var(--radius-card);
  padding: 52px 32px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.cta-banner h2 { color: inherit; max-width: 18ch; }
.cta-banner .body-lg { color: inherit; opacity: 0.72; }
@media (min-width: 800px) {
  .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 58px 56px; }
  .cta-banner .cta-text { flex: 1; }
}

/* ==========================================================================
   Full-bleed closing CTA (magenta, edge to edge)
   ========================================================================== */

.cta-full { background: var(--magenta); color: #fff; padding: 84px 0; }
.cta-full h2 { color: #fff; max-width: 16ch; }
.cta-full .body-lg { color: #fff; opacity: 0.85; margin-top: 14px; }
.cta-full-inner { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
@media (min-width: 800px) {
  .cta-full-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; background: var(--paper); }
.contact-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: none; }
.contact-row svg { width: 22px; height: 22px; color: var(--magenta); flex: none; margin-top: 2px; }
.contact-row .label { font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; margin-bottom: 2px; }
.contact-row .value { font-weight: 600; }
.contact-row a.value { transition: color 160ms ease; }
.contact-row a.value:hover { color: var(--magenta-ink); }
.map-frame { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); height: 100%; min-height: 360px; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--ink); color: var(--paper); padding: 56px 0 0; }
.footer-grid { display: grid; gap: 32px; padding-bottom: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-brand img { height: 28px; margin-bottom: 14px; border-radius: 3px; }
.footer-brand p { color: rgba(247, 243, 234, 0.62); font-size: 0.92rem; max-width: 36ch; font-family: "Clash Display", sans-serif; font-weight: 500; }
.footer-col h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; color: rgba(247, 243, 234, 0.5); font-weight: 600; }
.footer-col a, .footer-col p { display: block; padding: 6px 0; font-size: 0.92rem; color: rgba(247, 243, 234, 0.75); }
.footer-col a { transition: color 160ms ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding: 22px 0; border-top: 1px solid rgba(247, 243, 234, 0.12);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 0.82rem; color: rgba(247, 243, 234, 0.5);
}

/* ==========================================================================
   Reveal on scroll — two variants: wipe (color blocks) and lift (content)
   ========================================================================== */

.reveal-lift { opacity: 0; transform: translateY(16px); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }
.reveal-lift.is-visible { opacity: 1; transform: none; }

/* Stagger: the container itself carries no motion, its direct children do.
   JS assigns each child an incremental transition-delay before flipping
   is-visible, so the group cascades in instead of appearing as one block. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* reveal-wipe marks the OUTER (unclipped) section for IntersectionObserver.
   The clip-path lives on the inner .wipe-inner so the observed element's own
   geometry is never clipped to zero (a self-observing clipped target can
   never report a nonzero intersection ratio). ease-in-out because this is
   content sweeping across the screen, not a simple fade-in entrance. */
.wipe-inner { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
.reveal-wipe.is-visible .wipe-inner { clip-path: inset(0 0 0% 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-lift { opacity: 1; transform: none; transition: none; }
  [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .wipe-inner { clip-path: none; transition: none; }
  .swatch-card, .curated-item, .curated-item img, .secondary-item, .secondary-item img { transition: none; }
}