/* ============================================================
   skip-a-beat® — Editorial Contrast (v2) homepage
   Ported from the Lovable design. Scoped to index.html only.
   Pure Helvetica. Cream paper. Ink black. Red-clay accent.
   ============================================================ */

:root {
  --paper: #f2efe8;            /* warm cream */
  --ink: #0f0e0c;              /* rich black */
  --accent: #c8442a;           /* red-clay */
  --accent-fg: #faf7f0;
  --muted: #e8e4da;            /* soft cream */
  --muted-fg: #8a8578;         /* stone */
  --rule: rgba(15,14,12,0.14); /* hairline */

  --font: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif;
  --maxw: 1400px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body.v2-home {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.v2-home ::selection { background: var(--accent); color: var(--accent-fg); }

/* Reset: Lovable's Tailwind Preflight zeroes default UA margins on every
   element; home.css must match or flex/grid edge-alignment drifts by the
   browser's default 1em p/h margins. */
.v2-home h1, .v2-home h2, .v2-home h3, .v2-home h4, .v2-home p, .v2-home figure {
  margin: 0;
}

.v2-home a { color: inherit; text-decoration: none; }
.v2-home img { display: block; max-width: 100%; }

/* Editorial display type */
.v2-display {
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  padding-bottom: 0.06em;
  margin: 0;
}
.v2-eyebrow {
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0;
}
.v2-italic { font-style: italic; font-weight: 400; }
.v2-accent { color: var(--accent); }
.v2-hairline-t { border-top: 1px solid var(--rule); }
.v2-hairline-b { border-bottom: 1px solid var(--rule); }

.v2-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .v2-wrap { padding: 0 40px; } }

/* ---------- Cursor (additive, no cursor:none — safe over iframes) ---------- */
.v2-cursor-dot,
.v2-cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 60;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  will-change: transform;
  display: none;
}
.v2-cursor-dot { width: 12px; height: 12px; background: var(--accent); z-index: 61; }
.v2-cursor-ring { width: 96px; height: 96px; border: 1px solid rgba(200,68,42,0.4); }
@media (min-width: 768px) and (pointer: fine) {
  .v2-cursor-dot, .v2-cursor-ring { display: block; }
}

/* ---------- Nav ---------- */
.v2-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.v2-nav.is-solid {
  background: rgba(242,239,232,0.9);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
.v2-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
}
@media (min-width: 768px) { .v2-nav-inner { padding: 8px 32px; } }
.v2-nav-logo img { height: 64px; width: auto; }
@media (min-width: 768px) { .v2-nav-logo img { height: 88px; } }

.v2-nav-links { display: none; align-items: center; gap: 24px; }
@media (min-width: 768px) { .v2-nav-links { display: flex; } }
.v2-nav-link {
  position: relative; overflow: hidden;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); transition: color 0.5s var(--ease);
}
.v2-nav-link span { display: inline-block; transition: transform 0.5s var(--ease); }
.v2-nav-link .v2-link-b {
  position: absolute; inset: 0; transform: translateY(100%); color: var(--accent);
}
.v2-nav-link:hover .v2-link-a { transform: translateY(-100%); }
.v2-nav-link:hover .v2-link-b { transform: translateY(0); }

.v2-nav-cta {
  display: none; font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  transition: color 0.5s var(--ease);
}
@media (min-width: 768px) { .v2-nav-cta { display: inline-block; } }
.v2-nav-cta span { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* On dark hero (not scrolled): nav text + logo light */
.v2-nav.on-dark .v2-nav-link,
.v2-nav.on-dark .v2-nav-cta,
.v2-nav.on-dark .v2-burger { color: var(--paper); }

.v2-burger {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  z-index: 60; position: relative;
}
@media (min-width: 768px) { .v2-burger { display: none; } }
.v2-burger-label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.v2-burger-lines { position: relative; display: block; width: 24px; height: 16px; }
.v2-burger-lines span {
  position: absolute; left: 0; height: 1px; width: 24px; background: currentColor;
  transition: transform 0.35s var(--ease);
}
.v2-burger-lines span:nth-child(1) { top: 0; }
.v2-burger-lines span:nth-child(2) { top: 14px; }
.v2-burger.is-open .v2-burger-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v2-burger.is-open .v2-burger-lines span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.v2-mobile {
  position: fixed; inset: 0; z-index: 40;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 80px 20px 32px; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.v2-mobile.is-open { opacity: 1; visibility: visible; }
@media (min-width: 768px) { .v2-mobile { display: none; } }
.v2-mobile-eyebrow { color: var(--muted-fg); }
.v2-mobile-nav { display: flex; flex-direction: column; margin-top: 24px; position: relative; z-index: 2; }
.v2-mobile-nav a {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--rule); padding: 12px 0;
  font-size: 36px; font-weight: 700; letter-spacing: -0.045em; color: var(--ink);
}
.v2-mobile-nav a span:last-child { font-size: 10px; letter-spacing: 0.2em; color: var(--muted-fg); }
.v2-mobile-foot { margin-top: auto; padding-top: 32px; }
.v2-mobile-foot .v2-mail {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ink); padding-bottom: 12px; font-size: 16px;
}
.v2-mobile-foot .v2-socials { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px; margin-top: 16px; }
.v2-mobile-foot .v2-socials a { flex: 0 1 auto; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; }
@media (min-width: 480px) { .v2-mobile-foot .v2-socials a { font-size: 11px; letter-spacing: 0.18em; } }
.v2-mobile-wave { position: absolute; inset: auto 0 0 0; height: 256px; width: 100%; color: rgba(200,68,42,0.15); pointer-events: none; }

/* ---------- Hero ---------- */
.v2-hero {
  position: relative; min-height: 100vh; overflow: hidden; background: var(--ink);
}
.v2-hero-media { position: absolute; inset: 0; }
.v2-hero-iframe-wrap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.78vh;
}
.v2-hero-iframe-wrap iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.v2-hero-poster {
  position: absolute; inset: 0; background: var(--ink);
  transition: opacity 0.8s ease; z-index: 1;
}
.v2-hero-poster.is-hidden { opacity: 0; }
.v2-hero-overlay { position: absolute; inset: 0; background: var(--ink); opacity: 0.35; z-index: 2; }

.v2-hero-content {
  position: relative; z-index: 3;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px 24px 64px;
}
@media (min-width: 768px) { .v2-hero-content { padding: 96px 40px 96px; align-items: flex-start; } }
.v2-hero-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }
@media (min-width: 768px) { .v2-hero-inner { width: auto; max-width: none; margin: 0; } }
.v2-hero .v2-eyebrow { color: rgba(242,239,232,0.7); }
.v2-hero-h1 {
  color: var(--paper); margin: 24px 0 0;
  font-size: 9vw; line-height: 0.95; letter-spacing: -0.045em; font-weight: 700;
}
@media (max-width: 480px) { .v2-hero-h1 { font-size: 7.3vw; } }
@media (min-width: 768px) { .v2-hero-h1 { font-size: 4.75vw; } }
.v2-reveal-line { display: block; overflow: hidden; padding-bottom: 0.12em; }
.v2-reveal-line > span { display: block; transform: translateY(110%); }
.v2-hero.is-in .v2-reveal-line > span {
  transform: translateY(0);
  transition: transform 1.1s var(--ease);
}
.v2-hero.is-in .v2-reveal-line:nth-child(1) > span { transition-delay: 0.15s; }
.v2-hero.is-in .v2-reveal-line:nth-child(2) > span { transition-delay: 0.3s; }
.v2-hero.is-in .v2-reveal-line:nth-child(3) > span { transition-delay: 0.45s; }

.v2-hero-sub {
  margin-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.v2-hero-sub p { max-width: 28rem; font-size: 13px; line-height: 1.6; color: rgba(242,239,232,0.7); margin: 0; }
.v2-hero-scroll {
  display: none; align-items: center; gap: 12px; color: rgba(242,239,232,0.6);
  position: absolute; right: 24px; bottom: 64px; z-index: 4;
}
@media (min-width: 768px) { .v2-hero-scroll { display: flex; right: 40px; bottom: 96px; } }
.v2-hero-scroll .v2-eyebrow { color: inherit; }
.v2-scroll-tick { display: inline-block; width: 1px; height: 32px; background: rgba(242,239,232,0.6); animation: v2-bob 1.8s ease-in-out infinite; }
@keyframes v2-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- Ticker ---------- */
.v2-ticker { overflow: hidden; background: var(--paper); color: var(--ink); padding: 12px 0; }
.v2-marquee { display: inline-flex; gap: 48px; white-space: nowrap; animation: v2-scroll 40s linear infinite; will-change: transform; }
.v2-marquee span { display: inline-flex; align-items: center; gap: 24px; }
.v2-ticker .v2-marquee { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.v2-star { color: var(--accent); }
@keyframes v2-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Manifesto ---------- */
.v2-manifesto { background: var(--paper); padding: 112px 0; }
@media (min-width: 768px) { .v2-manifesto { padding: 160px 0; } }
.v2-manifesto-grid { display: grid; gap: 40px; }
@media (min-width: 768px) { .v2-manifesto-grid { grid-template-columns: repeat(12, 1fr); gap: 64px; } }
.v2-manifesto-label { color: var(--muted-fg); }
@media (min-width: 768px) { .v2-manifesto-label { grid-column: span 3; padding-top: 16px; } .v2-manifesto-body { grid-column: span 9; } }
.v2-manifesto-h2 { font-size: 36px; line-height: 1.05; font-weight: 700; letter-spacing: -0.045em; margin: 0; }
@media (min-width: 768px) { .v2-manifesto-h2 { font-size: 60px; line-height: 1.02; } }
.v2-manifesto-h2 span { display: inline-block; margin-right: 0.28em; opacity: 0.15; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
.v2-manifesto.is-in .v2-manifesto-h2 span { opacity: 1; transform: none; }
.v2-wave { margin-top: 40px; height: 32px; width: 100%; color: var(--accent); }
@media (min-width: 768px) { .v2-wave { margin-top: 56px; } }
.v2-wave path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.v2-manifesto.is-in .v2-wave path { animation: v2-draw 1.8s var(--ease) forwards; }
@keyframes v2-draw { to { stroke-dashoffset: 0; } }

/* ---------- Ecosystem ---------- */
.v2-eco { background: var(--paper); padding: 96px 0; }
@media (min-width: 768px) { .v2-eco { padding: 128px 0; } }
.v2-eco-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.v2-eco-head .v2-eyebrow { color: var(--muted-fg); }
.v2-eco-h2 { font-size: 48px; margin: 16px 0 0; font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; }
@media (min-width: 768px) { .v2-eco-h2 { font-size: 72px; } }
.v2-eco-intro { max-width: 24rem; font-size: 14px; color: var(--muted-fg); }
.v2-eco-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .v2-eco-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 260px; } }

.v2-tile {
  position: relative; overflow: hidden; min-height: 260px; cursor: pointer;
  background: var(--muted); color: var(--ink);
  transform: translateY(30px); opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.v2-tile.is-in { opacity: 1; transform: none; }
.v2-tile.v2-tile--ink { background: var(--ink); color: var(--paper); }
.v2-tile.v2-tile--accent { background: var(--accent); color: var(--accent-fg); }
.v2-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1s var(--ease); }
.v2-tile:hover .v2-tile-img { transform: scale(1.06); }
.v2-tile--img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,14,12,0.7), rgba(15,14,12,0.2) 55%, transparent); }
.v2-tile-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
@media (min-width: 768px) { .v2-tile-body { padding: 32px; } }
.v2-tile--has-img .v2-tile-body { color: var(--paper); }
.v2-tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.v2-tile-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.v2-tile-arrow { font-size: 24px; line-height: 1; transition: transform 0.5s var(--ease); }
.v2-tile:hover .v2-tile-arrow { transform: translate(4px, -4px) rotate(45deg); }
.v2-tile-title { font-size: 36px; font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; margin: 0; }
@media (min-width: 768px) { .v2-tile-title { font-size: 48px; } }
.v2-tile-copy { margin: 12px 0 0; max-width: 20rem; font-size: 13px; line-height: 1.5; opacity: 0.8; }
.v2-tile-rule { position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.v2-tile:hover .v2-tile-rule { transform: scaleX(1); }

/* tile spans (desktop) */
@media (min-width: 768px) {
  .v2-span-7 { grid-column: span 7; }
  .v2-span-5 { grid-column: span 5; }
  .v2-span-4 { grid-column: span 4; }
  .v2-row-2 { grid-row: span 2; }
}

/* ---------- Selected work (from SITE_FEATURED) ---------- */
.v2-work { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 96px 0; }
@media (min-width: 768px) { .v2-work { padding: 128px 0; } }
.v2-work-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.v2-work-head .v2-eyebrow { color: var(--accent); }
.v2-work-h2 { font-size: 48px; margin: 16px 0 0; font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; }
@media (min-width: 768px) { .v2-work-h2 { font-size: 72px; } }
.v2-work-intro { max-width: 24rem; font-size: 14px; color: rgba(242,239,232,0.6); }
.v2-work-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 64px; }
@media (min-width: 768px) { .v2-work-grid { grid-template-columns: repeat(2, 1fr); gap: 64px 48px; } }
@media (min-width: 1024px) { .v2-work-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; } }
.v2-work-card { display: block; transform: translateY(40px); opacity: 0; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.v2-work-card.is-in { opacity: 1; transform: none; }
.v2-work-art { position: relative; aspect-ratio: 1; overflow: hidden; background: rgba(242,239,232,0.05); }
.v2-work-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1s var(--ease); }
.v2-work-card:hover .v2-work-art img { transform: scale(1.06); }
.v2-work-art-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,14,12,0.5), transparent 50%); }
.v2-work-badge { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 8px; }
.v2-work-badge .v2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: v2-pulse 1.8s ease-in-out infinite; }
.v2-work-badge .v2-eyebrow { color: var(--paper); }
@keyframes v2-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } }
.v2-work-meta { margin-top: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.v2-work-title { font-size: 30px; font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; margin: 0; text-transform: lowercase; }
@media (min-width: 768px) { .v2-work-title { font-size: 36px; } }
.v2-work-sub { margin: 8px 0 0; font-size: 13px; color: rgba(242,239,232,0.6); }
.v2-work-year { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,239,232,0.5); white-space: nowrap; }

/* ---------- Collaborators ---------- */
.v2-collab { background: var(--paper); padding: 48px 0; }
@media (min-width: 768px) { .v2-collab { padding: 56px 0; } }
.v2-collab-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.v2-collab-head .v2-eyebrow { color: var(--muted-fg); }
.v2-collab-head .v2-collab-sub { display: none; }
@media (min-width: 640px) { .v2-collab-head .v2-collab-sub { display: block; } }
.v2-collab-track { overflow: hidden; }
.v2-collab-track .v2-marquee { align-items: center; }
.v2-collab-item { display: flex; align-items: center; justify-content: center; height: 64px; width: 140px; flex-shrink: 0; }
img.v2-collab-logo {
  height: auto; width: auto; max-height: 38px; max-width: 100%;
  object-fit: contain; opacity: 0.55; filter: brightness(0);
  transition: opacity 0.4s, filter 0.4s;
}
.v2-collab-logo:hover { opacity: 1; filter: none; }
.v2-collab-logo--invert { filter: brightness(0); }
.v2-collab-logo--invert:hover { filter: none; opacity: 1; }

/* ---------- Contact ---------- */
.v2-contact { position: relative; overflow: hidden; background: var(--accent); color: var(--accent-fg); padding: 96px 0; }
@media (min-width: 768px) { .v2-contact { padding: 140px 0; } }
.v2-contact .v2-eyebrow { opacity: 0.7; }
.v2-contact-h2 { font-size: 60px; margin: 24px 0 0; font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; }
@media (min-width: 768px) { .v2-contact-h2 { font-size: 8rem; } }
.v2-contact-grid { display: grid; gap: 40px; margin-top: 64px; }
@media (min-width: 768px) { .v2-contact-grid { grid-template-columns: repeat(12, 1fr); } }
.v2-contact-lead { font-size: 15px; line-height: 1.6; opacity: 0.85; }
@media (min-width: 768px) { .v2-contact-lead { grid-column: span 5; } .v2-contact-form-col { grid-column: 7 / span 6; } }

.v2-contact-mail {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid currentColor; padding-bottom: 16px;
  font-size: 24px; font-weight: 400;
}
@media (min-width: 768px) { .v2-contact-mail { font-size: 36px; } }
.v2-contact-mail span:last-child { transition: transform 0.3s var(--ease); }
.v2-contact-mail:hover span:last-child { transform: translateX(8px); }
.v2-contact-socials { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 16px; font-size: 14px; }
.v2-contact-socials a { border-bottom: 1px solid currentColor; padding-bottom: 4px; opacity: 0.8; transition: opacity 0.3s; }
.v2-contact-socials a:hover { opacity: 1; }

/* ---------- Footer ---------- */
.v2-footer { background: var(--ink); color: var(--paper); padding: 48px 0; }
.v2-footer-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.v2-footer-logo img { height: 80px; width: auto; }
@media (min-width: 768px) { .v2-footer-logo img { height: 112px; } }
.v2-footer-logo .v2-eyebrow { color: rgba(242,239,232,0.5); margin-top: 24px; }
.v2-footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 48px; font-size: 14px; }
.v2-footer-links a { color: rgba(242,239,232,0.7); transition: color 0.3s; }
.v2-footer-links a:hover { color: var(--accent); }
.v2-footer-bottom { margin-top: 48px; border-top: 1px solid rgba(242,239,232,0.2); padding-top: 24px; }
.v2-footer-bottom-inner { display: flex; flex-direction: column-reverse; gap: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242,239,232,0.5); }
@media (min-width: 768px) { .v2-footer-bottom-inner { flex-direction: row; justify-content: space-between; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .v2-marquee { animation: none; }
  .v2-reveal-line > span, .v2-tile, .v2-work-card { transform: none !important; opacity: 1 !important; }
  .v2-manifesto-h2 span { opacity: 1 !important; transform: none !important; }
}