main>nav{grid-template-areas:'navbar'}
main>nav .btn{grid-template-areas:'btn'}





main>nav{
height:fit-content;
z-index:999;
left:50%;
transform:translateX(-50%);
height:38px;
width:min(100dvw,1024px);
position:fixed
}


nav .has-logo,
nav .will-open,
nav .will-close,
nav .has-svg,
nav .chat-open
{display:grid;
grid-area:navbar;
height:38px;
aspect-ratio:1/1;
position:absolute
}




nav .has-logo,nav .has-svg{
width:114px;
aspect-ratio:unset
}

nav .has-logo,nav .has-svg{
width:114px;
aspect-ratio:unset;
left: 50%;
transform: translateX(-50%);
}


nav .has-svg::before{
background-image:url(https://mycke.se/site-2026/media/logo/myckestudio.svg);
background-size:auto 30px!important
}

nav>.will-open{
z-index:1
}



nav .will-open, 
nav .will-close
{justify-self: start;}

nav .unit-link
{inset: 0 30% 0 30%;
background: transparent;
max-height: 38px;
opacity: .8;}

nav .will-close{
display:none;
z-index:-1
}

main:has(.will-open :checked) nav{
height:100dvh
}

main:has(.will-open :checked) .nav-canvas{
inset:0 0 0 0
}

nav>.btn{
display:grid;
position:relative;
isolation:isolate
}

nav>.btn>div{
grid-area:btn;
display:grid;
position:relative
}

nav>.btn>div:nth-of-type(1){
z-index:99
}

nav>.has-logo>.btn{
width:38px;
height:38px;
overflow:hidden
}

nav>.has-logo>.btn span{
padding-block-start:6px
}

.nav-opener-icon::before,.nav-opener-icon::after{
position:absolute;
content:'';
inset:0 0 0 0
}

.nav-opener-icon::before{
inset:0 15px 60% 4px;
border-bottom:1px solid #000
}

.nav-opener-icon::after{
inset:0 15px 40% 4px;
border-bottom:1px solid #000
}

nav:has(.will-open :checked) .will-open{
display:none
}

nav:has(.will-open :checked) .will-close{
display:grid
}

nav:has(.will-open :checked) .will-close::before{
background-image:url(https://mycke.se/site-2026/svg/exit_black.svg);
opacity:.67;
background-size:22px auto
}

nav .btn>div:nth-of-type(1){
z-index:99
}

nav .btn{
display:grid;
position:relative;
isolation:isolate
}

nav .btn>div{
grid-area:btn;
display:grid;
position:relative
}

nav .has-banner::before,nav .has-banner::after{
content:"";
position:absolute;
inset:0;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
z-index:-10
}

nav .unit-link{
position:absolute;
z-index:9999;
border:0;
outline:0;
cursor:pointer
}

main>nav input,
main>nav input[type=checkbox],
main>nav input[type="radio" i],
main>nav input[type="radio" i],

.exit-ui>input,
.exit-ui>input[type=checkbox],
.exit-ui>input[type="radio" i],
.exit-ui>input[type="radio" i]


{display:block;
inline-size:100%;
block-size:100%;
width:100%;
height:100%;
appearance:unset;
overflow:hidden;
border:0;
outline:0;
isolation:isolate;
padding-inline:0;
padding-block:0;
margin-inline:0;
margin-block:0;
position:absolute;
inset:0;
background-color:transparent;
background:transparent;
cursor:pointer;
z-index:999!important;
-webkit-appearance:none;
border-radius:0!important
}


main>nav{
--filter-glass-effect:saturate(180%) blur(20px);
--nav-canvas-rgba:rgba(245,245,247,.8)
}

main>nav,main>.nav-canvas{
display:grid
}

main:has(.nav-canvas){
position:relative
}

main>.nav-canvas{
position:fixed!important;
inset:0 0 calc(100% - 38px) 0;
z-index:998
}

main>.nav-canvas{
overflow:hidden;
user-select:none;
isolation:isolate;
transition:all 1s
}

main>.nav-canvas::before,main>.nav-canvas::after{
position:absolute;
content:'';
inset:0
}

main>.nav-canvas::before{
z-index:1
}

main>.nav-canvas::after{
z-index:-1
}

main>.nav-canvas::after{
border-bottom:1px solid rgba(210,210,222,.8)
}

main>.nav-canvas::after{
background:var(--nav-canvas-rgba);
backdrop-filter:var(--filter-glass-effect)
}


main>nav>ul{
display:grid;
grid-area:navbar;
list-style:none;
margin:0;
padding:0;
width:fit-content;
align-self:start;
justify-self:center;
margin-inline:0;
margin-block-start:110px;
padding-inline:0;
row-gap:12px;
--arw:300px;
width:var(--arw);
display:none
}

main:has(.will-open :checked) nav>ul{
display:grid
}

main>nav>ul>li{
display:grid;
list-style:none;
margin-block:0;
padding-block:0;
height:fit-content;
min-height:22px;
align-self:start;
width:fit-content;
grid-template-rows:0;
overflow-y:hidden;
justify-self: center;
}

main>nav>ul>li>a,main>nav>ul>li>a:-webkit-any-link{
font-size:calc(var(--arw) * .08);
font-weight:600;
text-align: center;
}



nav .chat-open
{left: auto;
right: 12px;}

nav .chat-open .btn
{z-index: 99;}


nav .chat-open::before
{background-image: url(../svg/menu/chat-open.svg);
background-size: 24px auto !important;
z-index: 1 !important;}

nav .chat-open::after
{background: transparent;
z-index: -1 !important;}

.ui-contact
{display: grid;
position: fixed;
inset: 100%;
z-index: -25;
grid-template-rows: 0;
max-height: 100dvh;
overflow: hidden;
visibility: hidden;}

.ui-contact::after
{background: var(--nav-canvas-rgba);
backdrop-filter: var(--filter-glass-effect);}

main:has(.chat-open :checked) .ui-contact
{inset: 0;
z-index: 20000;
grid-template-rows: 100%;
transition: 500ms all;
visibility: visible;
} 

main .ui-contact>.flx
{display: flex;
flex-direction: column;
justify-content: center;
padding-block: 60px;
position: relative;
width: min(100dvw, 1024px);
margin-inline: auto;}

main .ui-contact>.flx>.exit-ui
{position: absolute;
inset: 0 0 calc(100% - 38px) calc(100% - 60px);
z-index: 999;
background: rgba(255, 0, 0, .48);}

main .ui-contact>.flx>.exit-ui::before
{background-image: url(../svg/menu/chat-close.svg);
background-size: 24px auto;}

main .ui-contact .grd
{margin-inline: auto;
width: min(92dvw, 550px);
min-height: 78dvh;
grid-template-rows: repeat(3, auto);
display: grid;
}



/* REMOVE */







/* =========================
   UI1 – Kontaktformulär
   ========================= */

.ui1-contact {
  display: grid;
  justify-content: center;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ui1-form {
  background: #ffffff;
  border-radius: 23px;
  padding:30px 40px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 2px 3px rgba(0,0,0,0.08);
  display: grid;
  row-gap: 22px;
}

/* Titel */
.ui1-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111;
  text-align: center;
}

/* Fält */
.ui1-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label */
.ui1-label {
  font-size: 12px;
  font-weight: 500;
  color: #6e6e73;
  letter-spacing: -0.01em;
}

/* Input / Select / Textarea */
.ui1-field input,
.ui1-field select,
.ui1-field textarea {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #d2d2d7;
  background: #fff;
  color: #111;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ui1-field textarea {
  resize: vertical;
  min-height: 110px;
}

/* Fokus */
.ui1-field input:focus,
.ui1-field select:focus,
.ui1-field textarea:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}

/* Select caret */
.ui1-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Knapp */
.ui1-button {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  background: #0071e3;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
}

.ui1-button:hover {
  background: #0077ed;
}

.ui1-button:active {
  transform: translateY(1px);
}

/* Status */
.ui1-status {
  margin: 0;
  font-size: 12px;
  color: #6e6e73;
  text-align: center;
}