:root {
  --content-max: 1200px;
}

body {
  background: #050505;
  background-image: linear-gradient(#0b0b0b 0, #0b0b0b 1px, transparent 1px), linear-gradient(90deg, #0b0b0b 0, #0b0b0b 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--ink);
}

.container {
  width: min(var(--content-max), calc(100% - 30px));
  margin: 0 auto;
}

.section {
  padding: 100px 0;
  border-top: 3px solid var(--line);
}

.narrow {
  max-width: 760px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 5, 5, 0.92);
  border-bottom: 3px solid var(--line);
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  text-transform: uppercase;
  border: 2px solid var(--line);
  padding: 15px 18px;
  color: var(--ink);
}

.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  border: 2px solid var(--line);
  background: #111;
  padding: 6px;
}

.brand span {
  display: inline-block;
  line-height: 1;
}

.main-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--ink);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero {
  padding-top: 90px;
  padding-bottom: 90px;
  background: #0a0a0a;
  border-top: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.75fr;
  gap: 36px;
  align-items: end;
}

.hero-panel {
  display: grid;
  gap: 18px;
  align-content: center;
}

.rubik-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 290px;
  padding: 20px 12px 10px;
  border: 3px solid var(--line);
  background: #0b0b0b;
  box-shadow: 10px 10px 0 var(--yellow);
  overflow: hidden;
}

.rubik-stage::before {
  content: "";
  position: absolute;
  inset: 10% 12%;
  background: radial-gradient(circle, rgba(255, 211, 52, 0.15), transparent 65%);
  border: 2px solid rgba(255, 255, 255, 0.06);
}

.rubik-scene {
  position: relative;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.rubik-cube {
  position: relative;
  width: 170px;
  height: 170px;
  transform-style: preserve-3d;
  animation: none;
  transform: rotateX(-25deg) rotateY(-30deg);
}

.face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.9);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28);
}

.front { transform: translateZ(85px); }
.back { transform: rotateY(180deg) translateZ(85px); }
.right { transform: rotateY(90deg) translateZ(85px); }
.left { transform: rotateY(-90deg) translateZ(85px); }
.top { transform: rotateX(90deg) translateZ(85px); }
.bottom { transform: rotateX(-90deg) translateZ(85px); }

.tile {
  display: block;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.13);
}

.red { background: #ff4d4d; }
.orange { background: #ff8a1d; }
.white { background: #f2efe8; }
.blue { background: #2866ff; }
.green { background: #36d07c; }
.yellow { background: #ffd63b; }

@keyframes rubikSpin {
  0% {
    transform: rotateX(-25deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(-10deg) rotateY(90deg) rotateZ(12deg);
  }
  50% {
    transform: rotateX(18deg) rotateY(180deg) rotateZ(0deg);
  }
  75% {
    transform: rotateX(2deg) rotateY(270deg) rotateZ(-12deg);
  }
  100% {
    transform: rotateX(-25deg) rotateY(360deg) rotateZ(0deg);
  }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--yellow);
  margin: 0 0 18px;
}

.eyebrow.dark {
  color: var(--red);
}

.about h2,
.feature-copy h3,
.hero-copy h1,
.section-header h3,
.manifesto h2,
.contact h3 {
  margin: 0 0 18px;
  line-height: 0.9;
  letter-spacing: -0.07em;
  font-weight: 1000;
}

.hero-copy h1 {
  font-size: clamp(3.3rem, 7vw, 7rem);
  max-width: 760px;
  text-transform: uppercase;
}

.manifesto h2,
.about h2,
.feature-copy h3,
.section-header h3,
.contact h3 {
  font-size: clamp(2.3rem, 4vw, 4rem);
  text-transform: uppercase;
}

.lead {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 680px;
  font-weight: 600;
}

.split-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 30px;
  align-items: start;
}

.about-copy {
  display: grid;
  gap: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.stat-box {
  background: #090909;
  border: 3px solid var(--line);
  padding: 18px 16px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-shadow: 8px 8px 0 var(--red);
}

.stat-box strong {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -0.06em;
}

.stat-box span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 800;
}

.feature-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: center;
  border: 3px solid var(--line);
  background: #0b0b0b;
  padding: 30px 24px;
  box-shadow: 10px 10px 0 var(--yellow);
}

.feature-copy h3 {
  margin: 0 0 16px;
}

.expertise-accordion {
  display: grid;
  gap: 14px;
}

.expertise-item {
  border: 2px solid var(--line);
  background: #0c0c0c;
  overflow: hidden;
}

.expertise-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  padding: 16px 18px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease, transform 0.2s ease;
}

.expertise-item summary::-webkit-details-marker {
  display: none;
}

.expertise-item summary:hover,
.expertise-item summary:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.summary-title {
  flex: 1;
}

.toggle-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 900;
}

.toggle-icon::before {
  content: "+";
}

.expertise-item[open] .toggle-icon::before {
  content: "×";
}

.expertise-content {
  border-top: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.01);
  padding: 18px 18px 6px;
}

.expertise-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.expertise-content li {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  align-items: center;
}

.cta-collapsible {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  width: 166px;
  padding: 0 16px 0 18px;
  border: 3px solid var(--ink);
  background: var(--red);
  color: #111;
  box-shadow: 6px 6px 0 #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-collapsible:hover,
.cta-collapsible:focus-visible {
  width: 278px;
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--yellow);
}

.cta-collapsed,
.cta-expanded,
.cta-arrow {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease, max-width 0.25s ease;
}

.cta-collapsed {
  opacity: 1;
  transform: translateX(0);
}

.cta-expanded {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(14px);
}

.cta-collapsible:hover .cta-expanded,
.cta-collapsible:focus-visible .cta-expanded {
  max-width: 170px;
  opacity: 1;
  transform: translateX(0);
}

.cta-collapsible:hover .cta-collapsed,
.cta-collapsible:focus-visible .cta-collapsed {
  opacity: 0;
  transform: translateX(-12px);
}

.cta-arrow {
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 3px solid var(--ink);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border-radius: 0;
  transition: transform 0.15s ease;
}

.cta-collapsible {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  width: 166px;
  padding: 0 16px 0 18px;
  border: 3px solid var(--ink);
  background: var(--red);
  color: #111;
  box-shadow: 6px 6px 0 #fff;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-collapsible:hover,
.cta-collapsible:focus-visible,
.cta-collapsible.is-open {
  width: 278px;
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--yellow);
}

.cta-collapsed,
.cta-expanded,
.cta-arrow {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease, max-width 0.25s ease;
}

.cta-collapsed {
  opacity: 1;
  transform: translateX(0);
}

.cta-expanded {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(14px);
}

.cta-collapsible:hover .cta-expanded,
.cta-collapsible:focus-visible .cta-expanded,
.cta-collapsible.is-open .cta-expanded {
  max-width: 170px;
  opacity: 1;
  transform: translateX(0);
}

.cta-collapsible:hover .cta-collapsed,
.cta-collapsible:focus-visible .cta-collapsed,
.cta-collapsible.is-open .cta-collapsed {
  opacity: 0;
  transform: translateX(-12px);
}

.cta-arrow {
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
}

.button:hover {
  transform: translate(-2px, -2px);
}

.button.primary {
  background: var(--red);
  color: #111;
  border-color: var(--red);
  box-shadow: 6px 6px 0 #fff;
}

.button.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--yellow);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.hero-meta li {
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: #0f0f0f;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.hero-panel {
  display: grid;
  gap: 18px;
}

.panel-box {
  padding: 24px 20px;
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: var(--shadow);
  min-height: 130px;
}

.panel-box.accent {
  background: var(--yellow);
  color: #111;
  box-shadow: 10px 10px 0 #fff;
}

.panel-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.panel-box strong {
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  line-height: 1.1;
  display: block;
}

.card-grid {
  display: grid;
  gap: 22px;
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-card,
.project-card,
.timeline-item,
.contact-box {
  border: 3px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 8px 8px 0 var(--yellow);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 22px 18px;
  background: #0c0c0c;
  min-height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 var(--yellow);
}

.card-index {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--yellow);
  margin-bottom: 8px;
  font-size: 0.8rem;
}

.service-card h4 {
  margin: 0;
  font-size: clamp(2rem, 2.4vw, 3rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.service-card p,
.project-card p,
.timeline-item p,
.manifesto p,
.contact-box p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-list li {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  padding: 7px 9px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.process-shell {
  padding-top: 10px;
}

.process-intro {
  margin-bottom: 30px;
}

.process-intro h3 {
  margin: 0;
  line-height: 0.86;
  letter-spacing: -0.08em;
  font-size: clamp(3.2rem, 6vw, 7rem);
  text-transform: uppercase;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-top: 3px solid var(--line);
  padding-top: 12px;
}

.process-column {
  min-width: 0;
}

.process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  background: #070707;
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 var(--yellow);
  padding-bottom: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.process-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 14px 14px 0 var(--red);
  border-color: rgba(255, 61, 46, 0.9);
}

.card-head {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 10px;
  border-bottom: 3px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.card-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 62px;
  background: var(--red);
  color: #111;
  font-weight: 1000;
  font-size: 1rem;
  border: 3px solid #111;
  box-shadow: 6px 6px 0 var(--yellow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.process-card:hover .card-number {
  transform: scale(1.04) translateX(-1px);
  box-shadow: 10px 10px 0 #fff;
}

.card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title-wrap h4 {
  margin: 0;
  font-size: clamp(1.4rem, 1.8vw, 2.1rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.card-title-wrap span {
  display: inline-block;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 900;
}

.card-copy {
  margin: 0;
  padding: 0 12px;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--ink);
}

.process-flow-block {
  margin: 0 12px;
  padding: 10px 8px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.mini-label {
  margin-bottom: 8px;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
}

.flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flow-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 6px 8px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.01);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.process-card:hover .flow-node {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.flow-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stage-box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px 8px 16px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.02);
  font-size: 0.56rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.stage-box::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--red);
  transform: translateY(-50%);
}

.process-card:hover .stage-box {
  transform: translateX(2px);
  border-color: rgba(255, 61, 46, 0.7);
  background: rgba(255, 61, 46, 0.04);
}

.flow-arrow {
  display: flex;
  justify-content: center;
  color: var(--red);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 900;
}

.full {
  grid-column: 1 / -1;
}

.flow-result {
  margin-top: auto;
  padding: 10px 12px 0;
  border-top: 3px solid var(--line);
}

.result-tag {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--red);
}

.flow-result p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    box-shadow: 8px 8px 0 var(--yellow);
  }
}

@media (max-width: 620px) {
  .process-intro h3 {
    font-size: clamp(2.6rem, 10vw, 4rem);
  }

  .card-head {
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }

  .card-number {
    width: 70px;
    height: 68px;
    font-size: 1rem;
  }

  .card-title-wrap h4 {
    font-size: 1.5rem;
  }

  .visual-grid {
    grid-template-columns: 1fr;
  }

  .card-copy {
    font-size: 1rem;
  }
}

.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
}

.project-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0b0b0b;
}

.project-card .tag {
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 2px solid var(--line);
  padding: 8px 10px;
  font-weight: 900;
}

.project-card h4 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.06em;
}

.project-card .project-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.link-button {
  border: 2px solid var(--line);
  padding: 10px 13px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.link-button.primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #111;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.skill-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: #0b0b0b;
  color: #e8e3d9;
  border: 1px solid #3d3d3d;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.skill-tag::after {
  content: "";
  position: absolute;
  inset: 4px auto auto 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: #e5c229;
  z-index: -1;
}

.skill-tag .material-symbols-outlined {
  font-size: 21px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #e8e3d9;
  transition: color 0.2s ease, transform 0.2s ease;
}

.skill-tag:hover {
  transform: translate(-3px, -3px);
  background: #c91f1f;
  border-color: #c91f1f;
}

.skill-tag:hover .material-symbols-outlined {
  color: #fff;
  transform: rotate(-5deg);
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 22px;
  background: #0d0d0d;
  border: 3px solid var(--line);
  box-shadow: 10px 10px 0 var(--yellow);
}

.contact-form-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(12px);
}

.contact-form-panel.is-open {
  max-height: 900px;
  opacity: 1;
  transform: translateY(0);
}

.contact-copy {
  display: grid;
  gap: 18px;
}

.inline-contact-trigger {
  width: fit-content;
  border: 3px solid var(--ink);
  background: var(--red);
  color: #111;
  padding: 12px 18px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 6px 6px 0 var(--yellow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inline-contact-trigger:hover,
.inline-contact-trigger:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--yellow);
}

.contact-copy p:last-child {
  margin: 0;
  color: var(--muted);
  max-width: 42ch;
}

.contact-form {
  display: grid;
  gap: 18px;
}

.field-row {
  display: grid;
  gap: 18px;
}

.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--line);
  padding: 14px 14px;
  color: var(--ink);
  font: inherit;
  min-height: 52px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 61, 46, 0.18);
  transform: translateY(-1px);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.form-status {
  min-height: 24px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-status.is-success {
  color: #87f2a6;
}

.form-status.is-error {
  color: #ff8b7a;
}

.site-footer {
  border-top: 3px solid var(--line);
  padding: 28px 0 42px;
  color: var(--muted);
  background: #050505;
}

@media (max-width: 1024px) {
  .contact-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .two-up,
  .form-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .form-actions {
    gap: 10px;
  }

  .button {
    width: 100%;
  }
}

@media (max-width: 880px) {
  .hero-grid,
  .split-layout,
  .feature-panel,
  .services-showcase,
  .three-up,
  .portfolio-grid,
  .contact-box {
    grid-template-columns: 1fr;
    display: grid;
  }

  .contact-box {
    justify-content: start;
  }
}

@media (max-width: 620px) {
  .nav-wrap {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 14px 0;
  }

  .main-nav {
    justify-content: flex-start;
  }

  .section {
    padding: 76px 0;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }
}

/* Let mobile content reflow within its column, including enlarged text. */
@media (max-width: 880px) {
  .split-layout > *,
  .feature-panel > *,
  .service-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .services-showcase {
    gap: 28px;
  }
}

@media (max-width: 620px) {
  .about h2,
  .feature-copy h3 {
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1;
  }

  .about-copy > p {
    margin: 0;
  }

  .service-card {
    padding: 24px 20px;
  }

  .service-card h4 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    line-height: 1;
  }

  .service-list li {
    max-width: 100%;
  }

  .stats-grid {
    gap: 10px;
  }

  .stat-box {
    min-width: 0;
    padding: 16px 8px;
  }

  .stat-box span {
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
  }
}

/* Proyectos destacados: imágenes reales, proporción consistente y adaptación móvil */
#destacados .featured-thumb{display:block;width:100%;height:190px;object-fit:contain;object-position:center;background:#181818;border-radius:8px}
#destacados .project-card{min-width:0;overflow-wrap:anywhere}
#destacados .project-card>a:first-child{display:block;margin-bottom:1rem}
#destacados .project-card .project-actions{display:flex;flex-wrap:wrap;gap:.75rem}
@media(max-width:700px){#destacados .card-grid{grid-template-columns:1fr}#destacados .featured-thumb{height:auto;max-height:240px;aspect-ratio:16/9;object-fit:contain}#destacados .section-header{gap:1rem;flex-wrap:wrap}}

/* Accesibilidad: foco visible y preferencia de movimiento reducido */
:where(a,button,input,textarea,select):focus-visible{outline:3px solid #e3b935;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Rubik 3D: control explícito de reproducción y compatibilidad de transformaciones */
.rubik-scene{perspective:1000px;-webkit-perspective:1000px}
.rubik-cube{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
.rubik-cube .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rubik-cube.rubik-animate{animation:rubikSpin 14s linear infinite;transform-style:preserve-3d}
.rubik-cube.rubik-paused{animation:none;transform:rotateX(-25deg) rotateY(-30deg)}
.rubik-toggle{display:block;margin:10px 0 16px auto;padding:8px 14px;border:2px solid var(--line);background:#0b0b0b;color:#fff;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer;box-shadow:4px 4px 0 var(--yellow)}
.rubik-toggle:hover{background:#242424}
.rubik-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.rubik-cube:not(.rubik-animate){animation:none!important}}


/* Tarjetas hero: contenido real, navegación y microinteracciones */
a.panel-feature{position:relative;display:flex;align-items:center;gap:14px;overflow:hidden;text-decoration:none;color:inherit;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;min-height:175px}
.panel-feature__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}
.panel-feature__description{display:block;font-size:.79rem;line-height:1.45;margin-top:12px;max-width:28ch;color:#c9c9c9}
.panel-feature--projects .panel-feature__description{color:#292929}
.panel-feature__action{display:inline-flex;gap:9px;align-items:center;margin-top:14px;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;border-bottom:2px solid currentColor;padding-bottom:4px}
.panel-feature__action span{font-size:1.15rem;transition:transform .25s ease}
.panel-feature__image{width:34%;max-width:120px;max-height:140px;object-fit:contain;align-self:center;flex-shrink:0;filter:grayscale(1) contrast(1.12);opacity:.78;transition:transform .35s ease,filter .35s ease,opacity .35s ease}
.panel-feature--projects .panel-feature__image{transform:rotate(5deg);box-shadow:5px 6px 0 #111;max-height:125px;object-fit:cover}
a.panel-feature:hover{transform:translate(-3px,-4px);box-shadow:12px 13px 0 var(--yellow)}
a.panel-feature--projects:hover{box-shadow:12px 13px 0 #fff}
a.panel-feature:hover .panel-feature__image{filter:grayscale(0);opacity:1;transform:scale(1.06) rotate(-3deg)}
a.panel-feature:hover .panel-feature__action span{transform:translate(3px,-3px)}
a.panel-feature:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}
@media(max-width:440px){a.panel-feature{padding:18px 16px;gap:10px}.panel-feature__image{width:28%;max-width:90px}.panel-feature__description{font-size:.73rem}}
@media(prefers-reduced-motion:reduce){a.panel-feature,.panel-feature__image,.panel-feature__action span{transition:none}}

/* Mosaicos de obras reales en tarjetas del hero */
.panel-feature__mosaic{position:relative;flex:0 0 36%;height:138px;min-width:0;align-self:center;display:block;perspective:600px}
.panel-feature__mosaic img{position:absolute;display:block;width:72%;height:82%;object-fit:cover;border:2px solid currentColor;background:#171717;box-shadow:4px 5px 0 rgba(0,0,0,.55);transition:transform .32s ease,filter .32s ease;filter:grayscale(.75) contrast(1.1)}
.panel-feature__mosaic img:first-child{top:3%;left:0;transform:rotate(-11deg);z-index:1}
.panel-feature__mosaic img:nth-child(2){top:15%;right:0;transform:rotate(9deg);z-index:2}
.panel-feature__mosaic img:nth-child(3){top:32%;left:18%;transform:rotate(-2deg);z-index:3}
.panel-feature--specialty .panel-feature__mosaic img{width:78%;height:85%}
.panel-feature:hover .panel-feature__mosaic img:first-child{transform:translate(-7px,-5px) rotate(-15deg)}
.panel-feature:hover .panel-feature__mosaic img:nth-child(2){transform:translate(5px,-8px) rotate(13deg)}
.panel-feature:hover .panel-feature__mosaic img:nth-child(3){transform:translate(1px,5px) rotate(2deg)}
.panel-feature:hover .panel-feature__mosaic img{filter:grayscale(0)}
@media(max-width:440px){.panel-feature__mosaic{flex-basis:29%;height:115px}.panel-feature__mosaic img{width:90%;height:76%}}
@media(prefers-reduced-motion:reduce){.panel-feature__mosaic img{transition:none}}

/* Rubik: corregir perspectiva, recorte y profundidad de las seis caras */
.rubik-scene{width:100%;min-height:260px;height:260px;perspective:850px;overflow:visible;isolation:isolate}
.rubik-cube{width:156px;height:156px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-origin:center center}
.rubik-cube .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;gap:5px;padding:7px;box-sizing:border-box}
.rubik-cube .front{transform:translateZ(78px)}
.rubik-cube .back{transform:rotateY(180deg) translateZ(78px)}
.rubik-cube .right{transform:rotateY(90deg) translateZ(78px)}
.rubik-cube .left{transform:rotateY(-90deg) translateZ(78px)}
.rubik-cube .top{transform:rotateX(90deg) translateZ(78px)}
.rubik-cube .bottom{transform:rotateX(-90deg) translateZ(78px)}
.rubik-cube .tile{border-radius:6px}
.rubik-cube.rubik-animate{animation:rubikSpin 14s linear infinite}
.rubik-cube.rubik-paused{animation:none;transform:rotateX(-25deg) rotateY(-30deg)}
@media(max-width:440px){.rubik-scene{height:245px;min-height:245px}}


/* Animación Rubik: una sola regla final con prioridad sobre estilos anteriores */
@keyframes rubikRotation {
  from { transform: rotateX(-25deg) rotateY(-30deg); }
  to { transform: rotateX(-25deg) rotateY(330deg); }
}
.rubik-cube.rubik-animate { animation: rubikRotation 9s linear infinite !important; }
.rubik-cube.rubik-paused { animation: none !important; }

/* Portada editorial Chile bajo la piel: composición tipográfica de referencia */
.chile-cover-art{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:270px;padding:20px 22px 18px;background:#efebe3;color:#101015;text-decoration:none;overflow:hidden;border-radius:8px}
.chile-cover-title{display:flex;flex-direction:column;align-items:flex-start;font-family:Impact,"Arial Narrow",Arial,sans-serif;font-stretch:condensed;font-weight:1000;font-size:clamp(3.7rem,7.2vw,6.6rem);line-height:.78;letter-spacing:-.055em}
.chile-cover-title>span{display:block;white-space:nowrap}
.chile-cover-title>span:nth-child(2){color:#f50076;margin:.09em 0}
.chile-cover-title i{color:#f50076;font-family:Arial,sans-serif;font-style:normal;font-size:.72em;font-weight:400;vertical-align:middle;letter-spacing:0}
.chile-cover-caption{display:block;margin-top:25px;font:700 .65rem/1.4 "Courier New",monospace;letter-spacing:.025em}
.chile-cover-art:hover .chile-cover-title{transform:translateY(-2px);transition:transform .2s ease}
@media(max-width:540px){.chile-cover-art{min-height:240px;padding:20px}.chile-cover-title{font-size:clamp(3.4rem,15vw,5.7rem)}}
@media(prefers-reduced-motion:reduce){.chile-cover-art:hover .chile-cover-title{transform:none}}

/* Evitar solapamiento de las líneas en la portada de Chile bajo la piel */
.chile-cover-art{container-type:inline-size;justify-content:space-between;gap:14px}
.chile-cover-title{width:100%;font-size:clamp(2.4rem,13cqw,5.4rem);line-height:1.04;letter-spacing:-.045em;gap:0;transform:none}
.chile-cover-title>span{line-height:1.04;white-space:nowrap}
.chile-cover-title>span:nth-child(2){margin:0;color:#f50076}
.chile-cover-title i{font-size:.65em;vertical-align:baseline}
.chile-cover-caption{margin-top:8px}
@media(max-width:540px){.chile-cover-title{font-size:clamp(2.3rem,13cqw,5.4rem)}}

/* Ajuste tipográfico: tracking de la portada, sin letras fusionadas */
.chile-cover-title{font-family:Impact,"Arial Narrow",sans-serif;font-kerning:normal;letter-spacing:0.015em;font-size:clamp(2.25rem,12cqw,5.1rem);line-height:1.08}
.chile-cover-title>span{letter-spacing:0.015em;line-height:1.08}
.chile-cover-title>span:nth-child(2){letter-spacing:0}
.chile-cover-title i{margin-left:.12em}

/* Portada Chile bajo la piel: escala legible y caracteres separados */
.chile-cover-art{container-type:inline-size;min-height:270px}
.chile-cover-art .chile-cover-title{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-weight:900;font-stretch:normal;font-size:clamp(3rem,19cqw,5.7rem);line-height:1.02;letter-spacing:.025em;width:100%;font-kerning:normal}
.chile-cover-art .chile-cover-title>span{line-height:1.02;letter-spacing:.025em;white-space:nowrap}
.chile-cover-art .chile-cover-title>span:nth-child(2){letter-spacing:.012em}
.chile-cover-art .chile-cover-title i{font-size:.6em;margin-left:.1em}
@media(max-width:540px){.chile-cover-art .chile-cover-title{font-size:clamp(2.8rem,18cqw,5.3rem)}}

/* Legibilidad de la bajada editorial en la portada Chile bajo la piel */
.chile-cover-art .chile-cover-caption{font-size:clamp(.85rem,3.6cqw,1.05rem);line-height:1.45;letter-spacing:.015em;font-weight:700;margin-top:14px}

/* Portada original WebP: proporciones intactas, sin tipografía reconstruida */
.chile-cover-image-link{display:block;overflow:hidden;border-radius:8px;background:#efebe3;line-height:0;text-decoration:none}
.chile-cover-image{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;aspect-ratio:583/577}

/* Hero: evitar el vacío superior causado por alinear la columna izquierda al fondo */
.hero-grid{align-items:start}
.hero-copy{align-self:start}
.hero-panel{align-self:start}