/* ============================================================
   components.css — Reusable UI Components
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════ */

.vp-topbar {
  background:     var(--terra-deep);
  color:          rgba(245,240,234,0.85);
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding:        0.55rem 0;
  text-align:     center;
}


/* ══════════════════════════════════════════════════════════
   STICKY HEADER
   ══════════════════════════════════════════════════════════ */

.vp-header {
  background:      rgba(245,240,234,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:   1px solid rgba(201,169,110,0.18);
  position:        sticky;
  top:             0;
  z-index:         var(--z-nav);
  transition:      box-shadow var(--t-mid) ease;
}
.vp-header.scrolled {
  box-shadow: 0 4px 24px -8px rgba(26,23,20,0.14);
}


/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */

.vp-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 2rem;
  max-width:       1240px;
  margin:          0 auto;
  gap:             1rem;
}


/* ── LOGO ───────────────────────────────────────────────── */

.vp-logo {
  font-family:    var(--font-display);
  font-size:      1.45rem;
  font-weight:    400;
  color:          var(--ink);
  letter-spacing: 0.01em;
  white-space:    nowrap;
  flex-shrink:    0;
  line-height:    1.1;
  display:        flex;
  align-items:    center;
  gap:            0.6rem;
}
.vp-logo-icon {
  height:     3rem;
  width:      auto;
  display:    block;
  flex-shrink: 0;
}
.vp-logo em {
  color:      var(--terra);
  font-style: italic;
}
.vp-logo small {
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--graphite);
  margin-top:     2px;
}


/* ── NAV LINKS ──────────────────────────────────────────── */

.vp-nav-links {
  display:     flex;
  gap:         0;
  list-style:  none;
  align-items: center;
}

.vp-nav-links > li {
  position: relative;
}

.vp-nav-links > li > a {
  color:          var(--ink);
  font-family:    var(--font-body);
  font-size:      0.76rem;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.5rem 0.9rem;
  display:        flex;
  align-items:    center;
  gap:            0.3rem;
  position:       relative;
  transition:     color var(--t-fast) ease;
}
.vp-nav-links > li > a::after {
  content:    '';
  position:   absolute;
  left:       0.9rem;
  right:      0.9rem;
  bottom:     0px;
  height:     1.5px;
  background: var(--terra);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-smooth);
}
.vp-nav-links > li > a:hover         { color: var(--terra); }
.vp-nav-links > li > a:hover::after  { transform: scaleX(1); }
.vp-nav-links > li > a[aria-current="page"]        { color: var(--terra); }
.vp-nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Chevron for dropdown trigger */
.vp-nav-links .nav-chevron {
  width:      10px;
  height:     10px;
  transition: transform var(--t-fast) ease;
  opacity:    0.5;
}
.vp-nav-links > li:hover .nav-chevron { transform: rotate(180deg); opacity: 1; }


/* ── PORTFOLIO NAV DROPDOWN ─────────────────────────────── */

.vp-nav-dropdown {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--linen);
  border:        1px solid rgba(201,169,110,0.22);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  min-width:     300px;
  z-index:       var(--z-dropdown);
  overflow:      hidden;
  opacity:       0;
  visibility:    hidden;
  transform:     translateX(-50%) translateY(-6px);
  transition:    opacity var(--t-mid) ease,
                 visibility var(--t-mid) ease,
                 transform var(--t-mid) var(--ease-smooth);
  pointer-events: none;
}
@media (pointer: fine) {
  .vp-nav-links > li:hover .vp-nav-dropdown,
  .vp-nav-links > li:focus-within .vp-nav-dropdown {
    opacity:        1;
    visibility:     visible;
    transform:      translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.vp-dropdown-header {
  padding:        0.55rem 1.1rem;
  font-family:    var(--font-body);
  font-size:      0.62rem;
  font-weight:    600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background:     var(--linen-warm);
  border-bottom:  1px solid rgba(201,169,110,0.15);
}
.vp-dropdown-header.terra-head { color: var(--terra); }
.vp-dropdown-header.plum-head  { color: var(--plum); }

.vp-dropdown-link {
  display:     flex;
  align-items: center;
  gap:         0.85rem;
  padding:     0.8rem 1.1rem;
  color:       var(--ink) !important;
  font-size:   0.84rem;
  font-weight: 400;
  border-bottom: 1px solid rgba(201,169,110,0.08);
  transition:  background var(--t-fast) ease, color var(--t-fast) ease !important;
  letter-spacing: 0;
  text-transform: none !important;
}
.vp-dropdown-link:last-child { border-bottom: none; }
.vp-dropdown-link:hover {
  background: var(--linen-warm);
  color:      var(--terra) !important;
}
.vp-dropdown-link::after { display: none !important; }

.vp-dropdown-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}
.vp-dropdown-dot.terra { background: var(--terra); }
.vp-dropdown-dot.plum  { background: var(--plum); }
.vp-dropdown-dot.sand  { background: var(--sand); }

.vp-dropdown-link-text { flex: 1; }
.vp-dropdown-link-sub {
  font-size:   0.72rem;
  color:       var(--ink-soft);
  margin-top:  0.1rem;
  display:     block;
  font-style:  italic;
  font-family: var(--font-serif);
}

/* All portfolio link at bottom */
.vp-dropdown-all {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0.7rem 1.1rem;
  background:      var(--linen-warm);
  border-top:      1px solid rgba(201,169,110,0.15);
  font-size:       0.7rem;
  font-weight:     600;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           var(--terra) !important;
  transition:      background var(--t-fast) ease !important;
  text-transform: none !important;
}
.vp-dropdown-all::after { display: none !important; }
.vp-dropdown-all:hover { background: var(--stone); }


/* ── MOBILE TOGGLE ──────────────────────────────────────── */

.vp-mobile-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           44px;
  height:          44px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         8px;
  flex-shrink:     0;
}
.vp-mobile-toggle span {
  display:    block;
  width:      100%;
  height:     1.5px;
  background: var(--ink);
  transition: all var(--t-mid) ease;
  transform-origin: center;
}
.vp-mobile-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.vp-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.vp-mobile-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.vp-mobile-menu {
  display:     flex;
  align-items: center;
  gap:         1rem;
}


/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */

.vp-cta {
  display:        inline-block;
  background:     var(--terra);
  color:          var(--linen) !important;
  border:         1px solid var(--terra);
  padding:        0.78rem 1.9rem;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all var(--t-mid) var(--ease-smooth);
  position:       relative;
  overflow:       hidden;
}
.vp-cta:hover {
  background:   var(--sand);
  border-color: var(--sand);
  color:        var(--ink) !important;
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-terra);
}

.vp-cta-plum {
  display:        inline-block;
  background:     var(--plum);
  color:          var(--linen) !important;
  border:         1px solid var(--plum);
  padding:        0.78rem 1.9rem;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all var(--t-mid) var(--ease-smooth);
}
.vp-cta-plum:hover {
  background:   var(--lavender);
  border-color: var(--lavender);
  color:        var(--ink) !important;
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-plum);
}

.vp-btn-ghost {
  display:        inline-block;
  background:     transparent;
  color:          var(--linen) !important;
  border:         1px solid rgba(245,240,234,0.55);
  padding:        0.78rem 1.9rem;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all var(--t-mid) ease;
}
.vp-btn-ghost:hover {
  background:   rgba(245,240,234,0.12);
  border-color: var(--linen);
}

.vp-btn-outline {
  display:        inline-block;
  background:     transparent;
  color:          var(--terra) !important;
  border:         1px solid var(--terra);
  padding:        0.78rem 1.9rem;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all var(--t-mid) ease;
}
.vp-btn-outline:hover {
  background:   var(--terra);
  color:        var(--linen) !important;
  transform:    translateY(-2px);
}


/* ══════════════════════════════════════════════════════════
   SERVICE CARDS
   ══════════════════════════════════════════════════════════ */

.vp-card {
  background:  var(--linen);
  border:      1px solid rgba(201,169,110,0.2);
  padding:     2.5rem 2rem;
  text-align:  center;
  position:    relative;
  overflow:    hidden;
  transition:  transform var(--t-mid) var(--ease-smooth),
               box-shadow var(--t-mid) ease,
               border-color var(--t-mid) ease;
}
.vp-card::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, var(--terra), var(--sand), var(--terra));
  transform:  scaleX(0);
  transition: transform var(--t-mid) var(--ease-smooth);
}
.vp-card:hover {
  transform:    translateY(-8px);
  box-shadow:   var(--shadow-md);
  border-color: rgba(201,169,110,0.45);
}
.vp-card:hover::after { transform: scaleX(1); }

.vp-card.plum-card::after {
  background: linear-gradient(90deg, var(--plum), var(--plum-light), var(--plum));
}
.vp-card.plum-card:hover { border-color: rgba(61,43,94,0.35); }

.vp-card-icon {
  width:           58px;
  height:          58px;
  margin:          0 auto 1.4rem;
  border:          1px solid var(--sand);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       1.5rem;
  font-weight:     400;
  color:           var(--sand);
  font-style:      italic;
  transition:      all var(--t-mid) ease;
  background:      rgba(201,169,110,0.06);
}
.vp-card:hover .vp-card-icon {
  background: var(--terra);
  border-color: var(--terra);
  color:      var(--linen);
}
.vp-card.plum-card .vp-card-icon {
  border-color: var(--plum);
  color:        var(--plum);
  background:   rgba(61,43,94,0.06);
}
.vp-card.plum-card:hover .vp-card-icon {
  background:   var(--plum);
  border-color: var(--plum);
  color:        var(--linen);
}

.vp-card h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.vp-card p  { color: var(--ink-mid); font-size: 0.92rem; margin: 0; line-height: 1.7; }

.vp-card-tag {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      0.62rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding:        0.22rem 0.7rem;
  border-radius:  20px;
  margin-bottom:  1rem;
}
.vp-card-tag.vintage {
  background: rgba(139,74,53,0.1);
  color:      var(--terra);
}
.vp-card-tag.modern {
  background: rgba(61,43,94,0.1);
  color:      var(--plum);
}
.vp-card-tag.both {
  background: var(--linen-warm);
  color:      var(--graphite);
}


/* ══════════════════════════════════════════════════════════
   PORTFOLIO FRAMES
   ══════════════════════════════════════════════════════════ */

.vp-frame {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 4 / 5;
  cursor:       zoom-in;
}
.vp-frame::before {
  content:    '';
  position:   absolute;
  inset:      8px;
  border:     1px solid rgba(201,169,110,0.5);
  z-index:    2;
  pointer-events: none;
  transition: inset var(--t-mid) var(--ease-smooth), opacity var(--t-mid) ease;
  opacity:    0;
}
.vp-frame:hover::before { inset: 5px; opacity: 1; }

.vp-frame img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-smooth);
}
.vp-frame:hover img { transform: scale(1.07); }

.vp-frame-caption {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  background:  linear-gradient(transparent, rgba(26,23,20,0.88));
  color:       var(--linen);
  padding:     2.5rem 1.4rem 1.2rem;
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   1.05rem;
  transform:   translateY(4px);
  transition:  transform var(--t-mid) ease;
}
.vp-frame:hover .vp-frame-caption { transform: translateY(0); }

.vp-frame-tag {
  position:       absolute;
  top:            12px;
  right:          12px;
  font-family:    var(--font-body);
  font-size:      0.6rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:        0.28rem 0.65rem;
  border-radius:  20px;
  z-index:        3;
}
.vp-frame-tag.vintage {
  background: rgba(92,46,30,0.85);
  color:      var(--sand-soft);
}
.vp-frame-tag.modern,
.vp-frame-tag.plum {
  background: rgba(35,22,64,0.85);
  color:      var(--lavender);
}


/* ══════════════════════════════════════════════════════════
   QUOTE BLOCKS
   ══════════════════════════════════════════════════════════ */

.vp-quote {
  background: rgba(245,240,234,0.05);
  border:     1px solid rgba(201,169,110,0.2);
  padding:    2.5rem 2rem;
  position:   relative;
  transition: transform var(--t-mid) ease, box-shadow var(--t-mid) ease;
}
.vp-quote:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.3);
}
.vp-quote::before {
  content:     '\201C';
  position:    absolute;
  top:         -12px;
  left:        1.2rem;
  font-family: var(--font-display);
  font-size:   5rem;
  color:       var(--sand);
  line-height: 1;
}
.vp-quote p {
  font-family: var(--font-serif);
  font-style:  italic;
  font-size:   1.1rem;
  margin:      0 0 1rem;
  color:       var(--linen);
  line-height: 1.7;
}
.vp-quote-author {
  font-size:      0.76rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--sand-soft);
}
.vp-quote-stars { color: var(--sand); font-size: 0.88rem; margin-bottom: 0.75rem; }


/* ══════════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════════ */

.vp-stats {
  display:    flex;
  gap:        2.5rem;
  margin-top: 2rem;
  flex-wrap:  wrap;
}
.vp-stat strong {
  display:     block;
  font-family: var(--font-display);
  font-size:   2.8rem;
  color:       var(--terra);
  line-height: 1;
  font-weight: 400;
}
.vp-stat span {
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--ink-soft);
}


/* ══════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT
   ══════════════════════════════════════════════════════════ */

.vp-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           center;
}
.vp-two-col.reverse { direction: rtl; }
.vp-two-col.reverse > * { direction: ltr; }

@media (max-width: 860px) {
  .vp-two-col { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; }
  .vp-two-col.reverse { direction: ltr; }
}

.vp-two-col img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  border:      1px solid rgba(201,169,110,0.22);
}
.vp-two-col h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.vp-two-col p  { color: var(--ink-mid); margin-bottom: 1rem; }


/* ══════════════════════════════════════════════════════════
   CONTACT FORM
   ══════════════════════════════════════════════════════════ */

.vp-contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           start;
}
@media (max-width: 768px) {
  .vp-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.vp-form { display: grid; gap: 1.2rem; }
.vp-form label {
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--ink-soft);
  margin-bottom:  0.35rem;
  display:        block;
}
.vp-form input,
.vp-form textarea,
.vp-form select {
  width:         100%;
  padding:       0.9rem 1.1rem;
  background:    var(--linen);
  border:        1px solid rgba(201,169,110,0.3);
  font-family:   var(--font-body);
  font-size:     0.95rem;
  color:         var(--ink);
  border-radius: var(--radius-sm);
  transition:    border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  appearance:    none;
}
.vp-form input:focus,
.vp-form textarea:focus,
.vp-form select:focus {
  outline:      none;
  border-color: var(--terra);
  box-shadow:   0 0 0 3px rgba(139,74,53,0.1);
}
.vp-form textarea { min-height: 140px; resize: vertical; }
.vp-form button   { margin-top: 0.5rem; justify-self: start; border: 0; }

.vp-contact-info p      { margin: 0.5rem 0; color: var(--ink-mid); }
.vp-contact-info strong {
  font-family:  var(--font-display);
  font-size:    1.3rem;
  display:      block;
  margin-bottom: 1rem;
  font-weight:  400;
}


/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */

.vp-footer {
  background:  var(--ink);
  color:       rgba(245,240,234,0.62);
  padding:     4.5rem 0 2.5rem;
}
.vp-footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   3rem;
  margin-bottom:         3rem;
}
@media (max-width: 860px) {
  .vp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 540px) {
  .vp-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.vp-footer .vp-logo       { color: var(--linen); margin-bottom: 1rem; }
.vp-footer .vp-logo em    { color: var(--sand-soft); }
.vp-footer .vp-logo small { color: rgba(245,240,234,0.35); }
.vp-footer p              { font-size: 0.88rem; line-height: 1.75; }

.vp-footer-col h4 {
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--sand-soft);
  margin-bottom:  1rem;
}
.vp-footer-col ul { list-style: none; }
.vp-footer-col ul li { margin-bottom: 0.55rem; }
.vp-footer-col ul a {
  color:      rgba(245,240,234,0.62);
  font-size:  0.88rem;
  transition: color var(--t-fast) ease;
}
.vp-footer-col ul a:hover { color: var(--sand-soft); }

.vp-footer-bottom {
  padding-top:     2rem;
  border-top:      1px solid rgba(245,240,234,0.07);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             1rem;
  font-size:       0.78rem;
}
.vp-footer-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vp-footer-badge {
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          rgba(245,240,234,0.38);
  border:         1px solid rgba(245,240,234,0.1);
  padding:        0.22rem 0.65rem;
  border-radius:  20px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE NAV
   ══════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .vp-nav { padding: 1rem 1.5rem; }
}

@media (max-width: 768px) {

  /* Show the hamburger button */
  .vp-mobile-toggle { display: flex; }

  /* Full-width dropdown panel below the header */
  .vp-mobile-menu {
    display:         none;
    position:        absolute;
    top:             100%;
    left:            0;
    right:           0;
    background:      var(--linen);
    flex-direction:  column;
    align-items:     stretch;
    padding:         0 0 1.5rem;
    border-top:      2px solid var(--sand);
    box-shadow:      0 12px 40px -8px rgba(42,29,18,0.18);
    gap:             0;
    max-height:      85vh;
    overflow-y:      auto;
    z-index:         var(--z-dropdown);
  }
  .vp-mobile-menu.active { display: flex; }

  /* Header must be relative so the panel positions under it */
  .vp-header { position: sticky; }
  .vp-nav {
    position:        relative;
    flex-wrap:       nowrap;
    justify-content: space-between;
    align-items:     center;
  }

  /* Nav links list — full width stacked column */
  .vp-nav-links {
    flex-direction: column;
    width:          100%;
    gap:            0;
    padding:        0;
  }
  .vp-nav-links > li {
    width:          100%;
    border-bottom:  1px solid rgba(182,137,61,0.12);
  }
  .vp-nav-links > li:last-child { border-bottom: none; }

  /* Each top-level nav link row */
  .vp-nav-links > li > a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         1rem 1.5rem;
    font-size:       0.82rem;
    letter-spacing:  0.16em;
    color:           var(--ink);
  }
  .vp-nav-links > li > a::after { display: none !important; }
  .vp-nav-links > li > a:hover,
  .vp-nav-links > li > a[aria-current="page"] {
    background: var(--linen-warm);
    color:      var(--terra);
  }

  /* Chevron rotation when open */
  .nav-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .vp-nav-links > li.mobile-open > a .nav-chevron {
    transform: rotate(180deg);
  }

  /* ── PORTFOLIO ACCORDION DROPDOWN ────────────────────────
     Reset all desktop positioning — sits inline in the flow
     ──────────────────────────────────────────────────────── */
  .vp-nav-dropdown {
    /* Override all desktop styles */
    position:       static !important;
    opacity:        1 !important;
    visibility:     visible !important;
    transform:      none !important;
    pointer-events: auto !important;
    transition:     none !important;

    /* Accordion: hidden by default, shown when parent has .mobile-open */
    display:        none;
    width:          100%;
    min-width:      0;
    border-radius:  0;
    border:         none;
    border-top:     1px solid rgba(182,137,61,0.12);
    box-shadow:     none;
    background:     var(--linen-warm);
  }

  /* Show when parent li has .mobile-open */
  .vp-nav-links > li.mobile-open > .vp-nav-dropdown {
    display: block;
  }

  /* Section headers inside dropdown */
  .vp-dropdown-header {
    padding:        0.6rem 1.5rem;
    font-size:      0.6rem;
    letter-spacing: 0.28em;
  }

  /* Each dropdown link */
  .vp-dropdown-link {
    padding:    0.85rem 1.5rem 0.85rem 2rem;
    font-size:  0.82rem;
  }
  .vp-dropdown-link:hover {
    background: var(--linen);
  }

  /* "View All Work" link at bottom */
  .vp-dropdown-all {
    padding:    0.85rem 1.5rem;
    font-size:  0.72rem;
    border-top: 1px solid rgba(182,137,61,0.15);
    background: var(--linen);
  }

  /* CTA button at bottom of mobile menu */
  .vp-mobile-menu .vp-cta {
    margin:     1.25rem 1.5rem 0;
    width:      calc(100% - 3rem);
    text-align: center;
    display:    block;
  }
}