/* ============================================================
   B2 CREATE — shared UX layer: edition switch, phone layer, pitch
   Brand palette: deep #051414 · mist #c8dbdc · blush #FFE9E0 · paper #f3efe7
   ============================================================ */
:root { --ux-deep: #051414; --ux-mist: #c8dbdc; --ux-blush: #FFE9E0; --ux-paper: #f3efe7; --ux-stone: #d8d3d1; --ux-label: "Montserrat", "Poppins", sans-serif; --ux-head: "Poppins", system-ui, sans-serif; --ux-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ux-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- edition switch (header) ---------- */
.ed-switch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; border: 1.5px solid rgba(5,20,20,0.18); font-family: var(--ux-label); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--ux-deep); background: rgba(243,239,231,0.7); transition: transform 0.4s var(--ux-spring), background 0.3s; }
.ed-switch:hover { transform: translateY(-2px); background: #fff; }
.ed-switch .ed-dot { width: 26px; height: 14px; border-radius: 999px; background: var(--ux-stone); position: relative; flex: none; }
.ed-switch .ed-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ux-deep); transition: left 0.3s var(--ux-spring); }
.ed-switch .ed-dot.on::after { left: 14px; background: #d98f78; }
.ed-switch .ed-a, .ed-switch .ed-b { opacity: 0.45; } .ed-switch .ed-dot.on ~ .ed-a, .ed-switch .ed-dot:not(.on) ~ .ed-b { opacity: 1; }
.nav.on-dark .ed-switch, body.theme-dark .ed-switch { color: var(--ux-paper); border-color: rgba(243,239,231,0.3); background: rgba(243,239,231,0.08); } .nav.on-dark .ed-switch .ed-dot::after, body.theme-dark .ed-switch .ed-dot::after { background: var(--ux-paper); }
.ed-link { color: inherit; } .ed-link:hover { color: var(--ux-deep); }
@media (max-width: 900px) { .ed-switch { height: 36px; padding: 0 8px 0 6px; gap: 5px; font-size: 8px; letter-spacing: 0.12em; } .ed-switch .ed-dot { width: 18px; height: 10px; } .ed-switch .ed-dot::after { width: 8px; height: 8px; } .ed-switch .ed-dot.on::after { left: 8px; } .lang-switch { width: 36px !important; height: 36px !important; font-size: 13px !important; } .ed-switch .ed-dot.on ~ .ed-a, .ed-switch .ed-dot:not(.on) ~ .ed-b { display: none; } .ed-switch .ed-a, .ed-switch .ed-b { opacity: 1; } .nav .brand { font-size: 18px; letter-spacing: 0; white-space: nowrap; } .nav > div:first-child { min-width: 0; overflow: hidden; } }

/* ---------- mobile menu card ---------- */
.mobile-menu.is-open { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding-top: 96px; overflow-y: auto; }
.mobile-menu.is-open > a { font-size: clamp(34px, 9vw, 54px); padding: 2px 0; }
.mm-card { margin-top: auto; background: var(--ux-deep); color: var(--ux-paper); border-radius: 22px; padding: 22px 20px 18px; margin-bottom: 20px; }
.mm-kicker { font-family: var(--ux-label); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ux-mist); margin: 0 0 8px; }
.mm-title { font-family: var(--ux-head); font-size: 22px; font-weight: 600; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.01em; }
.mm-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.mm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(243,239,231,0.35); color: var(--ux-paper); font-family: var(--ux-head); font-weight: 600; font-size: 14px; text-decoration: none; transition: transform 0.4s var(--ux-spring); }
.mm-btn:active { transform: scale(0.97); } .mm-btn.primary { background: var(--ux-blush); color: var(--ux-deep); border-color: var(--ux-blush); }
.mm-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--ux-mist); flex-wrap: wrap; } .mm-meta a { color: inherit; text-decoration: none; }
.mm-edition { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(243,239,231,0.18); font-family: var(--ux-label); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ux-stone); text-decoration: none; }

/* ---------- sticky phone action bar ---------- */
.m-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 75; display: none; grid-template-columns: 1fr 1fr 1.7fr; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(5,20,20,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px rgba(5,20,20,0.6); transform: translateY(140%); transition: transform 0.6s var(--ux-spring); }
.m-bar.is-on { transform: none; }
.m-act { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; color: var(--ux-paper); font-family: var(--ux-head); font-weight: 600; font-size: 13px; text-decoration: none; }
.m-act svg { width: 18px; height: 18px; fill: currentColor; } .m-act:active { transform: scale(0.97); }
.m-act.primary { background: var(--ux-blush); color: var(--ux-deep); } .m-act.primary i { font-style: normal; transition: transform 0.3s; } .m-act.primary:hover i { transform: translateX(3px); }
.m-bar.is-pulse .m-act.primary { animation: ux-pulse 2.4s ease-in-out 3; }
@keyframes ux-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,233,224,0.6); } 50% { box-shadow: 0 0 0 10px rgba(255,233,224,0); } }
@media (max-width: 900px) { .m-bar { display: grid; } body.has-mbar .popups { bottom: 84px; } body.has-mbar footer { padding-bottom: 96px; } }

/* ---------- pitch sheet ---------- */
.m-pitch { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; background: rgba(5,20,20,0); visibility: hidden; transition: background 0.5s, visibility 0.5s; }
.m-pitch.is-on { visibility: visible; background: rgba(5,20,20,0.45); }
.mp-sheet { position: relative; background: var(--ux-paper); border-radius: 26px 26px 0 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px -30px rgba(5,20,20,0.5); transform: translateY(100%); transition: transform 0.6s var(--ux-spring); max-height: 92vh; overflow-y: auto; }
.m-pitch.is-on .mp-sheet { transform: none; }
.mp-grab { width: 44px; height: 4px; border-radius: 4px; background: rgba(5,20,20,0.2); margin: 0 auto 16px; }
.mp-x { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(5,20,20,0.06); color: var(--ux-deep); font-size: 22px; line-height: 1; cursor: pointer; }
.mp-kicker { font-family: var(--ux-label); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: #a8744f; margin: 0 0 8px; }
.mp-title { font-family: var(--ux-head); font-size: clamp(21px, 6vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ux-deep); margin: 0 36px 10px 0; }
.mp-text { font-family: var(--ux-head); font-size: 14.5px; color: #3d4747; margin: 0 0 16px; line-height: 1.5; }
.mp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; }
.mp-stats div { background: #fff; border: 1.5px solid rgba(5,20,20,0.1); border-radius: 14px; padding: 10px 4px; text-align: center; min-width: 0; }
.mp-stats b { display: block; font-family: var(--ux-head); font-size: 19px; font-weight: 700; color: var(--ux-deep); letter-spacing: -0.02em; } .mp-stats span { font-family: var(--ux-label); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #7b8585; }
.mp-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin: 0 0 6px; }
.mp-actions .mm-btn { color: var(--ux-deep); border-color: rgba(5,20,20,0.25); font-size: 13.5px; padding: 0 10px; } .mp-actions .mm-btn.primary { background: var(--ux-deep); color: var(--ux-paper); border-color: var(--ux-deep); }
.mp-later { display: block; width: 100%; background: none; border: 0; font-family: var(--ux-label); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #7b8585; padding: 12px; cursor: pointer; }
@media (min-width: 901px) {
  .m-pitch { justify-content: center; align-items: center; padding: 20px; }
  .mp-sheet { width: min(560px, 92vw); border-radius: 28px; padding: 28px 28px 20px; transform: scale(0.9); opacity: 0; transition: transform 0.6s var(--ux-spring), opacity 0.4s; }
  .m-pitch.is-on .mp-sheet { transform: none; opacity: 1; }
  .mp-grab { display: none; } .mp-x { right: 18px; top: 18px; }
}
/* menu card: never inherit the big menu link type */
.mobile-menu .mm-card a, .mobile-menu .mm-card .mm-btn { font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; line-height: 1.2; }
.mobile-menu .mm-card .mm-meta a { font-size: 13px !important; font-weight: 400 !important; }
.mobile-menu .mm-card .mm-edition { font-size: 10px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; font-weight: 600 !important; }

/* ---------- phone-scale polish for both editions ---------- */
@media (max-width: 900px) {
  .nav .nav-right { gap: 8px; }
  .btn, .nav-cta, .filter, .env-btn { min-height: 46px; }
  .hero-actions, .cover-copy > div[style*="display:flex"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .hero-actions .btn, .cover-copy .btn { justify-content: center; }
  .work-card[hidden] { display: none !important; }
  .cards-3, .grid-3 { gap: 12px; }
  .card, .grid-3 > * { min-height: 0; padding: 22px 20px 22px; }
  .cover-lines { display: none; }
  .scroller .work-card { flex-basis: 82vw; }
  .m-bar .m-act span { font-size: 12px; }
  .cta .h-xl, .headline { word-break: keep-all; }
  .contact-grid { gap: 18px; }
  .form input, .form textarea { font-size: 16px; }
}
@media (max-width: 600px) {
  .h-xl, .display-xl { font-size: clamp(38px, 12vw, 64px) !important; }
  .headline { font-size: clamp(44px, 15vw, 80px) !important; }
  .mp-stats { gap: 5px; } .mp-stats b { font-size: 18px; }
}

.ed-switch, .nav-cta, .nav-links a { white-space: nowrap; } /* header labels never wrap */

/* Work page on phones: every project visible in a vertical grid (no sideways carousel) */
@media (max-width: 900px) { .work-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; overflow: visible; } }
@media (max-width: 600px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }

/* footer links wrap on narrow screens instead of widening the page */
footer nav { flex-wrap: wrap; row-gap: 10px; min-width: 0; } footer > * { min-width: 0; }

/* ---------- contact: message ready to send (js/contact-forms.js) ---------- */
.send-card { margin-top: 18px; padding: 20px; border-radius: 20px; background: var(--card, #fff); border: 1px solid rgba(5,20,20,0.12); color: var(--ink, #051414); }
.send-card .sc-k { margin: 0 0 6px; font-family: var(--ux-label); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; opacity: 0.7; }
.send-card .sc-t { margin: 0 0 12px; font-size: 15px; }
.send-card .sc-msg { margin: 0 0 14px; padding: 12px 14px; max-height: 180px; overflow: auto; border-radius: 12px; background: rgba(5,20,20,0.05); font: 13px/1.5 var(--ux-head); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.send-card .sc-a { display: flex; flex-wrap: wrap; gap: 8px; }
.send-card .sc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 600 13.5px var(--ux-head); text-decoration: none; cursor: pointer; }
.send-card .sc-btn.primary { background: var(--ux-deep); border-color: var(--ux-deep); color: var(--ux-paper); }
.send-card .sc-btn.ghost { border-color: transparent; opacity: 0.7; }
/* ---------- reach card (artifact viewer) ---------- */
.m-pitch.reach { z-index: 90; }
.reach .rc-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.reach .rc-v { flex: 1 1 160px; min-width: 0; font: 600 15px var(--ux-head); color: var(--ux-deep); user-select: all; overflow-wrap: anywhere; }
.reach .rc-row .mm-btn { color: var(--ux-deep); border-color: rgba(5,20,20,0.25); min-height: 44px; }
.reach .mp-actions { margin-top: 6px; }