/* ============================================================
   STUDIO — 3D product animation portfolio
   Aesthetic: warm atelier / gallery luxury
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Canvas + ink */
  --bone:      #f2ede3;   /* warm cream page */
  --bone-deep: #ebe4d6;   /* slightly deeper plate */
  --paper:     #faf7f0;   /* lifted cards */
  --ink:       #1b1916;   /* warm near-black */
  --ink-soft:  #46423a;
  --muted:     #8d8678;   /* warm grey meta */
  --line:      rgba(27,25,22,0.14);
  --line-soft: rgba(27,25,22,0.08);

  /* Accent (tweakable) */
  --accent:    #9c7c45;   /* antique brass */
  --accent-ink:#7c6133;

  /* Project signature tints */
  --sig-titanium: #2b2f36;  /* Revolut Ultra graphite */
  --sig-ceramic:  #ddc9d6;  /* Oura pastel */
  --sig-mirror:   #c9cdd2;  /* Trade Republic chrome */

  /* Type */
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 96px);
  --maxw: 1500px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}
@media (pointer: coarse) { body { cursor: auto; } }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; }
::selection { background: var(--accent); color: var(--bone); }

/* paper grain overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9990;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.serif { font-family: var(--display); font-weight: 500; }
.italic { font-style: italic; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { position: relative; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px; background: #fff;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.6);
  transform: translate(-50%, -50%);
  transition: width .4s var(--ease), height .4s var(--ease),
              border-color .4s var(--ease), background .4s var(--ease);
}
.cursor-ring.is-hover { width: 76px; height: 76px; border-color: transparent; background: rgba(255,255,255,0.12); }
.cursor-ring.is-view { width: 96px; height: 96px; background: var(--accent); border-color: transparent; mix-blend-mode: normal; }
.cursor-label {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; transform: translate(-50%, -50%);
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone);
  opacity: 0; transition: opacity .35s var(--ease);
}
.cursor-label.show { opacity: 1; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring, .cursor-label { display: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  mix-blend-mode: normal;
  transition: padding .5s var(--ease), background .5s var(--ease);
}
.site-head.shrink {
  padding-block: 14px;
  background: color-mix(in oklab, var(--bone) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .mark {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
}
.brand .mark b { font-style: normal; font-weight: 600; }
.brand .tag {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
  position: relative; padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width .45s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav .nav-cta {
  border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 18px; color: var(--ink); white-space: nowrap;
}
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
@media (max-width: 720px) { .nav a:not(.nav-cta) { display: none; } }

/* ============================================================
   HERO  — three variants via [data-hero]
   ============================================================ */
.hero { position: relative; padding-top: clamp(120px, 18vh, 220px); }
.hero-variant { display: none; }
[data-hero="stack"]  .hero-v-stack  { display: block; }
[data-hero="index"]  .hero-v-index  { display: block; }
[data-hero="cinema"] .hero-v-cinema { display: block; }

/* shared hero meta */
.hero-meta-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
  padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.hero-avail { display: flex; align-items: center; gap: 10px; }
.hero-avail .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4a8c5a;
  box-shadow: 0 0 0 0 rgba(74,140,90,0.5); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,140,90,0.45); }
  70% { box-shadow: 0 0 0 9px rgba(74,140,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,140,90,0); }
}

/* ---- Variant A: Editorial Stack ---- */
.hero-v-stack .display {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(58px, 13vw, 230px);
  line-height: 0.9; letter-spacing: -0.02em;
  margin: clamp(30px, 7vh, 90px) 0 0;
}
.hero-v-stack .display .ln { display: block; overflow: hidden; }
.hero-v-stack .display .ln > span { display: block; }
.hero-v-stack .display em {
  font-style: italic; color: var(--accent);
}
.hero-v-stack .sub-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 60px);
}
.hero-v-stack .lede {
  font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35; max-width: 16em; color: var(--ink-soft);
}
.hero-scroll-cue {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.hero-scroll-cue .bar { width: 46px; height: 1px; background: var(--ink); transform-origin: left;
  animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: scaleX(0.4); opacity:.4 } 50% { transform: scaleX(1); opacity:1 } }

/* reel reveal */
.hero-reel {
  position: relative; margin-top: clamp(48px, 9vh, 120px);
  border-radius: 4px; overflow: hidden;
  aspect-ratio: 21 / 9; background: var(--sig-titanium);
}
.hero-reel media-slot { width: 100%; height: 100%; }
.hero-reel .reel-tag {
  position: absolute; left: 22px; bottom: 18px; z-index: 3;
  color: var(--bone); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.hero-reel .reel-tag .pl {
  width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%; display: grid; place-items: center;
}
.hero-reel .reel-tag .pl::after { content:""; border-left: 7px solid var(--bone); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }

/* ---- Variant B: Index ---- */
.hero-v-index .index-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 80px); align-items: start;
  margin-top: clamp(30px, 6vh, 70px);
}
.hero-v-index .display {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(50px, 8.5vw, 140px); line-height: 0.92; letter-spacing: -0.02em;
}
.hero-v-index .display em { font-style: italic; color: var(--accent); }
.hero-v-index .display span { display: block; }
.hero-v-index .lede {
  font-family: var(--display); font-size: clamp(18px, 1.7vw, 24px);
  color: var(--ink-soft); max-width: 22em; margin-top: 30px; line-height: 1.4;
}
.idx-list { border-top: 1px solid var(--line); }
.idx-item {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
  padding: 24px 4px; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left .5s var(--ease);
}
.idx-item:hover { padding-left: 18px; }
.idx-item .no { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .1em; }
.idx-item .t { font-family: var(--display); font-size: clamp(22px, 2.4vw, 34px); font-weight: 500; }
.idx-item .t small { display:block; font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 4px; }
.idx-item .arr { font-family: var(--display); font-size: 24px; opacity: 0; transform: translateX(-8px); transition: all .5s var(--ease); }
.idx-item:hover .arr { opacity: 1; transform: translateX(0); }
.idx-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.idx-item:hover::before { transform: scaleY(1); }
@media (max-width: 900px) { .hero-v-index .index-grid { grid-template-columns: 1fr; } }

/* ---- Variant C: Cinematic ---- */
.hero-v-cinema { margin-top: clamp(20px, 4vh, 50px); }
.cinema-stage {
  position: relative; border-radius: 4px; overflow: hidden;
  height: min(82vh, 880px); background: var(--sig-titanium);
}
.cinema-stage media-slot { width: 100%; height: 100%; }
.cinema-stage::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,12,0.1) 0%, rgba(10,10,12,0) 35%, rgba(10,10,12,0.65) 100%); z-index:2; }
.cinema-copy { position: absolute; left: clamp(24px,5vw,72px); right: clamp(24px,5vw,72px); bottom: clamp(28px,5vh,60px); z-index: 3; color: var(--bone); }
.cinema-copy .eyebrow { color: rgba(255,255,255,.7); }
.cinema-copy .display { font-family: var(--display); font-weight: 500; font-size: clamp(46px, 8vw, 132px); line-height: 0.92; letter-spacing: -0.02em; margin: 14px 0 0; }
.cinema-copy .display em { font-style: italic; color: #e9d9b8; }
.cinema-foot { display:flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 22px; }
.cinema-foot p { max-width: 26em; color: rgba(255,255,255,.82); font-size: 15px; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
  padding-bottom: 28px; margin-bottom: clamp(40px, 6vh, 80px);
  border-bottom: 1px solid var(--line);
}
.sec-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 5vw, 76px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 12px 0 0; max-width: 14em;
}
.sec-head h2 em { font-style: italic; color: var(--accent); }
.sec-head .aside { max-width: 24em; color: var(--ink-soft); font-size: 15px; }

/* ============================================================
   WORK
   ============================================================ */
.work { padding-top: clamp(90px, 16vh, 200px); }
.work .project:first-of-type { border-top: none; }
.project {
  position: relative; padding: clamp(50px, 9vh, 120px) 0;
  border-top: 1px solid var(--line);
}
.project-inner {
  display: grid; grid-template-columns: 0.42fr 0.58fr;
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.project.flip .project-inner { grid-template-columns: 0.58fr 0.42fr; }
.project.flip .project-visual { order: -1; }

.project-text .pno { font-family: var(--display); font-size: 15px; color: var(--accent); font-style: italic; }
.project-text h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 4.4vw, 72px); line-height: 0.96; letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.project-text .client {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.project-text .client .sw { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); }
.project-text .desc { margin-top: 26px; max-width: 30em; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.project-meta { display: flex; gap: 38px; flex-wrap: wrap; margin-top: 34px; }
.project-meta .m .k { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.project-meta .m .v { font-family: var(--display); font-size: 19px; margin-top: 4px; }
.project-view {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 38px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.project-view .ln { width: 40px; height: 1px; background: var(--ink); transition: width .5s var(--ease); }
.project-view:hover .ln { width: 64px; }

.project-visual {
  position: relative; border-radius: 4px; overflow: hidden;
  aspect-ratio: 4 / 3;
}
.project-visual media-slot { width: 100%; height: 100%; }
.project-visual .plate {
  position: absolute; inset: 0; z-index: -1;
}
.project-visual .corner {
  position: absolute; z-index: 3; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--bone);
  mix-blend-mode: difference;
}
.project-visual .corner.tl { top: 16px; left: 16px; }
.project-visual .corner.br { bottom: 16px; right: 16px; }

/* signatures */
.project[data-sig="titanium"] .project-visual { background: var(--sig-titanium); }
.project[data-sig="titanium"] .project-text .client .sw { background: linear-gradient(135deg,#3a3f47,#1c1f24); border:none; }
.project[data-sig="ceramic"] .project-visual { background: var(--sig-ceramic); }
.project[data-sig="ceramic"] .project-text .client .sw { background: linear-gradient(135deg,#e9d6e4,#cdb6c9); border:none; }
.project[data-sig="mirror"] .project-visual { background: linear-gradient(135deg,#e4e7ea,#b9bec4 50%,#dfe2e6); }
.project[data-sig="mirror"] .project-text .client .sw { background: linear-gradient(135deg,#eef0f2,#b3b8be); border:none; }

@media (max-width: 860px) {
  .project-inner, .project.flip .project-inner { grid-template-columns: 1fr; }
  .project.flip .project-visual { order: 0; }
  .project-visual { aspect-ratio: 3/2; }
}

/* ============================================================
   MARQUEE strip
   ============================================================ */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0; overflow: hidden; white-space: nowrap;
}
.marquee .track { display: flex; width: max-content; gap: 50px; will-change: transform; }
.marquee .track span {
  flex: none; white-space: nowrap;
  font-family: var(--display); font-style: italic;
  font-size: clamp(24px, 3vw, 44px); color: var(--ink);
}
.marquee .track span .dot { color: var(--accent); font-style: normal; margin-left: 50px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about { padding: clamp(90px, 16vh, 200px) 0; }
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.about-portrait { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3/4; background: var(--bone-deep); }
.about-portrait media-slot { width: 100%; height: 100%; }
.about-lead {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 54px); line-height: 1.12; letter-spacing: -0.015em;
}
.about-lead em { font-style: italic; color: var(--accent); }
.about-body { margin-top: 34px; max-width: 40em; column-gap: 48px; }
.about-body p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.about-stats { display: flex; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.about-stats .stat .n { font-family: var(--display); font-size: clamp(34px, 4vw, 56px); line-height: 1; }
.about-stats .stat .n em { font-style: italic; color: var(--accent); }
.about-stats .stat .l { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 8px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-portrait { max-width: 360px; } }

/* ============================================================
   SERVICES
   ============================================================ */
.services { padding-bottom: clamp(90px, 16vh, 200px); }
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: auto 1fr 1.4fr auto; gap: clamp(20px,3vw,56px);
  align-items: baseline; padding: clamp(28px, 4vh, 48px) 6px;
  border-bottom: 1px solid var(--line); position: relative;
  transition: padding-left .55s var(--ease);
}
.svc:hover { padding-left: 22px; }
.svc::before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; background: color-mix(in oklab, var(--accent) 14%, transparent); transition: width .55s var(--ease); z-index:-1; }
.svc:hover::before { width: 100%; }
.svc .num { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .12em; }
.svc h4 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.8vw, 40px); margin: 0; line-height: 1; }
.svc p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 34em; }
.svc .tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.svc .tags span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px; font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) { .svc { grid-template-columns: auto 1fr; } .svc p, .svc .tags { grid-column: 2 / -1; } .svc .tags { justify-content: flex-start; margin-top: 4px; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding: clamp(90px, 16vh, 200px) 0 0; position: relative; }
.contact-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact-headline {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(46px, 9vw, 160px); line-height: 0.9; letter-spacing: -0.025em;
}
.contact-headline span { display: block; }
.contact-headline em { font-style: italic; color: var(--accent); }
.contact-headline .stroke {
  -webkit-text-stroke: 1px var(--ink); color: transparent;
}
.contact-sub { margin-top: 28px; color: var(--ink-soft); font-size: 17px; max-width: 24em; font-family: var(--display); }

.contact-form { display: grid; gap: 22px; }
.field { position: relative; }
.field label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: block; margin-bottom: 9px; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: 10px 0; font-family: var(--display); font-size: 20px; color: var(--ink);
  outline: none; transition: border-color .4s var(--ease); cursor: none;
}
.field textarea { resize: none; min-height: 80px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .5; }
.budget-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px;
  font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); background: transparent;
  transition: all .4s var(--ease); font-weight: 600; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.submit {
  margin-top: 6px; justify-self: start;
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--ink); color: var(--bone); border: none;
  border-radius: 100px; padding: 16px 30px; white-space: nowrap;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  overflow: hidden; position: relative;
}
.submit span { position: relative; z-index: 2; }
.submit::before { content:""; position:absolute; inset:0; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); z-index:1; }
.submit:hover::before { transform: translateY(0); }
.submit .arrow { font-family: var(--display); font-size: 18px; position: relative; z-index: 2; }
.form-note { font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .contact-top { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot { margin-top: clamp(80px, 14vh, 160px); padding: 48px 0 38px; border-top: 1px solid var(--line); }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.foot-socials { display: flex; gap: 26px; }
.foot-socials a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); position: relative; }
.foot-socials a::after { content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background: var(--accent); transition: width .4s var(--ease); }
.foot-socials a:hover::after { width: 100%; }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.to-top { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* ============================================================
   REVEAL animations
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-line] > * { opacity: 0; transform: translateY(110%); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal-line].in > * { opacity: 1; transform: none; }
[data-reveal-line].in > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-line].in > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-line].in > *:nth-child(4) { transition-delay: .24s; }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.13s}
.stagger.in > *:nth-child(3){transition-delay:.21s}
.stagger.in > *:nth-child(4){transition-delay:.29s}
.stagger.in > *:nth-child(5){transition-delay:.37s}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal], [data-reveal-line] > *, .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* tweaks mount */
#tweaks-root { position: fixed; z-index: 11000; }