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

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

   :root {
       /* left page margin: ~125px at 1280 wide, ~79px at 1092 wide */
       --m: clamp(40px, calc(24.5vw - 189px), 330px);
       --m2: clamp(40px, calc(24.5vw - 189px), 80px);
       --ink: #1a1c1e;
   }

   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;
       }
   }

   .page {
       position: relative;
       width: 100%
   }

   /* ---------- Hero ---------- */
   .hero {
       position: relative;
       min-height: 1068px;
       background: #fff;
   }

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

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



   h1 {
       position: absolute;
       left: calc(var(--m2) + 3px);
       top: 230px;
       margin: 0;
       width: 520px;
       font-size: 114px;
       line-height: 115px;
       font-weight: 700;
       letter-spacing: -.048em;
       word-spacing: -.04em;
       color: var(--ink);
       -webkit-text-stroke: 1.2px var(--ink);
   }

   .intro {
       position: static;
       margin-left: calc(var(--m2) + 22px);
       margin-top: 486px;
       width: min(930px, calc(100vw - 2 * var(--m2) - 330px));
       padding-bottom: 90px;
   }

   .intro p {
       margin: 0 0 25px;
       font-size: 24px;
       line-height: 33px;
       letter-spacing: .005em;
       color: var(--ink);
   }

   .hero-img {
       position: absolute;
       bottom: 0;
       right: 0;
       width: clamp(280px, 29.5vw, 677px);
       height: auto;
       display: block;
   }

   /* ---------- Why choose us ---------- */
   .why {
       position: relative;
       min-height: 600px;
       padding: 70px 0 80px;
       background: #f4f5f7;
   }

   .why h2 {
       position: static;
       margin: 0px 0 0px;
       margin-left: calc(var(--m2) + 2px);
       top: 80px;
       font-size: 80px;
       line-height: 60px;
       font-weight: 700;
       letter-spacing: .02em;
       color: var(--ink);
       -webkit-text-stroke: 1px var(--ink);
   }

   .why ul {
       list-style: none;
       margin: 0 0 80px;
       padding: 58px 0 0px 80px;
   }

   .why li {
       position: static;
       margin-left: calc(var(--m2) + 3px);
       font-size: 35px;
       line-height: normal;
       letter-spacing: .006em;
       color: var(--ink);
       margin-top: 40px;
   }

   .why li:nth-child(1) {
       top: 135.8px
   }

   .why li:nth-child(2) {
       top: 196.8px
   }

   .why li:nth-child(3) {
       top: 257.3px
   }

   .why .note {
       position: absolute;
       left: calc(var(--m) + 165.8px);
       bottom: 27px;
       margin: 0 0;
       font-size: 30px;
       line-height: 18px;
       font-weight: 500;
       letter-spacing: -.01em;
       color: #000;
   }

   /* ---------- Footer (dark) ---------- */
   .footer {
       position: relative;

       background: #1a1c1e;
       text-align: center;
       color: #fff
   }









   /* ---------- Tablet / mobile: stack everything ---------- */
   @media (max-width:860px) {
       .hero {
           height: auto;
           padding: 0 0 56px
       }

       .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;
       }

       h1 {
           position: static;
           width: auto;
           margin: 48px 5vw 0;
           font-size: clamp(44px, 9vw, 77px);
           line-height: .9
       }

       .intro {
           position: static;
           width: auto;
           margin: 36px 5vw 0;
           max-width: 620px
       }

       .hero-img {
           position: static;
           width: min(377px, 70%);
           margin: 16px 0 0 auto
       }

       .why {
           height: auto;
           min-height: auto;
           padding: 48px 5vw 40px
       }

       .why h2 {
           position: static;
           font-size: clamp(34px, 7vw, 54px);
           line-height: 1.1
       }

       .why ul {
           margin-top: 28px;
           padding: 0 0 0 4vw;
       }

       .why li {
           position: static;
           margin: 0 0 24px;
           padding-left: 4vw;
           font-size: 18px
       }

       .why .note {
           position: static;
           margin-top: 8px;
           font-size: 14px
       }

       .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
       }
   }