*,
   *::before,
   *::after {
       box-sizing: border-box
   }

   html,
   body {
       margin: 0;
       padding: 0
   }

   body {
       font-family: "Helvetica Neue", Helvetica, "Neue Haas Grotesk Text Pro", Arial, sans-serif;
       color: var(--ink);
       background: #fff;
       -webkit-font-smoothing: antialiased;
       min-width: 320px;
       overflow-x: hidden;
   }

   a {
       color: inherit;
       text-decoration: none
   }

   .header {
       display: flex;
       align-items: center;
       padding: 45px 60px;
       /* space around the logo like the screenshot */
       position: relative;
       background: #fff;
   }

   .logo {
       display: block;
       flex-shrink: 0;
   }

   .logo img {
       display: block;
       width: 113px;
       height: 113px;
       object-fit: cover;
   }

   .nav {
       display: flex;
       align-items: center;
       gap: 69px;
       /* spacing between links */
       list-style: none;
       margin-left: 118px;
       /* gap between logo and first link */
   }

   .nav a {
       font-size: 24px;
       letter-spacing: -0.02em;
       color: #1a1a1a;
       text-decoration: none;
       padding-bottom: 2px;
   }

   .nav a:hover,
   .nav a.active {
       text-decoration: underline;
       text-underline-offset: 3px;
   }

   /* hamburger hidden on desktop */
   .menu-toggle {
       display: none;
       margin-left: auto;
       width: 60px;
       height: 60px;
       background: none;
       border: 0;
       cursor: pointer;
       position: relative;
   }

   .menu-toggle span {
       position: absolute;
       left: 9px;
       right: 9px;
       height: 3px;
       background: #1a1a1a;
       border-radius: 2px;
       transition: transform .3s, opacity .2s, top .3s;
   }

   .menu-toggle span:nth-child(1) {
       top: 13px;
   }

   .menu-toggle span:nth-child(2) {
       top: 21px;
   }

   .menu-toggle span:nth-child(3) {
       top: 29px;
   }

   .menu-toggle.open span:nth-child(1) {
       top: 21px;
       transform: rotate(45deg);
   }

   .menu-toggle.open span:nth-child(2) {
       opacity: 0;
   }

   .menu-toggle.open span:nth-child(3) {
       top: 21px;
       transform: rotate(-45deg);
   }

   /* ---------- Medium screens: tighten spacing ---------- */
   @media (max-width: 1200px) {
       .header {
           padding: 30px 40px;
       }

       .nav {
           gap: 36px;
           margin-left: 60px;
       }

       .nav a {
           font-size: 20px;
       }

       .logo img {
           width: 90px;
           height: 90px;
       }
   }

   /* ---------- Mobile ---------- */
   @media (max-width: 860px) {
       .header {
           padding: 16px 20px;
       }

       .logo img {
           width: 64px;
           height: 64px;
       }

       .menu-toggle {
           display: block;
       }

       .nav {
           display: none;
           /* closed by default */
           flex-direction: column;
           align-items: stretch;
           gap: 0;
           margin: 0;
           position: absolute;
           top: 100%;
           left: 0;
           right: 0;
           background: #fff;

           z-index: 100;
           padding-top: 65px;
       }

       .nav.open {
           display: flex;
       }

       #menuToggle.open {
           position: fixed;
           right: 10px;
           top: 10px;
           z-index: 101;
       }

       .nav li {
           text-align: right;
       }

       .nav a {
           display: block;
           padding: 16px 20px;
           font-size: 22px;
       }
   }


   .logo {
       position: absolute;
       left: 45px;
       top: 33px;
       width: 100px;
       height: auto;
       display: block
   }

   .logo img {
       display: block;
       width: 100%;
       height: 100%
   }




   /* ---------- Footer (dark) ---------- */
   .footer {
       position: relative;
       padding: 50px 0;
       background: #1a1c1e;
       text-align: center;
       color: #fff;
       border-top: 1px solid #4B5563;
   }

   .footer .flogo {

       left: 50%;
       top: 34.2px;
       width: 108px;
       height: 108px;
       margin: 0 auto 25px;
       display: table;

   }

   .footer .tag {

       left: 0;
       right: 0;
       top: 112.8px;
       margin: 0;
       font-size: 22px;
       line-height: 26px;
       letter-spacing: -.008em;
       color: #fff
   }

   .footer .copy {

       left: 0;
       right: 0;
       margin: 15px 0 15px;
       padding-right: 6.4px;
       font-size: 20px;
       line-height: 24px;
       letter-spacing: -.02em;
       color: #d1d5db
   }

   .footer .c1 {
       top: 147.2px;
       font-size: 21.5px;
   }

   .footer .c2 {
       top: 171px
   }

   /* ---------- Tablet / mobile: stack everything ---------- */
   @media (max-width:860px) {

       .logo {
           position: static;
           margin: 28px 0 0 5vw
       }

       .nav {
           position: fixed;
           flex-wrap: wrap;
           gap: 14px 28px;
           margin: 0px;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
       }



       .footer {
           height: auto;
           padding: 36px 5vw 32px
       }

       .footer .flogo {
           position: static;
           margin: 0 auto 18px
       }

       .footer .tag,
       .footer .copy {
           position: static;
           margin: 0 0 6px
       }
   }