.header { position:fixed; z-index:100; top:0; left:0; right:0; height:120px; display:flex; align-items:center; justify-content:space-between; padding:47px 3.125% 33px; }
      .brand { display:block; width:203px; height:40px; object-fit:contain; }
      .actions { display:flex; align-items:center; gap:12px; }
      .round, .menu-toggle { height:34px; border-radius:var(--radius-full); transition:transform .2s ease, background .2s ease, color .2s ease; }
      .language { width:34px; border:0; background:#fff; padding:5px; }
      .language img { display:block; width:24px; height:24px; }
      /* Keep the circular control stable; the globe alone adopts the token grey on hover. */
      body .header .language:is(:hover, :focus-visible) img { content:url("assets/figma/icon-language-hover.svg"); }
      .language-control { position:relative; flex:none; }
      /* Invisible bridge preserves the open state while moving from the icon to the panel. */
      .language-control::after { content:""; position:absolute; z-index:1; top:100%; right:0; width:200px; height:23px; }
      .language-popover { position:absolute; z-index:2; top:57px; right:0; width:200px; display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid rgba(0,0,0,.15); border-radius:18px; background:#fff; box-shadow:none; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
      .language-control:is(:hover, :focus-within), .language-control.is-open { z-index:101; }
      .language-control:is(:hover, :focus-within) .language-popover, .language-control.is-open .language-popover { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
      .language-option { width:100%; padding:10px 0; border:0; background:transparent; color:#c4c7ca; font:400 24px/1 Poppins, Arial, sans-serif; text-align:left; white-space:nowrap; transition:color .2s ease; }
      .language-option.is-active { color:#000; }
      .language-option:hover, .language-option:focus-visible { color:#000; outline:0; }
      /* Keep the header actions aligned across language changes. These widths match their English labels. */
      .contact { width:150px; border:0; padding:3.5px 20px; display:flex; align-items:center; justify-content:center; flex:none; background:#fff; color:#000; font-size:18px; }
      .menu-toggle { width:114px; display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid #fff; padding:2.5px 14px; flex:none; background:transparent; color:#fff; font-size:18px; }
      .letter-swap { display:inline-flex; align-items:center; line-height:1; perspective:600px; }
      .letter-swap-character { position:relative; display:inline-block; transform-style:preserve-3d; will-change:transform; }
      .letter-swap-face { display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
      .letter-swap-front { transform:translateZ(.48em); }
      .letter-swap-back { position:absolute; inset:0; transform:rotateX(-90deg) translateZ(.48em); }
      .menu-icon { position:relative; display:block; width:24px; height:24px; flex:none; }
      .menu-icon-line { position:absolute; left:3px; width:18px; height:1.8px; border-radius:999px; background:currentColor; will-change:transform,opacity; }
      .menu-icon-line-top { top:4.6px; }
      .menu-icon-line-middle { top:11.1px; }
      .menu-icon-line-bottom { top:17.6px; }
      .drawer { position:fixed; z-index:8; top:20px; right:22px; bottom:20px; width:min(490px, calc(100vw - 44px)); padding:224px 40px 40px; display:flex; flex-direction:column; border-radius:20px; background:#fff; color:#000; transform:translateX(calc(100% + 44px)); transition:transform .55s cubic-bezier(.22,.8,.2,1); }
      /* Both directions use the established drawer cadence. */
      .drawer.is-open { transform:translateX(0); transition-timing-function:cubic-bezier(.22,.8,.2,1); }
      .drawer.is-closing { transform:translateX(calc(100% + 44px)); transition-timing-function:cubic-bezier(.22,.8,.2,1); }
      .drawer-links { display:flex; flex-direction:column; gap:10px; }
      .drawer-link { display:flex; align-items:center; justify-content:space-between; color:#c4c7ca; font-size:32px; line-height:1; text-decoration:none; transition:color .2s ease; }
      .drawer-link:hover, .drawer-link:focus-visible { color:#000; }
      .drawer-link img { width:24px; height:24px; }
      .drawer-contact { margin-top:auto; } .drawer-contact-label { margin:0 0 20px; color:#c4c7ca; font-size:16px; }
      .drawer-contact p { margin:0 0 10px; font-size:18px; line-height:1; } .drawer-contact span { color:#c4c7ca; }
      .drawer-language { display:none; }
      .header.is-drawer-open { z-index:100; }
      .header.is-drawer-open .language, .header.is-drawer-open .contact { background:#000; color:#fff; }
      .header.is-drawer-open .language img { content:url("assets/figma/icon-language-black.svg"); }
      .header.is-drawer-open .menu-toggle { color:#000; border-color:#000; }
      .header.is-drawer-open .menu-toggle img { content:url("assets/figma/icon-close.svg"); }
@media(max-width:800px){
        .header { height:84px; padding:26px 20px 18px; } .brand { width:132px; height:26px; } .actions { gap:7px; }
        .language { width:32px; height:32px; } .contact { display:none; } .menu-toggle { width:86px; height:32px; padding:2px 10px; font-size:13px; } .menu-icon { width:20px; height:20px; transform:scale(.833333); transform-origin:center; } .menu-icon-line { left:2px; width:18px; height:1.5px; } .menu-icon-line-top { top:4px; } .menu-icon-line-middle { top:10.25px; } .menu-icon-line-bottom { top:16.5px; }
        .language-control::after { width:200px; height:16px; } .language-popover { top:48px; width:200px; gap:6px; padding:16px; border-radius:16px; } .language-option { padding:8px 0; font-size:24px; }
        .drawer { top:10px; right:10px; bottom:10px; width:min(280px, calc(100vw - 164px)); padding:130px 10px 25px; border-radius:16px; } .drawer-link { font-size:18px; }
        .drawer-contact p { font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
}

@media(min-width:801px){:root{--menu-unit:min(1px,.0520833333vw)}
        .brand { width:calc(203.077 * var(--menu-unit)); height:calc(40 * var(--menu-unit)); }
        .drawer { width:calc(490 * var(--menu-unit)); top:calc(20 * var(--menu-unit)); right:calc(22 * var(--menu-unit)); bottom:calc(20 * var(--menu-unit)); padding:calc(224 * var(--menu-unit)) calc(40 * var(--menu-unit)) calc(40 * var(--menu-unit)); border-radius:calc(20 * var(--menu-unit)); }
        .drawer-links { gap:calc(10 * var(--menu-unit)); }
        .drawer-link { font-size:calc(32 * var(--menu-unit)); line-height:1.5; }
        .drawer-link img { width:calc(24 * var(--menu-unit)); height:calc(24 * var(--menu-unit)); }
        .drawer-contact p { font-size:calc(18 * var(--menu-unit)); line-height:1.5; margin-bottom:calc(10 * var(--menu-unit)); }
        .drawer-contact .drawer-contact-label { font-size:calc(16 * var(--menu-unit)); margin-bottom:calc(20 * var(--menu-unit)); }
        .header .actions { transform:scale(min(1, calc(100vw / 1920px))); transform-origin:right center; }
}

body.is-portfolio-list .brand{content:url("assets/figma/jett-logo-black.svg")}
body.is-portfolio-list .language,body.is-portfolio-list .contact{background:#000;color:#fff}
body.is-portfolio-list .language img{content:url("assets/figma/icon-language-black.svg")}
body.is-portfolio-list .menu-toggle{border-color:#000;color:#000}
body.is-portfolio-list .header:not(.is-drawer-open) .menu-toggle img{content:url("assets/figma/icon-menu-black.svg")}
.drawer[aria-hidden="true"]{visibility:hidden;pointer-events:none}.drawer.is-open,.drawer.is-closing{visibility:visible}.drawer.is-open{pointer-events:auto}.drawer.is-closing{pointer-events:none}
.drawer .interactive-row .row-arrow{opacity:0;transform:translateX(-20px);transition:opacity .32s,transform .32s}
.drawer .interactive-row:hover .row-arrow,.drawer .interactive-row:focus-visible .row-arrow{opacity:1;transform:translateX(0)}
.drawer-link.is-active{color:#000}
.drawer-link.is-active .row-arrow{opacity:1;transform:translateX(0);width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}.letter-swap-character{transform:none!important}}

/* Header_H5: the browser chrome shown in the Figma presentation is intentionally
   not part of the site. These are the actual 375px viewport measurements. */
@media (max-width:600px){
  .header{height:62px;padding:24px 16px 16px}
  .brand{width:111.692px;height:22px}
  .actions{gap:10px}
  .language-control{display:none}
  .contact{display:flex;width:auto;height:22px;padding:2px 12px;font-size:12px;line-height:1}
  .menu-toggle{width:22px;height:22px;padding:0;border:0;border-radius:0;background:transparent}
  .menu-toggle [data-letter-swap]{display:none}
  .menu-icon{width:22px;height:22px;transform:none}
  /* Home_Menu_H5: the mobile menu uses the full viewport as its surface. */
  .drawer{top:0;right:0;bottom:0;width:100vw;min-height:100svh;padding:82px 16px 24px;border-radius:0;transform:translateX(100%);transition-duration:.55s}
  .drawer.is-open,.drawer.is-closing{transform:translateX(0)}
  .drawer.is-closing{transform:translateX(100%)}
  .drawer-links{gap:16px}
  .drawer-link{font-size:20px;line-height:1.2}
  .drawer-link .row-arrow{width:18px;height:18px}
  .drawer-link:hover,.drawer-link:focus-visible{color:#c4c7ca}
  .drawer-link:hover .row-arrow,.drawer-link:focus-visible .row-arrow{opacity:0;transform:translateX(-20px)}
  .drawer-link.is-active,.drawer-link.is-active:hover,.drawer-link.is-active:focus-visible{color:#000}
  .drawer-link.is-active .row-arrow,.drawer-link.is-active:hover .row-arrow,.drawer-link.is-active:focus-visible .row-arrow{opacity:1;transform:translateX(0);width:18px;height:18px}
  .drawer-language{display:flex;flex-direction:column;gap:20px;margin-top:48px;padding-top:20px;border-top:.5px solid rgba(0,0,0,.15)}
  .drawer-section-label,.drawer-contact-label{margin:0;color:#c4c7ca;font:400 12px/1 Poppins,Arial,sans-serif}
  .drawer-language-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:20px;padding:0;border:0;background:transparent;color:#c4c7ca;font:400 14px/1 Poppins,Arial,sans-serif;text-align:left}
  .drawer-language-option.is-active{color:#000}
  .drawer-language-check{display:block;width:18px;height:18px;opacity:0}
  .drawer-language-option.is-active .drawer-language-check{opacity:1}
  .drawer-contact{margin-top:28px;padding-top:28px;border-top:.5px solid rgba(0,0,0,.15)}
  .drawer-contact-label{margin-bottom:20px!important}
  .drawer-contact p{margin:0 0 20px;font-size:14px!important;line-height:1!important}
  .header.is-drawer-open .brand{content:url("assets/figma/jett-logo-black.svg")}
}