/* ============================================
   PORTFOLIO STYLES
   Clean, Modern, Responsive
   ============================================ */

:root {
  --bg: #0f0e0c;
  --bg-soft: #181613;
  --bg-card: #1d1a16;
  --ink: #f4efe6;
  --ink-soft: #b8b0a0;
  --ink-mute: #6b6355;
  --accent: #d96e3e;
  --accent-soft: #e8915f;
  --line: rgba(244, 239, 230, 0.08);
  --line-strong: rgba(244, 239, 230, 0.18);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --hand: 'Caveat', cursive;
  --mono: 'Inter', -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--bg); }

/* PAPER TEXTURE */
.paper-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* CONTAINER */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* NAV */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  background: rgba(15, 14, 12, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease);
}
.nav.scrolled {
  padding: 0.85rem 0;
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 500;
}
.logo-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-style: italic;
}
.nav-menu {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-menu a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.3s;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after { width: 100%; }

.nav-cta {
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--ink);
  transition: all 0.3s;
}
.nav-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav-burger span {
  width: 24px; height: 1.5px;
  background: var(--ink);
  transition: all 0.3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-6.5px) rotate(-45deg); }

/* HERO */
.hero {
  min-height: 100vh;
  padding: clamp(6rem, 12vw, 8rem) clamp(1.25rem, 4vw, 2.5rem) 4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
}
.hero-meta {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.meta-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.meta-value { font-size: 0.95rem; color: var(--ink); }
.meta-value.pulse { display: inline-flex; align-items: center; gap: 0.5rem; }
.meta-value.pulse::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hero-kicker {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.kicker-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 7.5vw, 6.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
  max-width: 14ch;
}
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 3rem;
  line-height: 1.7;
}
.hero-sub strong { color: var(--ink); font-weight: 500; }

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn-fill { background: var(--ink); color: var(--bg); }
.btn-fill:hover { background: var(--accent); transform: translateX(4px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(244, 239, 230, 0.05);
}

.hero-signature {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px dashed var(--line-strong);
  max-width: 560px;
}
.signature-text {
  font-family: var(--hand);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--accent);
  font-weight: 600;
}
.signature-line {
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: var(--line-strong);
}
.signature-note {
  font-family: var(--hand);
  font-size: 1.1rem;
  color: var(--ink-soft);
  font-style: italic;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollLine 2s infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
}

/* MARQUEE */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  background: var(--bg-soft);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--ink-soft);
}
.marquee-track .sep { color: var(--accent); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SECTIONS */
.section {
  padding: clamp(4rem, 8vw, 8rem) 0;
  position: relative;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.section-head-split {
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
}
.section-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ABOUT */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-portrait { position: sticky; top: 6rem; }

.portrait-frame {
  position: relative;
  aspect-ratio: 4/5;
  background: #f4efe6;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.portrait-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2420, #1a1816);
  display: grid;
  place-items: center;
}
.portrait-placeholder svg { width: 70%; height: 70%; opacity: 0.9; }

.portrait-stamp {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 90px;
  height: 90px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  transform: rotate(-12deg);
}
.stamp-year {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  margin: 0.2rem 0;
}

.about-text .lede {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.about-text p {
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  font-size: clamp(0.95rem, 1.4vw, 1rem);
  line-height: 1.8;
}
.about-text strong { color: var(--ink); font-weight: 500; }

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: 0.25rem; }
.fact-num {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.fact-label {
  font-size: 0.85rem;
  color: var(--ink-mute);
}

/* TOOLKIT / BENTO */
.toolkit { background: var(--bg-soft); }

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1rem;
}
.bento-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem;
  transition: all 0.4s var(--ease);
}
.bento-item:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.bento-lg { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }

.bento-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(217, 110, 62, 0.1);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.bento-item h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.bento-item p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bento-tags span {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  background: rgba(244, 239, 230, 0.05);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-soft);
}

/* WORK */
.work-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  transition: all 0.3s;
}
.filter:hover { color: var(--ink); border-color: var(--ink-mute); }
.filter.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.work-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: all 0.4s var(--ease);
}
.work-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.work-card-wide {
  grid-column: span 2;
  grid-template-columns: 1.2fr 1fr;
}
.work-card.hidden { display: none; }

.work-visual {
  aspect-ratio: 1;
  background: var(--bg-soft);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent);
  position: relative;
}
.work-visual-inner {
  width: 70%; height: 70%;
  transition: transform 0.6s var(--ease);
}
.work-card:hover .work-visual-inner { transform: scale(1.08) rotate(-2deg); }

.work-date {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  background: rgba(0,0,0,0.4);
  border-radius: 100px;
  color: var(--ink);
}

.work-visual-1 { background: linear-gradient(135deg, #1d1a16, #2a1f18); }
.work-visual-2 { background: linear-gradient(135deg, #1d1a16, #1f2a1a); color: #c4ff3d; }
.work-visual-3 { background: linear-gradient(135deg, #1d1a16, #2a2418); }
.work-visual-4 { background: linear-gradient(135deg, #1d1a16, #2a1824); color: #ff57a8; }
.work-visual-5 { background: linear-gradient(135deg, #1d1a16, #182a2a); color: #5ad8ff; }

.work-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.work-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
}
.work-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.work-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.work-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.work-stack span {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  background: rgba(244, 239, 230, 0.05);
  border-radius: 4px;
  color: var(--ink-mute);
}
.work-links {
  display: flex;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.work-links a {
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.work-links a:hover { color: var(--accent); }

.work-more {
  text-align: center;
  margin-top: 4rem;
  color: var(--ink-mute);
  font-size: 0.9rem;
}
.work-more a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}


/* PROJECT SHOWCASE */
.section-intro {
  max-width: 620px;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}
.project-showcase { align-items: stretch; }
.project-card {
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
  min-height: 360px;
  padding: 1rem;
  gap: 1.25rem;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.025), transparent 55%), var(--bg-card);
}
.project-card.project-wide {
  grid-column: span 2;
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, 0.85fr);
}
.project-card:hover {
  border-color: rgba(217, 110, 62, 0.45);
  box-shadow: 0 24px 70px rgba(0,0,0,0.24);
}
.project-media {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 11px;
  background: #171512;
  isolation: isolate;
}
.project-media-image { display: block; }
.project-media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}
.project-card:hover .project-media img {
  transform: scale(1.045);
  filter: saturate(1.05);
}
.project-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(to top, rgba(15,14,12,0.72), transparent);
  pointer-events: none;
}
.project-fallback {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  padding: 2rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
}
.project-badge {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 14px;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(244,239,230,0.18);
  border-radius: 100px;
  background: rgba(15,14,12,0.72);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.project-card .work-info { padding: 1rem 1rem 1rem 0.5rem; }
.project-card .work-desc { max-width: 520px; }
.project-card .work-links { margin-top: auto; }
.project-more-card {
  background: radial-gradient(circle at 80% 20%, rgba(217,110,62,0.12), transparent 35%), var(--bg-card);
}
.project-more-visual {
  min-height: 300px;
  border-radius: 11px;
  border: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.1rem;
  background:
    linear-gradient(45deg, transparent 49%, rgba(244,239,230,0.035) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(244,239,230,0.025) 50%, transparent 51%);
  background-size: 30px 30px;
}
.project-more-number {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.8rem;
}
.project-note { margin-top: 2.5rem; text-align: left; }
.project-note p { display: flex; align-items: center; gap: 0.65rem; justify-content: center; }
.project-note-mark { color: var(--accent); }
.project-note code { font-family: var(--mono); color: var(--ink-soft); font-size: 0.78rem; }
.filter { position: relative; overflow: hidden; }

@media (max-width: 1024px) {
  .project-card, .project-card.project-wide {
    grid-column: span 1;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .section-intro { margin-top: 0.75rem; }
  .project-card, .project-card.project-wide {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .project-card .work-info { padding: 0.75rem 0.5rem 0.5rem; }
  .project-media, .project-more-visual, .project-media img { min-height: 220px; }
  .project-note p { justify-content: flex-start; align-items: flex-start; }
}
@media (max-width: 480px) {
  .project-card { padding: 0.75rem; }
  .project-media, .project-more-visual, .project-media img { min-height: 200px; }
}

/* JOURNEY */
.journey { background: var(--bg-soft); }

.journey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.journey-list { display: flex; flex-direction: column; gap: 2rem; }
.journey-item {
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
  position: relative;
}
.journey-item::before {
  content: '';
  position: absolute;
  left: -4px; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1.5px solid var(--ink-mute);
}
.journey-year {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.journey-item h4 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.journey-place {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.journey-item p:last-child {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* CONTACT */
.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.contact-head { margin-bottom: 4rem; }
.contact-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  margin: 1rem 0 1.5rem;
}
.contact-title em {
  font-style: italic;
  color: var(--accent);
}
.contact-sub {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--ink-soft);
  max-width: 640px;
  line-height: 1.7;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.75rem 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.3s;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-mute);
}

.btn-submit { align-self: flex-start; margin-top: 0.5rem; }
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-note {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-note i { color: var(--accent); }

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.contact-block { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-block a,
.contact-block span:not(.contact-label):not(.availability-status) {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink);
  transition: color 0.3s;
}
.contact-block a:hover { color: var(--accent); }

.contact-socials {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-socials a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink-soft);
  width: fit-content;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-socials a:hover {
  color: var(--accent);
  transform: translateX(4px);
}

.availability-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}
.status-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* FOOTER */
.footer {
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.footer-logo {
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  color: var(--accent);
}
.footer-left p {
  color: var(--ink-mute);
  font-size: 0.85rem;
  line-height: 1.6;
}
.footer-right { text-align: right; }
.footer-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* CHATBOT */
.chat-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 0.9rem 1.4rem 0.9rem 1.1rem;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  transition: all 0.3s var(--ease);
  z-index: 90;
}
.chat-fab:hover {
  background: var(--accent);
  transform: translateY(-3px);
}
.chat-fab-icon {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
}
.chat-fab-label { white-space: nowrap; }

.chat-panel {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  width: 400px;
  max-width: calc(100vw - 2rem);
  height: 600px;
  max-height: calc(100vh - 8rem);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: 89;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s var(--ease);
  overflow: hidden;
}
.chat-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

.chat-header {
  padding: 1.1rem 1.25rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-header-info { display: flex; align-items: center; gap: 0.75rem; }
.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
}
.chat-header h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
}
.chat-status {
  font-size: 0.72rem;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.chat-status-dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
}
.chat-close {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 0.4rem;
  border-radius: 8px;
  transition: all 0.2s;
}
.chat-close:hover { background: rgba(244, 239, 230, 0.08); color: var(--ink); }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.chat-body::-webkit-scrollbar { width: 5px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.chat-msg {
  display: flex;
  gap: 0.6rem;
  animation: msgIn 0.3s var(--ease);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-user { flex-direction: row-reverse; }

.chat-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.chat-msg-bot .chat-msg-avatar {
  background: var(--accent);
  color: var(--bg);
}
.chat-msg-user .chat-msg-avatar {
  background: var(--line-strong);
  color: var(--ink);
}

.chat-msg-bubble {
  max-width: 78%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.chat-msg-bot .chat-msg-bubble {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-top-left-radius: 4px;
}
.chat-msg-user .chat-msg-bubble {
  background: var(--ink);
  color: var(--bg);
  border-top-right-radius: 4px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.chat-suggestions button {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  font-size: 0.75rem;
  transition: all 0.2s;
}
.chat-suggestions button:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.chat-input {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.5rem;
  background: var(--bg-soft);
}
.chat-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}
.chat-input input:focus { outline: none; }
.chat-input input::placeholder { color: var(--ink-mute); }
.chat-input button {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.chat-input button:hover {
  background: var(--accent);
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; grid-row: span 1; }
  .bento-wide { grid-column: span 2; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card, .work-card-wide {
    grid-column: span 1;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-menu.mobile-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 2rem;
    gap: 1.5rem;
  }

  .hero { min-height: auto; padding-top: 7rem; padding-bottom: 3rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-portrait { position: static; max-width: 320px; margin: 0 auto; }
  .bento { grid-template-columns: 1fr; }
  .bento-lg, .bento-wide { grid-column: span 1; }
  .work-card, .work-card-wide { grid-template-columns: 1fr; }
  .work-visual { aspect-ratio: 16/10; }
  .journey-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  
  .chat-panel {
    right: 1rem;
    bottom: 5.5rem;
    width: calc(100vw - 2rem);
    height: calc(100vh - 7rem);
  }
  .chat-fab {
    right: 1rem;
    bottom: 1rem;
  }
  .chat-fab-label { display: none; }
  .chat-fab { padding: 0.9rem; border-radius: 50%; width: 56px; height: 56px; justify-content: center; }
  
  .footer-inner { flex-direction: column; }
  .footer-right { text-align: left; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.3rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .about-facts { grid-template-columns: 1fr 1fr; }
  .hero-signature { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .signature-line { display: none; }
  .work-card { padding: 1.25rem; }
  .btn-submit { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   THREEUI-INSPIRED MOTION LAYER
   Inspired by the interaction categories visible in
   Three.js examples and ThreeUI's hero/motion-design catalog.
   This is an original implementation, not a copied template.
   ========================================================= */

:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 10%, rgba(217,110,62,.07), transparent 28%),
    var(--bg);
}

.hero {
  position: relative;
  min-height: min(900px, 100svh);
  overflow: hidden;
  isolation: isolate;
}

.hero-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: .9;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(244,239,230,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,239,230,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 45%, black 0%, transparent 68%);
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1180px;
}

.hero-title {
  letter-spacing: -.065em;
  text-wrap: balance;
}

.hero-title span {
  display: inline-block;
  transition: transform .8s var(--motion-ease);
}

.hero-title span:hover {
  transform: translateX(12px);
}

.interactive-webgl {
  position: absolute;
  top: 50%;
  right: 7vw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(244,239,230,.58);
  font: 500 .62rem/1 "DM Mono", monospace;
  letter-spacing: .16em;
  transform: translateY(-50%);
  pointer-events: none;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(217,110,62,.45);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  70% { box-shadow: 0 0 0 10px rgba(217,110,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,110,62,0); }
}

[data-reveal="section"] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1s var(--motion-ease), transform 1s var(--motion-ease);
}

[data-reveal="section"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-card {
  transform: translateZ(0);
  transition:
    transform .7s var(--motion-ease),
    border-color .45s ease,
    box-shadow .7s var(--motion-ease);
}

.project-card:hover {
  transform: translateY(-7px);
}

.project-media {
  overflow: hidden;
}

.project-media img {
  transition: transform 1s var(--motion-ease), filter 1s var(--motion-ease);
}

.project-card:hover .project-media img {
  transform: scale(1.055);
}

.work-links a,
.filter,
.btn {
  transition:
    transform .45s var(--motion-ease),
    color .3s ease,
    border-color .3s ease,
    background .3s ease;
}

.work-links a:hover {
  transform: translateX(5px);
}

.filter:hover {
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .interactive-webgl {
    top: auto;
    right: 1.25rem;
    bottom: 6rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal="section"] {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   PORTFOLIO V2 — CREATIVE WEBGL / MOTION SYSTEM
   Original implementation inspired by modern Three.js-style
   interactive sites and ThreeUI motion patterns.
   ========================================================= */
:root {
  --v2-bg: #080807;
  --v2-panel: rgba(17,17,15,.72);
  --v2-paper: #f1eee6;
  --v2-muted: #918d84;
  --v2-line: rgba(241,238,230,.12);
  --v2-accent: #e8733d;
  --v2-ease: cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--v2-bg);
  color: var(--v2-paper);
  font-family: 'Manrope', Inter, sans-serif;
  overflow-x: hidden;
}
body::selection { background: var(--v2-accent); color: #080807; }

.page-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%; height: 2px;
  background: var(--v2-accent);
  z-index: 10001;
  box-shadow: 0 0 18px rgba(232,115,61,.5);
}


.nav {
  background: rgba(8,8,7,.62) !important;
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, transform .5s var(--v2-ease);
}
.nav.scrolled { background: rgba(8,8,7,.9) !important; border-bottom-color: var(--v2-line); }
.nav-inner { max-width: 1440px; padding-left: 3vw; padding-right: 3vw; }
.nav-logo { gap: .7rem; }
.logo-mark { box-shadow: 0 0 0 1px rgba(232,115,61,.2), 0 10px 30px rgba(232,115,61,.14); }
.nav-menu a { font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-cta { border-color: rgba(241,238,230,.2) !important; }

.hero-v2 {
  min-height: 100svh;
  height: 100svh;
  padding: 110px 3vw 32px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-webgl {
  position:absolute; inset:0; width:100%; height:100%; z-index:-3; display:block;
}
.hero-orbit-glow {
  position:absolute; width:min(55vw,780px); aspect-ratio:1; right:-12vw; top:10vh;
  border-radius:50%; background: radial-gradient(circle, rgba(232,115,61,.18), rgba(232,115,61,.03) 42%, transparent 68%);
  filter: blur(12px); z-index:-2; pointer-events:none;
}
.hero-grid-v2 {
  position:absolute; inset:0; z-index:-2; opacity:.24; pointer-events:none;
  background-image: linear-gradient(rgba(241,238,230,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(241,238,230,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 70% 45%, black 0%, transparent 72%);
}
.hero-noise-v2 {
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-topline, .hero-bottomline {
  display:flex; justify-content:space-between; align-items:center;
  font:500 .62rem/1 'DM Mono', monospace; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,238,230,.55);
}
.hero-topline { border-bottom:1px solid var(--v2-line); padding-bottom:18px; }
.hero-code { color:var(--v2-accent); }
.hero-topline .status-dot { display:inline-block; width:6px; height:6px; margin-right:8px; background:#5de68a; border-radius:50%; box-shadow:0 0 12px rgba(93,230,138,.55); }
.hero-v2-inner { width:100%; max-width:1440px; margin:auto; display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; min-height:70vh; }
.hero-v2-copy { position:relative; z-index:3; max-width:820px; }
.hero-kicker-v2 { display:flex; gap:18px; align-items:center; margin:0 0 24px; font:500 .68rem/1 'DM Mono', monospace; letter-spacing:.16em; color:var(--v2-accent); }
.hero-kicker-v2 span { color:rgba(241,238,230,.42); }
.hero-title-v2 { margin:0; font-size:clamp(4.6rem, 9.5vw, 10.8rem); line-height:.82; letter-spacing:-.075em; font-weight:800; text-transform:uppercase; }
.hero-title-v2 span { display:block; width:max-content; max-width:100%; transition:transform .8s var(--v2-ease), color .5s ease; }
.hero-title-v2 span:nth-child(2) { margin-left:8vw; }
.hero-title-v2 span:hover { transform:translateX(16px); }
.hero-title-v2 .outline { color:transparent; -webkit-text-stroke:1px rgba(241,238,230,.7); }
.hero-title-v2 .outline:hover { color:var(--v2-paper); }
.hero-sub-v2 { max-width:560px; margin:36px 0 28px 8px; color:rgba(241,238,230,.64); font-size:1rem; line-height:1.8; }
.hero-sub-v2 strong { color:var(--v2-paper); }
.hero-actions-v2 { display:flex; gap:12px; margin-left:8px; }
.magnetic-btn { display:inline-flex; align-items:center; gap:30px; padding:14px 18px; border:1px solid rgba(241,238,230,.18); color:var(--v2-paper); text-decoration:none; text-transform:uppercase; font:500 .67rem/1 'DM Mono', monospace; letter-spacing:.11em; transition:transform .5s var(--v2-ease), background .35s ease, border-color .35s ease; }
.magnetic-btn span { color:var(--v2-accent); font-size:1rem; }
.magnetic-btn.primary { background:var(--v2-paper); color:#080807; border-color:var(--v2-paper); }
.magnetic-btn.primary span { color:#080807; }
.magnetic-btn:hover { transform:translateY(-4px); border-color:var(--v2-accent); }
.magnetic-btn.secondary:hover { background:rgba(241,238,230,.06); }
.hero-v2-stage { position:relative; min-height:560px; }
.stage-label { position:absolute; font:500 .58rem/1 'DM Mono', monospace; letter-spacing:.14em; color:rgba(241,238,230,.38); }
.stage-label-top { top:12%; right:16%; }
.stage-label-bottom { bottom:13%; right:12%; }
.stage-crosshair { position:absolute; right:18%; top:50%; width:28px; height:28px; transform:translate(50%,-50%); border:1px solid rgba(241,238,230,.16); border-radius:50%; }
.stage-crosshair::before, .stage-crosshair::after { content:''; position:absolute; background:rgba(241,238,230,.2); }
.stage-crosshair::before { width:48px; height:1px; top:13px; left:-11px; }
.stage-crosshair::after { height:48px; width:1px; left:13px; top:-11px; }
.hero-bottomline { border-top:1px solid var(--v2-line); padding-top:18px; }
.scroll-cue { display:flex; gap:14px; align-items:center; color:rgba(241,238,230,.8); }
.scroll-cue b { color:var(--v2-accent); font-size:1rem; }

.marquee-v2 { background:var(--v2-accent) !important; color:#080807 !important; border:0 !important; }
.marquee-v2 .marquee-track { font-family:'DM Mono', monospace; letter-spacing:.08em; text-transform:uppercase; }

.section { position:relative; }
.section-head { border-top-color:var(--v2-line) !important; }
.section-num { font-family:'DM Mono', monospace !important; color:var(--v2-accent) !important; }
.section-title { letter-spacing:-.05em; }

.work { padding-top:clamp(90px,10vw,160px) !important; }
.section-head-split { align-items:flex-end; }
.section-intro { max-width:580px !important; }
.work-filters { display:flex; flex-wrap:wrap; gap:8px; }
.filter { font-family:'DM Mono',monospace !important; text-transform:uppercase; letter-spacing:.08em; font-size:.63rem !important; border:1px solid var(--v2-line) !important; background:transparent !important; color:rgba(241,238,230,.58) !important; }
.filter.active, .filter:hover { background:var(--v2-paper) !important; color:#080807 !important; border-color:var(--v2-paper) !important; }
.work-grid { grid-template-columns:repeat(12, minmax(0,1fr)) !important; gap:1px !important; background:var(--v2-line); border:1px solid var(--v2-line); }
.work-card { grid-column:span 6; background:#0b0b0a !important; border:0 !important; border-radius:0 !important; overflow:hidden; transition:transform .8s var(--v2-ease), background .4s ease; }
.work-card:nth-child(3), .work-card:nth-child(4) { grid-column:span 6; }
.work-card.project-wide { grid-column:span 12; }
.work-card:hover { transform:translateY(-8px); background:#10100e !important; z-index:2; }
.project-media { border-radius:0 !important; aspect-ratio:16/10 !important; background:#111 !important; }
.project-media img { transition:transform 1s var(--v2-ease), filter 1s ease !important; }
.work-card:hover .project-media img { transform:scale(1.07) !important; filter:saturate(1.08) contrast(1.04); }
.project-badge { border-radius:999px !important; font-family:'DM Mono',monospace !important; letter-spacing:.1em; }
.work-info { padding:26px 26px 30px !important; }
.work-meta { font-family:'DM Mono',monospace !important; text-transform:uppercase; letter-spacing:.08em; }
.work-title { font-size:clamp(1.8rem,3vw,3rem) !important; letter-spacing:-.05em; }
.work-desc { max-width:620px; }
.work-links a { font-family:'DM Mono',monospace !important; text-transform:uppercase; font-size:.66rem !important; letter-spacing:.08em; }

.bento-item, .journey-item, .contact-block { border-color:var(--v2-line) !important; }
.bento-item:hover { transform:translateY(-6px); border-color:rgba(232,115,61,.45) !important; }

.contact { padding-bottom:140px !important; }
.contact-title { font-size:clamp(3.2rem,7vw,8rem) !important; letter-spacing:-.07em; line-height:.9; }
.contact-form input, .contact-form textarea { background:rgba(241,238,230,.025) !important; border-color:var(--v2-line) !important; }
.contact-form input:focus, .contact-form textarea:focus { border-color:rgba(232,115,61,.7) !important; box-shadow:0 0 0 3px rgba(232,115,61,.08); }

/* Chat: contained, reliable, and never wider than the viewport. */
.chat-fab { z-index:9000 !important; box-shadow:0 18px 55px rgba(0,0,0,.35); }
.chat-panel { z-index:9001 !important; width:min(390px, calc(100vw - 28px)) !important; height:min(560px, calc(100vh - 120px)) !important; right:14px !important; bottom:92px !important; border:1px solid rgba(241,238,230,.14) !important; background:rgba(12,12,11,.94) !important; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 35px 100px rgba(0,0,0,.55) !important; }
.chat-panel.open { animation:chatOpen .45s var(--v2-ease) both; }
@keyframes chatOpen { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.chat-header { background:rgba(241,238,230,.025) !important; }
.chat-body { min-height:0; }
.chat-input { background:rgba(8,8,7,.92) !important; }
.chat-suggestions button { cursor:pointer; }

[data-reveal="section"] { opacity:0; transform:translateY(55px); transition:opacity .9s var(--v2-ease), transform .9s var(--v2-ease); }
[data-reveal="section"].is-visible { opacity:1; transform:none; }

@media (max-width: 1000px) {
  .hero-v2 { height:auto; min-height:100svh; padding-top:96px; }
  .hero-v2-inner { grid-template-columns:1fr; min-height:auto; }
  .hero-v2-stage { min-height:390px; margin-top:-60px; }
  .hero-title-v2 { font-size:clamp(4rem,13vw,8rem); }
  .hero-title-v2 span:nth-child(2) { margin-left:5vw; }
  .hero-bottomline span:last-child { display:none; }
}

@media (max-width: 700px) {
  .hero-v2 { padding-left:20px; padding-right:20px; padding-bottom:20px; }
  .hero-topline span:first-child { max-width:220px; line-height:1.5; }
  .hero-title-v2 { font-size:clamp(3.25rem,16vw,6rem); line-height:.86; }
  .hero-title-v2 span:nth-child(2) { margin-left:0; }
  .hero-sub-v2 { margin-left:0; font-size:.9rem; }
  .hero-actions-v2 { margin-left:0; flex-direction:column; align-items:flex-start; }
  .hero-v2-stage { min-height:300px; margin-top:-40px; }
  .stage-label-top { right:4%; }
  .stage-label-bottom { right:4%; }
  .hero-bottomline { font-size:.52rem; }
  .scroll-cue { margin-left:auto; }
  .work-grid { display:block !important; }
  .work-card, .work-card.project-wide { margin-bottom:1px; }
  .work-filters { margin-top:18px; }
  .chat-panel { right:10px !important; bottom:78px !important; height:min(520px, calc(100vh - 100px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-title-v2 span, .magnetic-btn, .work-card, .project-media img { transition:none !important; }
  [data-reveal="section"] { opacity:1; transform:none; }
}

/* Final interaction tuning */
.cursor-ring{transition:width .25s cubic-bezier(.22,1,.36,1),height .25s cubic-bezier(.22,1,.36,1),background .25s ease!important}
.cursor-ring.cursor-hover{width:44px!important;height:44px!important;background:rgba(158,219,210,.12)!important;border-color:rgba(158,219,210,.7)!important}
@media(prefers-reduced-motion:reduce){.work-card{transform:none!important}.water-layer{display:none!important}}

/* PROFESSIONAL UI LAYER — stable, lightweight, no global pointer tracking */
:root{
  --bg:#0b0b0a; --surface:#11110f; --surface-2:#151513; --text:#f0ece4;
  --muted:#969087; --line:rgba(240,236,228,.11); --accent:#d96e3e;
  --mint:#a6d8d0; --serif:"Instrument Serif", Georgia, serif;
  --sans:"DM Sans", Inter, Arial, sans-serif; --mono:"DM Mono", monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  cursor:auto!important; overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.055;
  background-image:radial-gradient(rgba(255,255,255,.7) .5px,transparent .7px);
  background-size:6px 6px;
}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400}
button,a{cursor:pointer}

/* Navigation */
header,.nav,.navbar{
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:rgba(11,11,10,.76)!important;
  border-bottom:1px solid var(--line);
}
header a,.nav a,.navbar a{font-family:var(--mono)!important;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}
header .logo,.nav .logo,.navbar .logo{font-family:var(--serif)!important;text-transform:none;letter-spacing:-.02em;font-size:1.25rem}

/* Hero */
.hero-v2{
  min-height:100svh!important; display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 74% 35%,rgba(217,110,62,.10),transparent 28%),
    linear-gradient(135deg,#090909 0%,#0e0e0c 62%,#0a0a09 100%)!important;
}
.hero-v2::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.045) 7.05%,transparent 7.1%),
             linear-gradient(0deg,transparent 0 84%,rgba(255,255,255,.045) 84.05%,transparent 84.1%);
}
.hero-v2::after{
  content:"";position:absolute;right:-8vw;bottom:-24vw;width:48vw;height:48vw;
  border:1px solid rgba(217,110,62,.14);border-radius:50%;pointer-events:none;
}
.hero-v2-inner{position:relative!important;z-index:2!important;width:min(1240px,92vw)!important;margin:auto!important}
.hero-v2-copy{max-width:920px!important}
.hero-kicker-v2,.hero-kicker{
  font-family:var(--mono)!important;font-size:.66rem!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:#a9a39a!important;
}
.hero-title-v2{
  font-family:var(--serif)!important;font-size:clamp(5rem,11vw,10.5rem)!important;
  line-height:.78!important;letter-spacing:-.065em!important;font-weight:400!important;
  margin:1.7rem 0 2rem!important;
}
.hero-title-v2 span{display:block!important;margin:0!important}
.hero-title-v2 span:nth-child(2){padding-left:8vw!important;font-style:italic!important}
.hero-title-v2 span:nth-child(3){padding-left:2vw!important}
.hero-title-v2 .outline{
  color:transparent!important;-webkit-text-stroke:1px rgba(240,236,228,.72)!important;
}
.hero-sub-v2{
  max-width:560px!important;padding-left:20px!important;border-left:1px solid var(--accent)!important;
  color:#aaa49b!important;font-family:var(--sans)!important;font-size:1rem!important;line-height:1.8!important;
}
.hero-actions-v2{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem!important}
.hero-actions-v2 a{
  border:1px solid rgba(240,236,228,.16)!important;border-radius:999px!important;
  padding:13px 20px!important;font-family:var(--mono)!important;font-size:.68rem!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;transition:.35s var(--ease)!important;
}
.hero-actions-v2 a:hover{background:var(--text)!important;color:#111!important;transform:translateY(-3px)!important}
.editorial-stage{
  position:absolute!important;right:0!important;top:12%!important;width:32vw!important;height:70%!important;
  pointer-events:none!important;opacity:.9;
}
.stage-monogram{
  font-family:var(--serif)!important;font-size:clamp(12rem,25vw,25rem)!important;
  line-height:.7!important;color:transparent!important;-webkit-text-stroke:1px rgba(240,236,228,.09)!important;
}
.stage-note,.stage-index{font-family:var(--mono)!important;letter-spacing:.16em!important;font-size:.62rem!important;color:#746f68!important}
.stage-orbit{border-color:rgba(240,236,228,.1)!important}
.stage-orbit-dot{background:var(--accent)!important;box-shadow:0 0 22px rgba(217,110,62,.55)!important}
.hero-bottomline{
  position:absolute!important;left:4vw!important;right:4vw!important;bottom:25px!important;z-index:4!important;
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  font-family:var(--mono)!important;font-size:.58rem!important;letter-spacing:.15em!important;color:#726d65!important;
}

/* Section typography */
section{position:relative}
.section-label,.eyebrow,.section-kicker{
  font-family:var(--mono)!important;text-transform:uppercase!important;letter-spacing:.18em!important;
  font-size:.64rem!important;color:var(--accent)!important;
}
.section-title,h2{
  font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.045em!important;
  font-size:clamp(3rem,7vw,7rem)!important;line-height:.9!important;
}
.section-intro,.lede,.about-text,.work-desc{
  font-family:var(--sans)!important;line-height:1.75!important;color:var(--muted)!important;
}

/* Projects */
.projects-grid,.work-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;
}
.work-card,.project-card{
  position:relative!important;overflow:hidden!important;isolation:isolate!important;
  min-height:540px!important;border:1px solid var(--line)!important;border-radius:0!important;
  background:linear-gradient(145deg,#131310,#0d0d0c)!important;
  transition:transform .55s var(--ease),border-color .4s ease,box-shadow .55s var(--ease)!important;
}
.work-card:hover,.project-card:hover{
  border-color:rgba(166,216,208,.35)!important;box-shadow:0 30px 90px rgba(0,0,0,.38)!important;
}
.work-card .project-media,.project-card .project-media{
  position:relative!important;min-height:330px!important;overflow:hidden!important;
}
.work-card .project-media img,.project-card .project-media img{
  width:100%!important;height:100%!important;object-fit:cover!important;
  transition:transform .8s var(--ease),filter .8s var(--ease)!important;
}
.work-card:hover .project-media img,.project-card:hover .project-media img{
  transform:scale(1.04)!important;filter:saturate(.82) contrast(1.04)!important;
}
.water-layer{
  position:absolute!important;left:0!important;top:0!important;width:170px!important;height:170px!important;
  border-radius:50%!important;pointer-events:none!important;z-index:20!important;opacity:0!important;
  transform:translate(-50%,-50%) scale(.4)!important;transition:opacity .18s ease,transform .45s var(--ease)!important;
  background:
    radial-gradient(circle,rgba(226,250,247,.48) 0 2%,transparent 3%),
    radial-gradient(circle,transparent 0 22%,rgba(166,216,208,.28) 23% 24%,transparent 26%),
    radial-gradient(circle,transparent 0 38%,rgba(166,216,208,.20) 39% 40%,transparent 42%),
    radial-gradient(circle,rgba(166,216,208,.12),transparent 68%)!important;
  mix-blend-mode:screen!important;
}
.water-layer::before,.water-layer::after{
  content:"";position:absolute;inset:15%;border:1px solid rgba(226,250,247,.35);border-radius:46% 54% 51% 49%;
  animation:waterPulse 2.1s ease-out infinite;
}
.water-layer::after{inset:30%;animation-delay:.7s}
@keyframes waterPulse{0%{transform:scale(.3);opacity:.05}45%{opacity:.7}100%{transform:scale(1.35);opacity:0}}
.work-card.water-active .water-layer,.project-card.water-active .water-layer{
  opacity:1!important;transform:translate(var(--water-x),var(--water-y)) scale(1)!important;
}
.work-card.water-near .water-layer,.project-card.water-near .water-layer{opacity:.32!important}
.work-card::after,.project-card::after{
  content:"";position:absolute;inset:0;z-index:19;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 48%,transparent 62%);
  transform:translateX(-115%);transition:transform 1s var(--ease);
}
.work-card:hover::after,.project-card:hover::after{transform:translateX(115%)}

/* Project meta */
.project-meta,.work-card .meta,.project-card .meta{
  font-family:var(--mono)!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  font-size:.62rem!important;color:#7f7970!important;
}
.project-title,.work-card h3,.project-card h3{
  font-family:var(--serif)!important;font-size:clamp(2rem,3vw,3.2rem)!important;line-height:.95!important;
}
.project-link,.work-card a,.project-card a{
  font-family:var(--mono)!important;text-transform:uppercase!important;letter-spacing:.1em!important;font-size:.62rem!important;
}

/* Responsive */
@media(max-width:900px){
  .hero-title-v2{font-size:clamp(4rem,15vw,7rem)!important}
  .editorial-stage{right:-10vw!important;opacity:.45!important}
  .projects-grid,.work-grid{grid-template-columns:1fr!important}
  .work-card,.project-card{min-height:470px!important}
}
@media(max-width:620px){
  body{cursor:auto!important}
  .editorial-stage{display:none!important}
  .hero-v2{min-height:92svh!important}
  .hero-title-v2{font-size:clamp(3.6rem,18vw,6rem)!important}
  .hero-title-v2 span:nth-child(2){padding-left:3vw!important}
  .hero-bottomline{font-size:.5rem!important;bottom:15px!important}
  .hero-bottomline span:last-child{display:none}
  .work-card,.project-card{min-height:420px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================
   WADOOD PORTFOLIO — FINAL POLISH
   Bright editorial system / accessible typography / no pointer FX
   ============================================================ */
:root{
  --bg:#f6f2ea;
  --bg-soft:#ebe5da;
  --bg-card:#fffdf8;
  --ink:#171613;
  --ink-soft:#5f5a52;
  --ink-mute:#7f786e;
  --accent:#c85f31;
  --accent-soft:#e4875d;
  --accent-pale:#f4dfd2;
  --line:rgba(23,22,19,.12);
  --line-strong:rgba(23,22,19,.22);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
  --mono:"DM Mono",monospace;
}

html,body{background:var(--bg)!important;color:var(--ink)!important}
body{font-family:var(--sans)!important;letter-spacing:0!important}
body *{text-shadow:none}
.section-title,.contact-title,.work-title,.bento-item h3,.skill-group h3,.footer-logo,.nav-logo{font-family:var(--serif)!important;font-weight:400!important}
.section-title,.contact-title,.work-title{color:var(--ink)!important}
.section-intro,.contact-sub,.bento-item p,.work-desc,.journey-item p,.about-text{color:var(--ink-soft)!important}
.section-num,.section-label,.skill-group-kicker,.contact-label,.form-field label{color:var(--accent)!important}

/* Navigation readability */
.nav{background:rgba(246,242,234,.92)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 8px 28px rgba(23,22,19,.05)!important}
.nav-logo{color:var(--ink)!important}
.nav-menu a{color:#5d584f!important;font-family:var(--sans)!important;font-weight:600!important}
.nav-menu a:hover{color:var(--accent)!important}
.nav-cta{color:var(--ink)!important;border-color:var(--line-strong)!important}
.nav-cta:hover{background:var(--ink)!important;color:#fffdf8!important}
.logo-mark{background:var(--accent)!important;color:#fffdf8!important}

/* Remove any remaining pointer / water UI from older builds */
.cursor-dot,.cursor-ring,.lw-cursor,.water-layer{display:none!important}

/* SKILLS — responsive, icon-led, client-friendly */
.toolkit{background:linear-gradient(180deg,#eee8dd 0%,#f6f2ea 100%)!important}
.skill-head{align-items:end!important;margin-bottom:2.2rem!important}
.skill-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:.55rem;white-space:nowrap}
.skill-groups{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.skill-group{grid-column:span 4;background:rgba(255,253,248,.88);border:1px solid var(--line);border-radius:22px;padding:1.45rem;box-shadow:0 10px 32px rgba(23,22,19,.045);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s ease}
.skill-group:hover{transform:translateY(-5px);border-color:rgba(200,95,49,.36);box-shadow:0 20px 45px rgba(23,22,19,.09)}
.skill-group-featured{grid-column:span 6;background:linear-gradient(135deg,#fffdf8,#f8e8dd)}
.skill-group-tools{grid-column:span 6}
.skill-group-top{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.skill-group-icon{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-pale);color:var(--accent);font-size:1.05rem;border:1px solid rgba(200,95,49,.12)}
.skill-group-kicker{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;margin-bottom:.15rem}
.skill-group h3{font-size:1.65rem;line-height:1;color:var(--ink)!important}
.skill-group>p{font-size:.88rem;line-height:1.55;color:var(--ink-soft)!important;margin-bottom:1rem;max-width:58ch}
.skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.skill-chip{display:flex;align-items:center;gap:.55rem;min-height:42px;padding:.6rem .72rem;border:1px solid rgba(23,22,19,.09);border-radius:12px;background:#fffefa;color:#49453f;font-size:.8rem;font-weight:600;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.skill-chip i{width:18px;text-align:center;color:var(--accent);font-size:.9rem}
.skill-chip:hover{background:var(--ink);color:#fffdf8;border-color:var(--ink);transform:translateY(-2px)}
.skill-chip:hover i{color:#f3a07a}

/* CONTACT — outlined form panel */
.contact{background:#f1ece3!important}
.contact-inner{position:relative}
.contact-head{max-width:850px;margin-bottom:2.5rem!important}
.contact-form{background:rgba(255,253,248,.86)!important;border:1px solid rgba(23,22,19,.16)!important;border-radius:24px!important;padding:clamp(1.25rem,3vw,2.25rem)!important;box-shadow:0 18px 55px rgba(23,22,19,.07)!important;position:relative;overflow:hidden}
.contact-form::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),#e8a27f 55%,transparent);opacity:.95}
.contact-form::after{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(200,95,49,.12),transparent 68%);pointer-events:none}
.form-field{position:relative;z-index:1}
.form-field label{font-weight:600!important;color:#746c62!important}
.form-field input,.form-field textarea{background:#fbf8f1!important;border:1px solid rgba(23,22,19,.14)!important;border-radius:12px!important;padding:.9rem 1rem!important;color:var(--ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important}
.form-field input:focus,.form-field textarea:focus{outline:3px solid rgba(200,95,49,.12)!important;border-color:var(--accent)!important}
.form-field input::placeholder,.form-field textarea::placeholder{color:#9a9288!important}
.btn-submit{position:relative;z-index:1;background:var(--ink)!important;color:#fffdf8!important;border-radius:999px!important;padding:.9rem 1.25rem!important}
.btn-submit:hover{background:var(--accent)!important}
.form-note{color:#746d64!important}
.contact-aside{background:rgba(255,253,248,.55);border:1px solid var(--line);border-radius:20px;padding:1.25rem!important}
.contact-block{padding:.95rem 0;border-bottom:1px solid var(--line)}
.contact-block:last-child{border-bottom:0}
.contact-block a,.contact-block span:not(.contact-label):not(.availability-status){color:var(--ink)!important}
.contact-socials a{color:var(--ink-soft)!important}
.contact-socials a:hover{color:var(--accent)!important}
.status-dot{background:#39a96b!important;box-shadow:0 0 0 4px rgba(57,169,107,.12)}

/* General cards / readability */
.bento-item,.work-card,.contact-block{background:rgba(255,253,248,.9)!important;border-color:var(--line)!important}
.bento-item h3,.work-title{color:var(--ink)!important}
.bento-tags span,.work-stack span{background:#f0ebe2!important;color:#5e574e!important;border-color:rgba(23,22,19,.08)!important}
.work-card:hover,.bento-item:hover{border-color:rgba(200,95,49,.35)!important}

/* No global pointer transforms */
.project-card,.work-card,.bento-item,.skill-group,.magnetic-btn,.nav-cta{will-change:auto}

@media(max-width:1050px){
  .skill-group,.skill-group-featured,.skill-group-tools{grid-column:span 6}
}
@media(max-width:760px){
  .skill-head{align-items:start!important}
  .skill-count{white-space:normal}
  .skill-group,.skill-group-featured,.skill-group-tools{grid-column:span 12}
  .skill-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr!important}
  .contact-form{padding:1.1rem!important}
}
@media(max-width:480px){
  .skill-grid{grid-template-columns:1fr}
  .skill-group h3{font-size:1.45rem}
  .contact-form{border-radius:18px!important}
}


/* ============================================================
   FINAL LAYOUT CLEANUP — compact, responsive, no excess space
   ============================================================ */
:root{
  --bg:#f6f2ea;
  --bg-soft:#ece6dc;
  --bg-card:#fffdf8;
  --ink:#191714;
  --ink-soft:#5f5a52;
  --ink-mute:#80786e;
  --accent:#c85f31;
  --accent-soft:#e48a62;
  --line:rgba(25,23,20,.12);
  --line-strong:rgba(25,23,20,.22);
}

/* Keep each section content-driven instead of creating large empty bands. */
.section{
  padding:clamp(3.75rem,6vw,6rem) 0!important;
}
.container{
  width:100%!important;
  max-width:1240px!important;
  margin-inline:auto!important;
  padding-inline:clamp(1rem,4vw,2.25rem)!important;
}

/* Readable text everywhere. */
body, p, li, label, input, textarea, button{
  color:var(--ink-soft);
}
.section-intro,.contact-sub,.work-desc,.about-text,.journey-item p,.bento-item p{
  color:#5f5a52!important;
}
.work-meta,.project-meta,.skill-count,.contact-label,.section-num{
  color:#a14f2c!important;
}
.work-title,.project-title,.contact-title,.section-title,.skill-group h3{
  color:#191714!important;
}

/* Remove accidental global overflow/height behavior. */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
img,svg{
  max-width:100%;
}

/* ---------- PROJECTS ---------- */
.work{
  padding-top:clamp(4rem,7vw,6.5rem)!important;
}
.work-grid,.project-showcase,.projects-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:1rem!important;
  align-items:start!important;
}
.work-card,.project-card{
  min-height:0!important;
  height:auto!important;
  align-self:start!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(250px,.9fr)!important;
  padding:.85rem!important;
  gap:1rem!important;
  border:1px solid rgba(25,23,20,.11)!important;
  border-radius:18px!important;
  background:#fffdf8!important;
  box-shadow:0 10px 30px rgba(25,23,20,.055)!important;
}
.work-card.project-wide,.project-card.project-wide{
  grid-column:span 2!important;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)!important;
}
.project-media,.work-card .project-media{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16/10!important;
  border-radius:13px!important;
  overflow:hidden!important;
  background:#e9e2d7!important;
}
.project-media img,.work-card .project-media img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
}
.project-card .work-info,.work-card .work-info{
  min-width:0!important;
  padding:.55rem .55rem .5rem .25rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}
.work-title,.project-title{
  font-size:clamp(1.8rem,3vw,3rem)!important;
  line-height:.98!important;
  margin:.45rem 0 .7rem!important;
}
.work-desc{
  font-size:.92rem!important;
  line-height:1.62!important;
  margin:0!important;
}
.work-stack{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.4rem!important;
  margin-top:1rem!important;
}
.work-stack span{
  font-size:.66rem!important;
  padding:.42rem .58rem!important;
}
.work-links{
  margin-top:1rem!important;
  padding-top:.75rem!important;
}
.work-links a{
  font-size:.62rem!important;
}

/* More-project card should size naturally too. */
.project-more-card{
  min-height:0!important;
}
.project-more-visual{
  min-height:0!important;
  aspect-ratio:16/10!important;
  height:auto!important;
}

/* ---------- CONTACT ---------- */
.contact{
  padding-top:clamp(4rem,6vw,6rem)!important;
  padding-bottom:clamp(3.5rem,5vw,5rem)!important;
  background:#f1ece3!important;
}
.contact-inner{
  width:100%!important;
  max-width:1100px!important;
  margin-inline:auto!important;
}
.contact-head{
  margin-bottom:2rem!important;
}
.contact-title{
  font-size:clamp(2.8rem,6.5vw,6.5rem)!important;
  line-height:.94!important;
  margin:.8rem 0 1.1rem!important;
}
.contact-sub{
  max-width:650px!important;
  margin:0!important;
}

/* Keep the form polished but not oversized. */
.contact-form{
  margin:0 0 1.5rem!important;
  padding:clamp(1rem,2.2vw,1.5rem)!important;
  gap:1rem!important;
  border-radius:18px!important;
  box-shadow:0 10px 30px rgba(25,23,20,.055)!important;
}
.form-row{
  gap:1rem!important;
}
.form-field{
  gap:.4rem!important;
}
.form-field input,.form-field textarea{
  padding:.75rem .85rem!important;
  font-size:.95rem!important;
}
.form-field textarea{
  min-height:130px!important;
}
.form-note{
  margin-top:0!important;
  font-size:.78rem!important;
}

/* IMPORTANT: no large outlined contact-information box. */
.contact-aside{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.contact-block{
  min-width:0!important;
  padding:1rem 1.15rem!important;
  margin:0!important;
  border:0!important;
  border-left:1px solid rgba(25,23,20,.11)!important;
  background:rgba(255,253,248,.56)!important;
}
.contact-block:first-child{
  border-left:0!important;
  border-radius:14px 0 0 14px!important;
}
.contact-block:last-child{
  border-radius:0 14px 14px 0!important;
}
.contact-label{
  display:block!important;
  margin-bottom:.45rem!important;
  font-size:.62rem!important;
}
.contact-block a,
.contact-block span:not(.contact-label):not(.availability-status){
  font-size:1rem!important;
  line-height:1.35!important;
}
.contact-socials{
  gap:.35rem!important;
}
.contact-socials a{
  font-size:.88rem!important;
}
.availability-status{
  font-size:.88rem!important;
  line-height:1.35!important;
}

/* ---------- SKILLS ---------- */
.toolkit{
  background:linear-gradient(180deg,#eee8dd 0%,#f6f2ea 100%)!important;
}
.skill-groups{
  gap:.9rem!important;
}
.skill-group{
  min-width:0!important;
  padding:1.25rem!important;
}
.skill-grid{
  gap:.5rem!important;
}
.skill-chip{
  min-width:0!important;
  overflow:hidden!important;
  white-space:normal!important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .work-grid,.project-showcase,.projects-grid{
    grid-template-columns:1fr!important;
  }
  .work-card,.project-card,
  .work-card.project-wide,.project-card.project-wide{
    grid-column:span 1!important;
    grid-template-columns:minmax(0,1fr) minmax(260px,.9fr)!important;
  }
  .contact-aside{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .contact-block:nth-child(3){
    border-left:0!important;
    border-top:1px solid rgba(25,23,20,.11)!important;
  }
  .contact-block:nth-child(4){
    border-top:1px solid rgba(25,23,20,.11)!important;
  }
  .contact-block:nth-child(2){
    border-top:0!important;
  }
}
@media(max-width:700px){
  .section{
    padding:3.5rem 0!important;
  }
  .work-card,.project-card,
  .work-card.project-wide,.project-card.project-wide{
    grid-template-columns:1fr!important;
    padding:.7rem!important;
  }
  .project-media,.work-card .project-media,
  .project-more-visual{
    aspect-ratio:16/10!important;
  }
  .project-card .work-info,.work-card .work-info{
    padding:.55rem .35rem .45rem!important;
  }
  .contact-form{
    padding:1rem!important;
  }
  .contact-aside{
    grid-template-columns:1fr!important;
  }
  .contact-block,
  .contact-block:nth-child(3),
  .contact-block:nth-child(4){
    border-left:0!important;
    border-top:1px solid rgba(25,23,20,.10)!important;
    border-radius:0!important;
  }
  .contact-block:first-child{
    border-top:0!important;
    border-radius:14px 14px 0 0!important;
  }
  .contact-block:last-child{
    border-radius:0 0 14px 14px!important;
  }
  .skill-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
   FINAL SCROLL / NAV / PROJECT HOVER FIX
   ============================================================ */

/* Keep the navigation visible for the whole page. */
.nav{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:10000!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease!important;
}

/* Prevent page content from hiding underneath the fixed nav. */
main{
  position:relative;
  z-index:1;
}
.hero-v2,
.hero,
section:first-of-type{
  scroll-margin-top:80px!important;
}

/* Smooth native anchor scrolling without changing the existing layout. */
html{
  scroll-behavior:smooth!important;
}

/* Keep nav text/buttons visible on both hero and light sections. */
.nav-logo,
.nav-menu,
.nav-menu a,
.nav-cta,
.nav-burger{
  opacity:1!important;
  visibility:visible!important;
}
.nav-logo{color:#191714!important}
.nav-menu a{color:#5d5850!important}
.nav-menu a:hover{color:#191714!important}
.nav-cta{
  color:#191714!important;
  background:rgba(255,253,248,.72)!important;
  border:1px solid rgba(25,23,20,.22)!important;
}
.nav-cta:hover{
  color:#fffaf2!important;
  background:#191714!important;
}

/* On the dark hero, use the same high-contrast navigation so it never disappears. */
.nav.over-dark,
.nav.scrolled{
  background:rgba(18,17,15,.94)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px)!important;
}
.nav.over-dark .nav-logo,
.nav.scrolled .nav-logo,
.nav.over-dark .nav-menu a,
.nav.scrolled .nav-menu a{
  color:#f5efe5!important;
}
.nav.over-dark .nav-menu a:hover,
.nav.scrolled .nav-menu a:hover{
  color:#fff!important;
}
.nav.over-dark .nav-cta,
.nav.scrolled .nav-cta{
  color:#f5efe5!important;
  border-color:rgba(255,255,255,.22)!important;
  background:rgba(255,255,255,.04)!important;
}
.nav.over-dark .nav-cta:hover,
.nav.scrolled .nav-cta:hover{
  background:#f5efe5!important;
  color:#191714!important;
}

/* Hero lower action row: never let buttons sit on top of the divider. */
.hero-bottomline{
  position:relative!important;
  z-index:3!important;
  margin-top:clamp(2rem,4vw,3.5rem)!important;
  padding-top:1rem!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
.hero-actions-v2{
  position:relative!important;
  z-index:4!important;
  margin-bottom:1.25rem!important;
}
.hero-actions-v2 a{
  position:relative!important;
  z-index:5!important;
}
.hero-v2 .hero-content,
.hero-v2 .hero-inner{
  position:relative!important;
  z-index:2!important;
}

/* Project cards: hover only changes the card itself.
   No opacity/fade of the content and no global pointer effects. */
.work-card,
.project-card{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.work-card::before,
.project-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(135deg,rgba(215,101,53,.07),transparent 42%)!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:0!important;
  transition:opacity .45s ease!important;
}
.work-card:hover::before,
.project-card:hover::before{
  opacity:1!important;
}
.work-card > *,
.project-card > *{
  position:relative!important;
  z-index:1!important;
  opacity:1!important;
  visibility:visible!important;
}
.work-card:hover > *,
.project-card:hover > *{
  opacity:1!important;
  visibility:visible!important;
}

/* Project image/buttons must remain visible on hover. */
.project-media,
.project-media img,
.project-media::before,
.project-media::after,
.project-badge,
.work-links,
.work-stack,
.work-stack span{
  opacity:1!important;
  visibility:visible!important;
}
.work-card:hover .project-media img,
.project-card:hover .project-media img{
  transform:scale(1.025)!important;
  opacity:1!important;
  filter:none!important;
}

/* Never clip project links or CTA content. */
.work-links{
  position:relative!important;
  z-index:4!important;
  overflow:visible!important;
}
.work-links a{
  position:relative!important;
  z-index:5!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Disable any old hover classes that may have been left behind. */
.work-card.water-active,
.work-card.water-near,
.project-card.water-active,
.project-card.water-near{
  transform:none!important;
}
.water-layer,
.cursor-dot,
.cursor-ring,
.lw-cursor{
  display:none!important;
}

/* Gentle reveal: content enters once, but does not disappear when hovering. */
[data-reveal]{
  opacity:1!important;
  transform:none!important;
}
.reveal-ready [data-reveal]{
  opacity:1!important;
  transform:none!important;
}

/* Responsive nav */
@media(max-width:760px){
  .nav{
    min-height:64px!important;
  }
  .nav-menu{
    background:rgba(18,17,15,.97)!important;
    z-index:10001!important;
  }
  .hero-actions-v2{
    margin-bottom:1rem!important;
  }
  .hero-bottomline{
    margin-top:1.5rem!important;
  }
}


/* ============================================================
   PROJECT READABILITY / EDITORIAL COLOUR PASS
   Warm ivory + charcoal + terracotta palette.
   Preview artwork stays dark; project information stays light.
   ============================================================ */

:root{
  --portfolio-cream:#f5f0e7;
  --portfolio-paper:#fffdf8;
  --portfolio-charcoal:#1c1a17;
  --portfolio-text:#302d28;
  --portfolio-muted:#625d55;
  --portfolio-accent:#c65f31;
  --portfolio-line:rgba(28,26,23,.14);
}

/* Project cards use a clean editorial surface instead of a near-black panel. */
.work-card,
.project-card{
  background:var(--portfolio-paper)!important;
  border:1px solid var(--portfolio-line)!important;
  box-shadow:0 14px 40px rgba(28,26,23,.08)!important;
  color:var(--portfolio-text)!important;
}

.work-card:hover,
.project-card:hover{
  background:#fffefa!important;
  border-color:rgba(198,95,49,.30)!important;
  box-shadow:0 20px 55px rgba(28,26,23,.12)!important;
}

/* The preview itself remains the visual hero. */
.work-card .project-media,
.project-card .project-media{
  background:#24201c!important;
  border:1px solid rgba(28,26,23,.08)!important;
}

/* Information side: explicit readable colours. */
.work-card .work-info,
.project-card .work-info{
  background:transparent!important;
  color:var(--portfolio-text)!important;
}

.work-card .work-meta,
.project-card .work-meta{
  color:var(--portfolio-accent)!important;
  font-weight:600!important;
}

.work-card .work-title,
.project-card .work-title,
.work-card .project-title,
.project-card .project-title{
  color:var(--portfolio-charcoal)!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
}

.work-card .work-desc,
.project-card .work-desc{
  color:var(--portfolio-muted)!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
}

.work-card .work-stack span,
.project-card .work-stack span{
  color:#4f4a43!important;
  background:#eee8de!important;
  border:1px solid rgba(28,26,23,.08)!important;
  box-shadow:none!important;
}

.work-card .work-links,
.project-card .work-links{
  border-top:1px solid var(--portfolio-line)!important;
}

.work-card .work-links a,
.project-card .work-links a{
  color:#514b44!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
}

.work-card .work-links a:hover,
.project-card .work-links a:hover{
  color:var(--portfolio-accent)!important;
}

/* Featured project cards: never turn the information side black on hover. */
.work-card.project-featured,
.project-card.project-featured{
  background:var(--portfolio-paper)!important;
}
.work-card.project-featured:hover,
.project-card.project-featured:hover{
  background:#fffefa!important;
}

/* Keep the decorative sweep extremely subtle and behind content. */
.work-card::after,
.project-card::after{
  z-index:0!important;
  opacity:.16!important;
}
.work-card:hover::after,
.project-card:hover::after{
  opacity:.22!important;
}

/* Ensure every content layer remains above decorative effects. */
.work-card .work-info,
.project-card .work-info,
.work-card .work-meta,
.project-card .work-meta,
.work-card .work-title,
.project-card .work-title,
.work-card .work-desc,
.project-card .work-desc,
.work-card .work-stack,
.project-card .work-stack,
.work-card .work-links,
.project-card .work-links{
  position:relative!important;
  z-index:3!important;
}

/* Mobile keeps the same contrast and doesn't introduce extra height. */
@media(max-width:700px){
  .work-card,
  .project-card{
    background:var(--portfolio-paper)!important;
  }
}


/* ============================================================
   FINAL PROJECT CARD POLISH
   High-contrast CTAs + subtle editorial shine.
   No pointer tracker / no water effect.
   ============================================================ */

.work-card,
.project-card{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

/* Premium light sweep. It stays behind every piece of content. */
.work-card::before,
.project-card::before{
  content:""!important;
  position:absolute!important;
  top:-35%!important;
  left:-65%!important;
  width:38%!important;
  height:170%!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:0!important;
  transform:rotate(18deg) translateX(0)!important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.04) 28%,
    rgba(255,255,255,.46) 50%,
    rgba(255,255,255,.07) 72%,
    transparent 100%
  )!important;
  filter:blur(1px)!important;
  transition:opacity .25s ease!important;
}

.work-card:hover::before,
.project-card:hover::before{
  opacity:1!important;
  animation:portfolioCardShine 1.05s cubic-bezier(.2,.65,.25,1) forwards!important;
}

@keyframes portfolioCardShine{
  0%{ transform:rotate(18deg) translateX(0); }
  100%{ transform:rotate(18deg) translateX(430%); }
}

/* Content always wins over the shine layer. */
.work-card > *,
.project-card > *{
  position:relative!important;
  z-index:3!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Strong, clearly visible project links. */
.work-card .work-links,
.project-card .work-links{
  position:relative!important;
  z-index:5!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  align-items:center!important;
  opacity:1!important;
  visibility:visible!important;
  border-top:1px solid rgba(28,26,23,.14)!important;
  padding-top:18px!important;
  margin-top:22px!important;
}

.work-card .work-links a,
.project-card .work-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:9px 15px!important;
  border:1px solid #2b2925!important;
  border-radius:999px!important;
  background:#25231f!important;
  color:#fffdf8!important;
  font-family:inherit!important;
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease!important;
}

.work-card .work-links a:hover,
.project-card .work-links a:hover{
  background:#c65f31!important;
  border-color:#c65f31!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 8px 20px rgba(198,95,49,.22)!important;
}

/* The small "LIVE DEMO" button inside the preview needs contrast too. */
.work-card .project-media a,
.project-card .project-media a,
.work-card .project-media button,
.project-card .project-media button{
  position:relative!important;
  z-index:6!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:8px 14px!important;
  border:1px solid rgba(255,255,255,.38)!important;
  border-radius:999px!important;
  background:rgba(28,26,23,.86)!important;
  color:#fffaf2!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
  box-shadow:0 4px 18px rgba(0,0,0,.20)!important;
}

.work-card .project-media a:hover,
.project-card .project-media a:hover,
.work-card .project-media button:hover,
.project-card .project-media button:hover{
  background:#c65f31!important;
  border-color:#c65f31!important;
  color:#fff!important;
}

/* Keep all project text fully readable during hover. */
.work-card:hover .work-title,
.project-card:hover .work-title,
.work-card:hover .project-title,
.project-card:hover .project-title,
.work-card:hover .work-desc,
.project-card:hover .work-desc,
.work-card:hover .work-meta,
.project-card:hover .work-meta,
.work-card:hover .work-links,
.project-card:hover .work-links{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
}

/* No hover dimming on the information panel. */
.work-card:hover .work-info,
.project-card:hover .work-info{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  .work-card:hover::before,
  .project-card:hover::before{
    animation:none!important;
  }
  .work-card .work-links a,
  .project-card .work-links a{
    transition:none!important;
  }
}



/* FINAL FORM + PROJECT INTERACTION FIX */
.form-status-warning,.form-status-success{display:block!important;margin-top:.85rem!important;padding:.75rem .9rem!important;border-radius:12px!important;background:#f7f2e9!important;border:1px solid rgba(28,26,23,.10)!important;color:#4d4841!important}
.form-status-success{border-color:rgba(47,145,93,.22)!important}.form-status-warning{border-color:rgba(198,95,49,.22)!important}
.work-card .project-badge,.project-card .project-badge{z-index:7!important;left:16px!important;bottom:16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;padding:8px 14px!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:999px!important;background:rgba(24,22,19,.92)!important;color:#fffdf8!important;box-shadow:0 7px 20px rgba(0,0,0,.24)!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;transition:background .25s ease,border-color .25s ease,transform .25s ease!important}
.work-card:hover .project-badge,.project-card:hover .project-badge{background:#c65f31!important;border-color:#c65f31!important;color:#fff!important;transform:translateY(-2px)!important}
.work-card,.project-card{overflow:hidden!important;isolation:isolate!important}
.work-card::before,.project-card::before{content:""!important;position:absolute!important;top:-45%!important;left:-70%!important;width:34%!important;height:190%!important;z-index:2!important;pointer-events:none!important;opacity:0!important;transform:rotate(18deg) translateX(0)!important;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 25%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.08) 74%,transparent 100%)!important;filter:blur(.8px)!important}
.work-card:hover::before,.project-card:hover::before{opacity:1!important;animation:portfolioShineSweep 1.15s cubic-bezier(.18,.72,.24,1) forwards!important}
@keyframes portfolioShineSweep{0%{transform:rotate(18deg) translateX(0)}100%{transform:rotate(18deg) translateX(470%)}}
.work-card>*,.project-card>*,.work-card .work-info,.project-card .work-info,.work-card .work-title,.project-card .work-title,.work-card .work-desc,.project-card .work-desc,.work-card .work-meta,.project-card .work-meta,.work-card .work-stack,.project-card .work-stack,.work-card .work-links,.project-card .work-links{opacity:1!important;visibility:visible!important;filter:none!important}
.work-card .project-media,.project-card .project-media{z-index:3!important}.work-card .work-info,.project-card .work-info{z-index:4!important}
@media (prefers-reduced-motion:reduce){.work-card:hover::before,.project-card:hover::before{animation:none!important}}


/* =========================================================
   CHATBOT — CLEAN, COMPACT, CLIENT-FACING INTERFACE
   ========================================================= */
.chat-fab{
  z-index:9000!important;
  right:22px!important;
  bottom:22px!important;
  min-height:54px!important;
  padding:0 20px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:999px!important;
  background:#191815!important;
  color:#fffaf2!important;
  box-shadow:0 18px 55px rgba(0,0,0,.30)!important;
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease!important;
}
.chat-fab:hover{
  background:#c65f31!important;
  transform:translateY(-3px)!important;
  box-shadow:0 22px 60px rgba(198,95,49,.24)!important;
}
.chat-fab-icon{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  margin-right:9px!important;
  border-radius:50%!important;
  background:#f5f0e7!important;
  color:#211f1b!important;
}
.chat-fab-label{
  font:600 .76rem/1 'DM Sans',sans-serif!important;
  letter-spacing:.04em!important;
}

.chat-panel{
  z-index:9001!important;
  position:fixed!important;
  right:22px!important;
  bottom:92px!important;
  width:min(420px,calc(100vw - 44px))!important;
  height:min(620px,calc(100vh - 125px))!important;
  max-height:calc(100vh - 100px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:24px!important;
  background:rgba(15,15,14,.96)!important;
  color:#f5f0e7!important;
  backdrop-filter:blur(24px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(125%)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.46)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(16px) scale(.985)!important;
  transition:opacity .28s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .28s!important;
}
.chat-panel.open{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}

.chat-header{
  min-height:76px!important;
  padding:15px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(135deg,rgba(198,95,49,.10),rgba(255,255,255,.025))!important;
}
.chat-header-info{gap:.7rem!important}
.chat-avatar{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#c65f31!important;
  color:#fff!important;
  font:700 1rem/1 'DM Sans',sans-serif!important;
  box-shadow:0 8px 24px rgba(198,95,49,.22)!important;
}
.chat-header h4{
  margin:0!important;
  color:#fffaf2!important;
  font:650 .9rem/1.2 'DM Sans',sans-serif!important;
}
.chat-status{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:5px!important;
  color:rgba(245,240,231,.52)!important;
  font:.68rem/1 'DM Sans',sans-serif!important;
}
.chat-status-dot{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#55d58a!important;
  box-shadow:0 0 0 4px rgba(85,213,138,.09)!important;
}
.chat-close{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid transparent!important;
  border-radius:50%!important;
  color:rgba(245,240,231,.52)!important;
  background:transparent!important;
}
.chat-close:hover{
  border-color:rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
}

.chat-body{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  background:
    radial-gradient(circle at 85% 8%,rgba(198,95,49,.07),transparent 34%),
    #11110f!important;
}
.chat-body::-webkit-scrollbar{width:6px!important}
.chat-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14)!important;
  border-radius:999px!important;
}

.chat-msg{
  display:flex!important;
  align-items:flex-end!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
}
.chat-msg-user{flex-direction:row-reverse!important}
.chat-msg-avatar{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  font:700 .62rem/1 'DM Sans',sans-serif!important;
}
.chat-msg-bot .chat-msg-avatar{
  background:#c65f31!important;
  color:#fff!important;
}
.chat-msg-user .chat-msg-avatar{
  background:#ece6db!important;
  color:#3b3731!important;
}
.chat-msg-bubble{
  max-width:min(84%,330px)!important;
  padding:12px 14px!important;
  border-radius:16px 16px 16px 5px!important;
  background:#24231f!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#e8e2d8!important;
  box-shadow:0 7px 24px rgba(0,0,0,.12)!important;
  overflow-wrap:anywhere!important;
}
.chat-msg-user .chat-msg-bubble{
  border-radius:16px 16px 5px 16px!important;
  background:#f1ece3!important;
  color:#302d28!important;
}
.chat-msg-bubble p{
  margin:0!important;
  font:400 .83rem/1.55 'DM Sans',sans-serif!important;
}
.chat-link{
  color:#e88752!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(232,135,82,.35)!important;
  text-underline-offset:2px!important;
  word-break:break-word!important;
}
.chat-link:hover{color:#ffb183!important}

.chat-suggestions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:11px!important;
}
.chat-suggestions button{
  padding:7px 10px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  color:#f1ece3!important;
  font:600 .67rem/1 'DM Sans',sans-serif!important;
  cursor:pointer!important;
  transition:background .2s ease,border-color .2s ease,transform .2s ease!important;
}
.chat-suggestions button:hover{
  background:#c65f31!important;
  border-color:#c65f31!important;
  transform:translateY(-1px)!important;
}

.chat-input{
  min-height:70px!important;
  padding:12px 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
  background:#0d0d0c!important;
}
.chat-input input{
  min-width:0!important;
  height:44px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:13px!important;
  background:#171715!important;
  color:#fffaf2!important;
  font:400 .82rem/1 'DM Sans',sans-serif!important;
}
.chat-input input::placeholder{color:rgba(245,240,231,.38)!important}
.chat-input input:focus{
  outline:none!important;
  border-color:rgba(198,95,49,.58)!important;
  box-shadow:0 0 0 3px rgba(198,95,49,.08)!important;
}
.chat-input button{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  border-radius:13px!important;
  background:#f1ece3!important;
  color:#25221e!important;
  border:0!important;
}
.chat-input button:hover{
  background:#c65f31!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.chat-typing-bubble{padding:12px 15px!important}
.chat-typing{display:flex!important;align-items:center!important;gap:4px!important}
.chat-typing span{
  width:5px!important;height:5px!important;border-radius:50%!important;
  background:#d6cfc4!important;
  animation:chatDot 1s infinite ease-in-out!important;
}
.chat-typing span:nth-child(2){animation-delay:.12s!important}
.chat-typing span:nth-child(3){animation-delay:.24s!important}
@keyframes chatDot{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}

/* ---------- CONTACT FORM FEEDBACK ---------- */
.btn-submit{
  min-height:48px!important;
  border-radius:999px!important;
  background:#c65f31!important;
  border:1px solid #c65f31!important;
  color:#fff!important;
  cursor:pointer!important;
  box-shadow:0 10px 28px rgba(198,95,49,.16)!important;
}
.btn-submit:hover{
  background:#a94d27!important;
  border-color:#a94d27!important;
  transform:translateY(-2px)!important;
}
.btn-submit:disabled{opacity:.65!important}
.form-status-success{
  color:#26734b!important;
  background:rgba(38,115,75,.09)!important;
  border:1px solid rgba(38,115,75,.20)!important;
  padding:10px 13px!important;
  border-radius:10px!important;
}
.form-status-error{
  color:#9b3c28!important;
  background:rgba(155,60,40,.08)!important;
  border:1px solid rgba(155,60,40,.18)!important;
  padding:10px 13px!important;
  border-radius:10px!important;
}
.submit-spinner{
  width:13px!important;height:13px!important;
  border:2px solid rgba(255,255,255,.38)!important;
  border-top-color:#fff!important;
  border-radius:50%!important;
  animation:submitSpin .7s linear infinite!important;
}
@keyframes submitSpin{to{transform:rotate(360deg)}}

@media (max-width:600px){
  .chat-panel{
    right:10px!important;
    bottom:78px!important;
    width:calc(100vw - 20px)!important;
    height:min(610px,calc(100vh - 92px))!important;
    border-radius:20px!important;
  }
  .chat-body{padding:14px!important}
  .chat-msg-bubble{max-width:88%!important}
  .chat-fab{right:12px!important;bottom:14px!important}
}