@charset "utf-8";

/*==================================================
HEADER
==================================================*/
.topbar{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px; margin-block-start: 22px;}
.brand{inline-size: 247px; block-size: 76px;}
.contact-pill{display: inline-flex; align-items: center; justify-content: center; min-block-size: 32px; padding-inline: 22px; border-radius: var(--radius); background: var(--orange); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; transition: background var(--transition), transform var(--transition);}
.contact-pill:hover{background: var(--orange-dark); color: var(--white); transform: translateY(-2px);}

/*==================================================
MENU MOBILE
==================================================*/
.menu-toggle{position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none;}
.menu-button{display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; inline-size: 42px; block-size: 42px; margin-inline-start: auto; border: 2px solid var(--orange); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color var(--transition);}
.menu-button span{inline-size: 18px; block-size: 2px; margin-inline: auto; border-radius: 999px; background: var(--orange); transition: transform var(--transition), opacity var(--transition);}
.menu-button:hover{border-color: var(--orange-dark);}
.menu-button:hover span{background: var(--orange-dark);}

.menu-toggle:checked + .menu-button span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.menu-toggle:checked + .menu-button span:nth-child(2){opacity: 0;}
.menu-toggle:checked + .menu-button span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}

/*==================================================
MENU
==================================================*/
.main-menu{display:none; order:4; inline-size:100%; margin-block:14px; padding:0; list-style:none;}
.main-menu li{inline-size:100%;}
.main-menu a{display:inline-flex; align-items:center; justify-content:center; position:relative; inline-size:100%; min-block-size:36px; color:var(--ink); font-size:12px; font-weight:700; text-transform:uppercase; white-space:nowrap; transition:color var(--transition), transform var(--transition);}
.main-menu a::after{content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:2px; border-radius:999px; background:var(--orange); transform:scaleX(0); transform-origin:left center; transition:transform .18s ease;}
.main-menu a:hover, .main-menu a.active{color:var(--orange); transform:translateY(-1px);}
.main-menu a:hover::after, .main-menu a.active::after{transform:scaleX(1);}
.main-menu a:focus-visible{color:var(--orange);}
.main-menu a:focus-visible::after{transform:scaleX(1);}
.menu-toggle:checked~.main-menu{display:grid; gap:2px;}

/*==================================================
768px
==================================================*/
@media only screen and (min-width:768px){
.contact-pill{min-block-size:42px;}
}

/*==================================================
1280px
==================================================*/
@media only screen and (min-width:1280px){
.menu-button{display:none;}
.main-menu{display:flex; order:initial; inline-size:auto; justify-content:center; gap:18px; margin:0 auto;}
.main-menu li{inline-size:auto;}
.main-menu a{inline-size:auto; min-block-size:46px;}
}