/* ---------- Work page ---------- */
:root {
  --gl: #e8d5a3;
  --gm: #bba97f;
  --gd: #9a8c6b;
  --coral: #d9694f;
  --stage-bg: #0f0e0a;
}

html { scroll-padding-top: 24px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--gutter);
}
.topnav { display: flex; gap: clamp(16px, 3vw, 36px); }
.topnav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s;
}
.topnav a:hover { border-color: var(--gold-dark); }
.brand-mark { width: 64px; height: auto; display: block; }
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1250px) { .container { padding: 0; } }

.work-hero {
  padding: clamp(40px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  background: radial-gradient(60% 80% at 20% 0%, rgba(232, 213, 163, 0.28), transparent 70%);
}
.work-title { max-width: 16ch; }
.work-hero .lead { max-width: 60ch; }

.jump { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jump a {
  display: inline-block;
  padding: 9px 18px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.jump a:hover { background: rgba(187, 169, 127, 0.2); border-color: var(--ink); }

/* Projects */
.projects { display: grid; gap: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); }
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.project:nth-child(even) .stage { order: -1; }
.project:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.project-no {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
}
.project-tag {
  margin: 10px 0 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.project h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
}
.project-lead { margin: 0; line-height: 1.75; color: #3d3a2d; }
.project-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.project-points li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
  font-size: 0.95rem;
  color: #4a4636;
}
.project-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--gl), var(--gd));
  transform: rotate(45deg);
}
.project-meta { margin: 20px 0 0; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--gold-deep); }

/* Stage (animation panel) */
.stage {
  position: relative;
  aspect-ratio: 600 / 380;
  border-radius: 24px;
  border: 1px solid rgba(232, 213, 163, 0.22);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(232, 213, 163, 0.1), transparent 70%),
    var(--stage-bg);
  box-shadow: 0 30px 60px -20px rgba(11, 11, 11, 0.45);
  overflow: hidden;
  color: var(--gl);
}
.stage > svg { width: 100%; height: 100%; display: block; transition: opacity 0.5s; }
.stage.out > svg { opacity: 0; }
.stage text { font-family: var(--font-sans); font-size: 12px; font-weight: 500; }
.stage text.tiny { font-size: 10px; letter-spacing: 0.14em; font-weight: 600; }
.stage text.dim-label { font-size: 15px; font-weight: 600; }
.stage .t-gold { fill: var(--gl); }
.stage .t-dim { fill: var(--gd); }

/* Shared drawing primitives */
.g-line { fill: none; stroke: #d9c58f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-col { fill: none; stroke: var(--gl); stroke-width: 6; stroke-linecap: round; }
.g-beam { stroke-width: 4; }
.g-thin { fill: none; stroke: var(--gm); stroke-width: 1.2; stroke-linecap: round; }
.g-dim { fill: none; stroke: var(--gd); stroke-width: 1; }
.g-stir { fill: none; stroke: var(--gm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bar-line { fill: none; stroke: var(--gl); stroke-width: 3; stroke-linecap: round; }
.bar circle { fill: var(--gl); }

.stage .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.stage .pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); }
.stage .fade { opacity: 0; }
.stage .grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }

.stage.play .draw { animation: draw var(--t, 0.8s) var(--d, 0s) cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.stage.play .pop { animation: pop 0.45s var(--d, 0s) cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.stage.play .fade { animation: fadein 0.6s var(--d, 0s) ease forwards; }
.stage.play .grow { animation: grow 0.9s var(--d, 0s) cubic-bezier(0.3, 0.7, 0.2, 1) forwards; }

.stage.static .draw { stroke-dashoffset: 0; }
.stage.static .pop { opacity: 1; transform: none; }
.stage.static .fade { opacity: 1; }
.stage.static .grow { transform: none; }
.stage.static * { animation: none !important; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
@keyframes fadein { to { opacity: 1; } }
@keyframes grow { to { transform: scaleX(1); } }

/* ----- GES Designer ----- */
.soil { fill: rgba(154, 140, 107, 0.09); }
.panel { fill: rgba(232, 213, 163, 0.22); stroke: var(--gl); stroke-width: 1.5; }
.purlin { fill: var(--gl); }
.spring use, .spring { fill: none; stroke: var(--gm); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rays { stroke-width: 2; }
.stage.play .rays { animation: spin 18s linear infinite; }
.wind-g { stroke: var(--gl); stroke-width: 2.4; }
.wind { opacity: 0; }
.stage.play .wind { animation: wind 1.8s var(--d) ease-in-out infinite; }
.stage.play .ges-frame { transform-origin: 300px 260px; animation: sway 2.4s 8s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wind {
  0% { opacity: 0; transform: translateX(-14px); }
  30%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(26px); }
}
@keyframes sway { from { transform: rotate(0); } to { transform: rotate(-0.8deg); } }

/* ----- StructMind (HTML flow) ----- */
.stage--flow {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  aspect-ratio: auto;
  min-height: 380px;
  justify-content: center;
}
.sm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sm-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gd); }
.sm-clock strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1;
  font-feature-settings: "lnum" 1, "tnum" 1;
  background: linear-gradient(135deg, var(--gl), var(--gm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sm-compare { text-align: right; }
.sm-compare s { color: var(--coral); font-size: 1.1rem; font-weight: 600; text-decoration-thickness: 2px; }
.sm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; }
.sm-steps li {
  position: relative;
  padding: 14px 12px 16px;
  border: 1px solid rgba(154, 140, 107, 0.35);
  border-radius: 14px;
  background: rgba(232, 213, 163, 0.04);
  opacity: 0.45;
  transition: opacity 0.4s, border-color 0.4s, background 0.4s, transform 0.4s;
}
.sm-steps li svg { width: 26px; height: 26px; fill: none; stroke: var(--gl); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sm-steps h4 { margin: 10px 0 2px; font-size: 0.86rem; font-weight: 600; color: var(--gl); }
.sm-steps p { margin: 0; font-size: 0.72rem; color: var(--gd); }
.sm-steps li.active { opacity: 1; border-color: var(--gl); background: rgba(232, 213, 163, 0.12); transform: translateY(-4px); }
.sm-steps li.active svg { animation: pulse 1s ease-in-out infinite; }
.sm-steps li.done { opacity: 1; border-color: rgba(187, 169, 127, 0.6); }
.sm-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gl);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.sm-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2.5px;
  width: 4px;
  height: 8px;
  border: solid #0f0e0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sm-steps li.done .sm-check { transform: scale(1); }
.sm-bar { height: 6px; border-radius: 3px; background: rgba(154, 140, 107, 0.2); overflow: hidden; }
.sm-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gd), var(--gl)); border-radius: 3px; }
.sm-status { margin: 0; font-size: 0.85rem; color: var(--gm); min-height: 1.3em; }
@keyframes pulse { 50% { transform: scale(1.18); } }

/* ----- StructVerify ----- */
.sv-skyline rect { fill: rgba(232, 213, 163, 0.07); }
.sv-windows line { stroke: rgba(15, 14, 10, 0.55); stroke-width: 1.2; }
#sv-floors rect { fill: rgba(232, 213, 163, 0.06); stroke: rgba(232, 213, 163, 0.3); stroke-width: 0.8; transition: fill 0.35s; }
#sv-scan { fill: var(--gl); opacity: 0; }
#sv-scan-glow { opacity: 0; }
.sv-check circle { fill: none; stroke: var(--gd); stroke-width: 1.4; transition: stroke 0.3s, fill 0.3s; }
.sv-check path { fill: none; stroke: #0f0e0a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sv-check text { fill: var(--gd); transition: fill 0.3s; }
.sv-check.done circle { fill: var(--gl); stroke: var(--gl); }
.sv-check.done path { opacity: 1; }
.sv-check.done text { fill: var(--gl); }
#sv-result { opacity: 0; transition: opacity 0.5s; font-weight: 600; font-size: 13px; }
#sv-result.show { opacity: 1; }
.sv-flag { fill: var(--coral); font-size: 11px; font-weight: 600; transition: fill 0.3s; }
.sv-flag.fixed { fill: var(--gl); }

/* ----- BCA Extractor ----- */
.balloon circle { fill: #0f0e0a; stroke: var(--gl); stroke-width: 1.5; }
.balloon text { fill: var(--gl); font-weight: 600; font-size: 13px; }

/* ----- AutoConnection ----- */
.ac-col { fill: rgba(232, 213, 163, 0.08); }
.ac-web { fill: rgba(232, 213, 163, 0.07); stroke: rgba(232, 213, 163, 0.25); stroke-width: 1; }
.ac-flange { fill: var(--gm); }
.ac-beam { opacity: 0; transform: translateX(220px); }
.stage.play .ac-beam { animation: slide 1.1s var(--d) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes slide { to { opacity: 1; transform: none; } }
.plate { fill: rgba(232, 213, 163, 0.28); }
.weld { fill: none; stroke: #f6e8bd; stroke-width: 5; stroke-linecap: round; }
.weld-glow { stroke: var(--gl); stroke-width: 11; opacity: 0.4; filter: blur(4px); }
.ac-bolt { opacity: 0; }
.ac-bolt use { fill: var(--gl); stroke: #0f0e0a; stroke-width: 1; }
.ac-bolt circle { fill: #0f0e0a; opacity: 0.55; }
.stage.play .ac-bolt { animation: bolt 0.7s var(--d) cubic-bezier(0.3, 1.3, 0.5, 1) forwards; }
@keyframes bolt {
  0% { opacity: 0; transform: translateY(-46px) rotate(0); }
  55% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 1; transform: translateY(0) rotate(60deg); }
}
.badge { fill: rgba(232, 213, 163, 0.12); stroke: var(--gl); stroke-width: 1.2; }
.badge-tick { fill: none; stroke: var(--gl); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ----- ChatBots ----- */
.stage--chat { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); padding: clamp(14px, 2.5vw, 28px); }
.bot { flex: 0 0 34%; max-width: 190px; }
.bot svg { width: 100%; height: auto; display: block; overflow: visible; }
.bot-body { animation: bob 3s ease-in-out infinite; }
.bot-shadow { fill: rgba(0, 0, 0, 0.5); transform-box: fill-box; transform-origin: center; animation: shadow 3s ease-in-out infinite; }
.bot-led { fill: var(--gl); animation: led 1.4s ease-in-out infinite; }
.bot-eye { fill: var(--gl); transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.bot-eyes { animation: look 6s ease-in-out infinite; }
.bot-wave { transform-origin: 69px 158px; animation: wave 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes shadow { 50% { transform: scaleX(0.82); opacity: 0.6; } }
@keyframes led { 50% { opacity: 0.25; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(5px); } 70% { transform: translateX(-4px); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }

.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-self: stretch; }
.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: clamp(0.74rem, 1.4vw, 0.88rem);
  line-height: 1.45;
  animation: msg-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.msg.user { align-self: flex-end; background: var(--gl); color: #1a170e; border-bottom-right-radius: 4px; }
.msg.bot-msg { align-self: flex-start; background: rgba(232, 213, 163, 0.12); border: 1px solid rgba(232, 213, 163, 0.28); color: var(--gl); border-bottom-left-radius: 4px; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gl); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }

/* ----- CRM Agents ----- */
.appt .a1 { fill: rgba(232, 213, 163, 0.85); }
.appt .a2 { fill: rgba(187, 169, 127, 0.75); }
.appt .a3 { fill: rgba(154, 140, 107, 0.7); }
.band { fill: rgba(232, 213, 163, 0.14); }
.g-forecast { stroke-dasharray: 5 5 !important; stroke: #f6e8bd; }
.stage.play .g-forecast.draw { stroke-dasharray: 5 5; animation: fadein 0.8s var(--d) forwards; opacity: 0; }
.forecast-dot { fill: #f6e8bd; }
.bar-track rect { fill: rgba(154, 140, 107, 0.16); }
.stock { fill: var(--gm); }
.stock-low { fill: var(--coral); }
.tag { fill: rgba(217, 105, 79, 0.16); stroke: var(--coral); stroke-width: 1.2; }
.tag-text { fill: #f1a794; font-size: 11px !important; }

/* CTA + footer */
.work-cta { padding-bottom: clamp(60px, 9vw, 120px); }
.work-cta .about-cta { margin-top: 0; }
.work-footer { padding: 28px var(--gutter); text-align: center; font-size: 0.82rem; color: var(--gold-deep); border-top: 1px solid rgba(154, 140, 107, 0.25); }
.work-footer p { margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .project, .project:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .project:nth-child(even) .stage { order: 0; }
}
@media (max-width: 560px) {
  .topnav a:nth-child(2) { display: none; }
  .sm-steps { grid-template-columns: repeat(2, 1fr); }
  .stage--chat { flex-direction: column; aspect-ratio: auto; min-height: 420px; }
  .bot { flex-basis: auto; width: 120px; }
  .chat { width: 100%; align-self: auto; }
  .stage text { font-size: 15px; }
  .stage text.tiny { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bot-body, .bot-shadow, .bot-led, .bot-eye, .bot-eyes, .bot-wave, .sm-steps li.active svg { animation: none; }
}

/* Loop stages stay blank until they scroll into view; static fallback shows the finished drawing */
.stage[data-anim="loop"]:not(.play):not(.static) > svg { opacity: 0; }
.stage.static .ac-beam, .stage.static .ac-bolt, .stage.static .wind { opacity: 1; transform: none; }
.stage.static .g-forecast { stroke-dasharray: 5 5; opacity: 1; }