:root { --interaction-ice: #b8edf2; --interaction-deep: #103741; }
/* A single small composited pill follows the pointer between navigation items. */
.desktop-nav { position: relative; gap: clamp(2px, .6vw, 12px); isolation: isolate; }
.desktop-nav a { position: relative; z-index: 1; padding: 12px 13px; border-radius: 30px; transition: color .2s ease; white-space: nowrap; }
.desktop-nav a::after { display: none; }
.nav-highlight { position: absolute; z-index: 0; left: 0; top: 50%; width: 100px; height: 40px; border-radius: 24px; background: var(--interaction-ice); opacity: 0; transform-origin: 0 50%; pointer-events: none; transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .15s ease; }
.desktop-nav.is-highlighting .nav-highlight { opacity: 1; }
.site-header .desktop-nav a.is-nav-hovered { color: var(--interaction-deep); text-shadow: none; }
.desktop-nav a:focus-visible { outline: 2px solid var(--interaction-ice); outline-offset: 3px; }
.mobile-nav a { border-radius: 9px; transition: background .2s, color .2s; }
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: #e7faff; color: #123e49; }
body:not(.case-page) .mobile-menu { background: #bddce0; }
@media(min-width:921px) { .header-shell { grid-template-columns: 220px 1fr; gap: 24px; } .desktop-nav { justify-self: end; } }
@media(min-width:921px) and (max-width:1120px) { .desktop-nav a { padding-inline: 12px; font-size: 11px; } .header-shell { gap: 12px; } }

.brief-section { padding: 50px 0 110px; color: #e8f3f5; background: #071e28; scroll-margin-top: 112px; }
.brief-shell { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 80px; max-width: 1240px; border-top: 1px solid #b7d7de2e; padding-top: 85px; }
.brief-section .section-index { color: #9dbdc6; font-size: 11px; }
.brief-section h2 { font: 550 clamp(32px,3.6vw,50px)/1.13 Manrope,Arial,sans-serif; letter-spacing: -.045em; margin: 26px 0; }
.brief-section h2 em { color: #8fb5c0; }
.brief-description { max-width: 480px; color: #a9c3cb; font-size: 16px; line-height: 1.75; margin-bottom: 0; }
.brief-actions { display: flex; flex-direction: column; gap: 24px; }
.wave-button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 64px; padding: 0 3px 0 25px; border: 1px solid #c8f6fc; border-radius: 40px; background: #b8edf2; color: #103741; font: 650 13px/1.4 Manrope,Arial,sans-serif; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
.wave-arrow { display: grid; flex-shrink: 0; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #dff9ff; background: #123f4b; font: 400 26px/1 Manrope,Arial,sans-serif; transition: transform .3s ease, background .25s, color .25s; }
.wave-button:hover, .wave-button:focus-visible { background: #133e4b; color: #e5fbff; }
.wave-button:hover .wave-arrow, .wave-button:focus-visible .wave-arrow { color: #123f4b; background: #c5f4f8; transform: rotate(45deg); }
.wave-button:focus-visible { outline: 2px solid #e6faff; outline-offset: 5px; }
[data-wave-label] { display: inline-flex; white-space: pre; }
.wave-letter { display: inline-block; }
.wave-button { overflow: hidden; isolation: isolate; }
.wave-button > * { position: relative; z-index: 2; }
.wave-button::after { content: ''; position: absolute; z-index: 1; left: -55%; top: 0; width: 45%; height: 100%; opacity: 0; pointer-events: none; background: linear-gradient(110deg, transparent 15%, #e7ffff70 50%, transparent 85%); }
.wave-button.is-waving::after { animation: button-gleam .5s ease both; animation-delay: var(--wave-end, .9s); }
@keyframes button-gleam { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: .6; } 80% { opacity: .5; } 100% { transform: translateX(360%); opacity: 0; } }
.is-waving .wave-letter { animation: letter-wave .6s ease both; animation-delay: var(--letter-delay); }
@keyframes letter-wave { 0%,100% { opacity: 1; transform: translateY(0); } 30% { opacity: .5; transform: translateY(-4px); } 48% { opacity: 0; transform: translateY(-5px); } 49% { opacity: 0; transform: translateY(5px); } }
#project-brief-form { scroll-margin-top: 108px; }
.brief-form-title { color: #def2f6; font-size: 20px; font-weight: 550; letter-spacing: -.025em; margin: 0 0 26px; }
.brief-form-title:focus { outline: none; }
#contact .brief-question-hint { margin: 11px 0 0; font-size: 12px; line-height: 1.65; color: #a3c4ce; }
@media(max-width:1050px) { .brief-shell { gap: 40px; } .wave-button { font-size: 11px; padding-left: 19px; } }
@media(max-width:760px) {
 .brief-section { padding: 0 0 68px; }
 .brief-shell { grid-template-columns: 1fr; gap: 30px; padding-top: 60px; }
 .brief-section h2 { font-size: clamp(31px,8.5vw,42px); }
 .brief-description { font-size: 15px; }
 .brief-actions { gap: 18px; }
 .wave-button { min-height: 60px; padding-left: 18px; font-size: 12px; gap: 8px; }
 .wave-arrow { width: 50px; height: 50px; }
 .mobile-nav a { min-height: 58px; }
}
@media(max-width:360px) { .wave-button { font-size: 10px; padding-left: 15px; } .wave-arrow { width: 46px; height: 46px; } }
@media(prefers-reduced-motion:reduce) {
 .nav-highlight, .desktop-nav a, .wave-button, .wave-arrow, .mobile-nav a { transition: none; }
 .is-waving .wave-letter, .wave-button.is-waving::after { animation: none; }
}

/* Identical vector strokes across platforms, independent of emoji fonts. */
.ui-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.case-back { gap: 10px; }
.case-back .ui-icon { width: 18px; height: 18px; }
.wave-arrow .ui-icon { width: 24px; height: 24px; }
.portfolio-filter-contact > span { display: inline-flex; }

/* Local SVG marks and a single finite transition; no third-party widget. */
.social-dock { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 110; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; color: #e0f6fa; pointer-events: none; }
.social-dock-toggle { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid #dafbff; border-radius: 50%; background: #b8edf2; color: #123f4b; box-shadow: 0 5px 22px #00131d40; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s ease, color .2s ease; pointer-events: auto; }
.social-dock-toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; fill: none; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.social-dock-toggle:focus-visible { outline: 2px solid #e4fcff; outline-offset: 5px; }
.social-dock-toggle[aria-expanded="true"] { background: #123f4b; color: #d8f7fa; }
.social-dock-toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.social-dock-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; visibility: hidden; pointer-events: none; transition: visibility 0s .24s; }
.social-dock-list li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.social-dock-list li > span:first-child { padding: 7px 11px; border: 1px solid #b8edf229; border-radius: 8px; color: #dff4f7; background: #0a2530; font: 550 12px/1.4 Manrope, Arial, sans-serif; }
.social-dock-list li > .social-dock-action { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid #b8edf25c; border-radius: 8px; color: #e7f8fa; background: #0a2530; font: 600 12px/1.4 Manrope, Arial, sans-serif; text-decoration: none; }
.social-dock-action:hover { background: #123947; }
.social-dock-action:focus-visible { outline: 2px solid #b8edf2; outline-offset: 3px; }
.social-brand-action svg { width: 24px; height: 24px; fill: none; stroke: #d7f2f5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-brand { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #9ed5df70; border-radius: 50%; background: #0d303d; box-shadow: 0 3px 15px #00131d30; }
.social-brand img { display: block; object-fit: contain; }
.social-dock.is-open .social-dock-list { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.social-dock.is-near-form { visibility: hidden; }
.social-dock.is-open .social-dock-list li { opacity: 1; transform: translateY(0); }
.social-dock.is-open .social-dock-list li:nth-child(1) { transition-delay: .07s; }
.social-dock.is-open .social-dock-list li:nth-child(2) { transition-delay: .035s; }
.menu-open .social-dock { visibility: hidden; }
@media(hover:hover) { .social-dock-toggle:hover { background: #e0faff; color: #123f4b; } }
@media(max-width:700px) {
 .social-dock { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
 .social-dock-toggle, .social-brand { width: 50px; height: 50px; }
}
@media(prefers-reduced-motion:reduce) { .social-dock-toggle, .social-dock-toggle svg, .social-dock-list, .social-dock-list li { transition: none; } }

/* The contact plus keeps the studio's ice colour, with a soft breathing halo. */
.social-dock-toggle { position: relative; isolation: isolate; box-shadow: 0 5px 22px #00131d40, 0 0 20px #8de4ee42; }
.social-dock-toggle::before, .social-dock-toggle::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.social-dock-toggle::before { inset: -13px; background: radial-gradient(circle, #a4eaf350, #7bd9ed18 56%, transparent 73%); opacity: .6; animation: contact-halo-breathe 4s ease-in-out infinite; }
.social-dock-toggle::after { inset: -5px; border: 1px solid #b8edf238; opacity: .7; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.social-dock-toggle:hover::after, .social-dock-toggle:focus-visible::after { transform: scale(1.1); opacity: 1; }
.social-dock-toggle:hover::before, .social-dock-toggle:focus-visible::before { animation-play-state: paused; opacity: 1; }
.social-dock-toggle[aria-expanded="true"]::before { animation-play-state: paused; }
@keyframes contact-halo-breathe { 0%, 100% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1.12); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .social-dock-toggle::before { animation: none; } .social-dock-toggle::after { transition: none; } }

.portfolio-all-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 20px; padding-block: 8px; color: #c4edf2; font-size: 14px; font-weight: 600; }
.portfolio-all-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.portfolio-all-link:focus-visible { outline: 2px solid #b8edf2; outline-offset: 5px; }
.portfolio-all-link .ui-icon { width: 18px; height: 18px; }