:root{--wine:#491e2a;--paper:#f6f3ee;--ink:#322c2a;--line:#d6ccc8;--muted:#746766}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:36px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}header{display:flex;align-items:center;justify-content:space-between;padding:28px 5%;border-bottom:1px solid var(--line)}.brand{font-size:28px;font-weight:700;letter-spacing:-1.5px;line-height:1}.brand span{font-size:10px;letter-spacing:4px;display:block;margin-top:7px;text-align:center}nav{display:flex;gap:36px;font-size:14px}nav a:hover{text-decoration:underline;text-underline-offset:6px}.hero{padding:34px 5% 64px;background:var(--wine);color:var(--paper);position:relative;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:1.4px;display:flex;justify-content:space-between;gap:20px}.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(60px,8.8vw,140px);line-height:1.04;letter-spacing:-.055em;margin:60px 0 42px;position:relative;z-index:1}.hero h1 em{font-weight:400;color:#dbb8bd}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:32px}.hero-bottom p{max-width:460px;font-size:18px;line-height:1.6;margin:0;color:#eee0e2}.round-link{display:flex;align-items:center;gap:20px;font-size:14px;white-space:nowrap}.round-link span{border:1px solid #c9a4ad;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:22px;transition:background .2s}.round-link:hover span{background:#744554}.work{padding:66px 5% 84px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:30px}.section-heading h2{font-family:Georgia,serif;font-weight:400;font-size:40px;line-height:1.2;letter-spacing:-1.5px;margin:0}.section-heading>span,.kicker{font-size:12px;letter-spacing:1.5px;color:var(--muted)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:48px 30px}.project:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center}.project .project-image{width:100%;height:360px;object-fit:cover;display:block;background:#d5ceca}.project:first-child .project-image{height:560px;object-position:center 43%}.project h3{font-family:Georgia,serif;font-weight:400;font-size:35px;letter-spacing:-1px;margin:8px 0 14px;line-height:1.2}.project p{max-width:530px}.project:not(:first-child) .project-copy{padding-top:22px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}.tags span{font-size:12px;border:1px solid var(--line);padding:5px 10px;border-radius:30px}.project details{margin-top:24px;border-top:1px solid var(--line);padding-top:15px}.project summary{cursor:pointer;font-size:14px}.project details p{font-size:15px;color:var(--muted)}.project .kicker{display:block;margin-top:5px}.expertise{background:var(--wine);color:var(--paper);padding:78px 5%}.expertise .section-heading>span{color:#d2b3ba}.expertise-intro{max-width:740px;font:400 clamp(30px,4vw,52px)/1.2 Georgia,serif;letter-spacing:-1px;margin:40px 0 50px}.service{display:grid;grid-template-columns:60px 1fr 1fr;gap:20px;padding:28px 0;border-top:1px solid #79515c;align-items:baseline}.service .number{font-size:13px;color:#d8b7bf}.service h3{font:400 28px/1.3 Georgia,serif;margin:0}.service p{margin:0;color:#dfcbd0;font-size:15px;max-width:480px}.about{padding:90px 5%;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.portrait{background:#d6c2bd;max-height:600px;overflow:hidden}.portrait img{width:100%;display:block;height:590px;object-fit:cover;object-position:center top;mix-blend-mode:multiply}.about h2{font:400 clamp(42px,5vw,68px)/1.1 Georgia,serif;letter-spacing:-2px;margin:24px 0}.about p{max-width:570px}.about .personal-meta{font-size:13px;letter-spacing:1px;margin-top:30px;border-top:1px solid var(--line);padding-top:20px}.approach{padding:12px 5% 85px}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;border-top:1px solid var(--line);padding-top:28px}.steps span{font-size:12px;color:var(--muted)}.steps h3{font:400 26px Georgia,serif;margin:12px 0}.steps p{font-size:14px;line-height:1.65}.contact{background:#ddd1ca;padding:70px 5%}.contact h2{font:400 clamp(48px,7.5vw,110px)/1.05 Georgia,serif;letter-spacing:-.05em;margin:26px 0 36px;color:var(--wine)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px}.contact-bottom p{max-width:520px}.contact-link{border-bottom:1px solid var(--wine);padding:10px 0;color:var(--wine);white-space:nowrap}footer{padding:25px 5%;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}@media(min-width:1600px){header,.hero,.work,.expertise,.about,.approach,.contact,footer{padding-left:max(5%,calc((100% - 1440px)/2));padding-right:max(5%,calc((100% - 1440px)/2))}}@media(max-width:800px){nav{gap:20px}.hero h1{font-size:clamp(53px,10vw,85px);margin:48px 0 36px}.hero-bottom{align-items:start}.hero-bottom p{font-size:16px}.projects{gap:35px 22px}.project:first-child{display:block}.project:first-child .project-image{height:440px}.project:first-child .project-copy{padding-top:22px}.project .project-image{height:260px}.about{gap:36px}.portrait img{height:450px}.steps{grid-template-columns:repeat(3,1fr)}.service{grid-template-columns:30px 1fr 1fr}.service h3{font-size:23px}}@media(max-width:540px){header{padding:22px 6%}.brand{font-size:23px}nav{gap:16px;font-size:13px}nav a:nth-child(2){display:none}.hero{padding:26px 6% 40px}.eyebrow{font-size:10px;letter-spacing:.8px;flex-wrap:wrap;gap:8px}.hero h1{font-size:clamp(44px,11.8vw,64px)}.hero-bottom{display:block}.round-link{margin-top:26px;gap:15px}.round-link span{width:38px;height:38px}.work,.expertise,.about,.contact{padding:48px 6%}.section-heading{display:block}.section-heading h2{font-size:34px}.section-heading>span{display:block;margin-top:12px;font-size:10px}.projects{display:block}.project{margin-top:36px}.project:first-child .project-image{height:420px}.project .project-image{height:290px}.project h3{font-size:32px}.service{grid-template-columns:24px 1fr;gap:10px;padding:23px 0}.service p{grid-column:2}.expertise-intro{font-size:34px;margin:30px 0}.about{display:flex;flex-direction:column;gap:35px;align-items:stretch}.portrait img{height:430px}.about h2{font-size:46px}.approach{padding:0 6% 48px}.steps{grid-template-columns:1fr;gap:8px}.steps article{border-bottom:1px solid var(--line);padding-bottom:12px}.steps h3{display:inline-block;margin-left:12px}.steps p{margin-top:4px}.contact-bottom{display:block}.contact-link{display:inline-block;margin-top:10px}footer{padding:24px 6%;flex-wrap:wrap}.contact h2{font-size:53px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ==========================================================================
   BYMAB Studio — Opening & Refresh Intro Loader (The Convergence Narrative)
   ========================================================================== */
.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--wine);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s;
  will-change: opacity, transform;
}
.intro-curtain.intro-done {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
  visibility: hidden;
}
.intro-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(94vw, 560px);
  height: min(94vw, 560px);
  margin: auto;
  padding: 10px;
  user-select: none;
}

/* Background Rotating Orbital Track & Compass Lines */
.hub-orbit-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  animation: orbitTrackSpin 120s linear infinite;
}
.intro-stage.menu-active .hub-orbit-track {
  opacity: 1;
  transform: scale(1);
}
@keyframes orbitTrackSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Central Living Logo (The Interactive "INICIO" Trigger)
   ========================================================================== */
.hub-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  outline: none;
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-stage.menu-active .hub-center-logo:hover,
.intro-stage.menu-active .hub-center-logo:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
}
.intro-stage.menu-active .hub-center-logo:active {
  transform: translate(-50%, -50%) scale(0.97);
}

.intro-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
#intro-svg {
  display: block;
  width: min(76vw, 300px);
  height: auto;
  aspect-ratio: 520 / 280;
  overflow: visible;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.32));
}

/* Subtle "INICIO" Cue directly below central logo */
.hub-logo-cue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(43, 16, 24, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(219, 184, 189, 0.45);
  color: var(--paper);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  margin-top: -6px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.intro-stage.menu-active .hub-logo-cue {
  opacity: 1;
  transform: translateY(0);
}
.hub-center-logo:hover .hub-logo-cue,
.hub-center-logo:focus-visible .hub-logo-cue {
  background: var(--paper);
  color: var(--wine);
  border-color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(219, 184, 189, 0.5);
}
.cue-pill {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.cue-arrow {
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.25s ease;
}
.hub-center-logo:hover .cue-arrow {
  transform: translateY(2px);
}

/* ==========================================================================
   Circular Orbital Navigation Menu (6 Variants)
   ========================================================================== */
.circular-menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.hub-node {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  outline: none;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-stage.menu-active .hub-node {
  pointer-events: auto;
  opacity: 1;
  transform: translate(calc(-50% + var(--nx)), calc(-50% + var(--ny))) scale(1);
}

/* Staggered blossoming delays */
.node-1 { transition-delay: 0.04s; }
.node-2 { transition-delay: 0.08s; }
.node-3 { transition-delay: 0.12s; }
.node-4 { transition-delay: 0.16s; }
.node-5 { transition-delay: 0.20s; }
.node-6 { transition-delay: 0.24s; }

.hub-node:hover,
.hub-node:focus-visible {
  transform: translate(calc(-50% + var(--nx)), calc(-50% + var(--ny))) scale(1.15) !important;
  z-index: 20;
}
.hub-node:active {
  transform: translate(calc(-50% + var(--nx)), calc(-50% + var(--ny))) scale(0.96) !important;
}

.node-disc {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(43, 16, 24, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.2px solid rgba(219, 184, 189, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.hub-node:hover .node-disc,
.hub-node:focus-visible .node-disc {
  border-color: #F6F3EE;
  background: rgba(73, 30, 42, 0.95);
  box-shadow: 0 6px 24px rgba(219, 184, 189, 0.45);
}
.node-disc svg {
  display: block;
  overflow: visible;
}

/* Variant Micro-interactions on Hover */
.v-rotator {
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hub-node:hover .v-rotator {
  transform: rotate(90deg);
}
.v-inner {
  transform-origin: center;
  transition: transform 0.35s ease;
}
.hub-node:hover .v-inner {
  transform: scale(1.18);
}
.v-aura {
  transform-origin: center;
  transition: transform 0.6s ease;
}
.hub-node:hover .v-aura {
  transform: rotate(60deg) scale(1.1);
}
.v-cross {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.hub-node:hover .v-cross {
  transform: scale(1.15);
}

.node-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.node-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #dbb8bd;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.node-sec {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(246, 243, 238, 0.6);
  text-transform: uppercase;
}
.hub-node:hover .node-name {
  color: var(--paper);
}

/* Floating Narrative Tooltips */
.node-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(32, 16, 21, 0.96);
  border: 1px solid rgba(219, 184, 189, 0.45);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 30;
}
.hub-node:hover .node-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive Orbital Proportions */
@media (max-width: 520px) {
  .intro-stage {
    width: 350px;
    height: 350px;
    padding: 8px;
  }
  .intro-stage.menu-active .hub-node {
    transform: translate(calc(-50% + var(--nx) * 0.70), calc(-50% + var(--ny) * 0.70)) scale(0.85);
  }
  .intro-stage.menu-active .hub-node:hover {
    transform: translate(calc(-50% + var(--nx) * 0.70), calc(-50% + var(--ny) * 0.70)) scale(0.96) !important;
  }
  #intro-svg {
    width: 220px;
    height: 120px;
  }
  .node-disc {
    width: 44px;
    height: 44px;
  }
  .node-disc svg {
    width: 30px;
    height: 30px;
  }
  .node-name {
    font-size: 7.5px;
    letter-spacing: 1px;
  }
  .node-tooltip {
    display: none;
  }
}

.hero h1, .eyebrow, .hero-bottom {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
body:not(.intro-finished) .hero h1 {
  opacity: 0.85;
  transform: translateY(6px);
}
body.intro-finished .hero h1 {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   6-Point Portfolio System: Section Badges, Engagement Grid & Floating Dock
   ========================================================================== */

/* Section Heading Enhancements */
.heading-title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-point-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #491e2a;
  background: rgba(73, 30, 42, 0.07);
  border: 1px solid rgba(73, 30, 42, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 4px;
}

.section-point-tag.on-dark {
  color: #F6F3EE;
  background: rgba(246, 243, 238, 0.12);
  border-color: rgba(219, 184, 189, 0.35);
}

.hero-brand-tag {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-point-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(246, 243, 238, 0.14);
  border: 1px solid rgba(219, 184, 189, 0.35);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #f6f3ee;
}

.point-badge-svg {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

/* Contact Section & 3 Engagement Cards (Penpot Board 32) */
.contact-subhead {
  max-width: 620px;
  font-size: 16px;
  color: #554848;
  margin: -16px 0 36px;
  line-height: 1.6;
}

.engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.engagement-card {
  background: #FFFFFF;
  border: 1px solid #d6ccc8;
  border-radius: 8px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(43, 16, 24, 0.04);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}

.engagement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(73, 30, 42, 0.10);
  border-color: #491E2A;
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.card-header h3 {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #491E2A;
  margin: 0;
  letter-spacing: -0.5px;
}

.card-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #937166;
  text-transform: uppercase;
}

.engagement-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #443c3a;
  margin: 0 0 20px;
  flex-grow: 1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid #ede8e3;
  padding-top: 14px;
}

.card-tags span {
  font-size: 11px;
  background: #fbf9f6;
  border: 1px solid #e2deda;
  color: #665a58;
  padding: 4px 9px;
  border-radius: 12px;
}

/* Contact Action & Availability Banner */
.contact-action-bar {
  background: var(--wine);
  color: var(--paper);
  border-radius: 8px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 24px rgba(43, 16, 24, 0.25);
}

.action-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-title {
  font-size: 18px;
  font-family: Georgia, serif;
  color: #f6f3ee;
}

.action-detail {
  font-size: 13px;
  color: #dbb8bd;
  letter-spacing: 0.3px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-btn-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  color: var(--wine);
  padding: 11px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn-email:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.contact-btn-insta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(219, 184, 189, 0.5);
  color: #f6f3ee;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-btn-insta:hover {
  background: rgba(219, 184, 189, 0.15);
  border-color: #f6f3ee;
}

/* ==========================================================================
   Floating 6-Point Portfolio System Dock
   ========================================================================== */
.portfolio-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(43, 16, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(219, 184, 189, 0.35);
  border-radius: 36px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
}

body.intro-finished .portfolio-dock {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dock-item {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dbb8bd;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
  outline: none;
}

.dock-item:hover,
.dock-item:focus-visible {
  background: rgba(219, 184, 189, 0.2);
  color: #F6F3EE;
  transform: scale(1.15);
}

.dock-item.active {
  background: #F6F3EE;
  color: #491E2A;
  box-shadow: 0 2px 10px rgba(246, 243, 238, 0.4);
}

.dock-svg {
  display: block;
  overflow: visible;
}

/* Floating tooltip on dock hover */
.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(24, 10, 15, 0.96);
  border: 1px solid rgba(219, 184, 189, 0.35);
  color: #F6F3EE;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 860px) {
  .engagement-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .contact-action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .portfolio-dock {
    bottom: 12px;
    padding: 4px 6px;
    gap: 2px;
  }
  .dock-item {
    width: 32px;
    height: 32px;
  }
  .dock-svg {
    width: 14px;
    height: 14px;
  }
  .dock-tooltip {
    display: none;
  }
}