html{
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}body{
  margin: 0; line-height: var(--leading-body); letter-spacing: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
  display: block;
}audio,canvas,progress,video{
  vertical-align: baseline;
  display: inline-block;
}audio:not([controls]){
  height: 0;
  display: none;
}[hidden],template{
  display: none;
}a{
  background-color: #0000;
}a:active,a:hover{
  outline: 0;
}abbr[title]{
  border-bottom: 1px dotted;
}b,strong{
  font-weight: bold;
}dfn{
  font-style: italic;
}h1{
  margin: .67em 0;
  font-size: var(--step-hero); line-height: 1.02; letter-spacing: var(--tracking-display);}mark{
  color: #000;
  background: #ff0;
}small{
  font-size: 80%;
}sub,sup{
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}sup{
  top: -.5em;
}sub{
  bottom: -.25em;
}img{
  border: 0;
}svg:not(:root){
  overflow: hidden;
}hr{
  box-sizing: content-box;
  height: 0;
}pre{
  overflow: auto;
}code,kbd,pre,samp{
  font-family: monospace;
  font-size: 1em;
}button,input,optgroup,select,textarea{
  color: inherit;
  font: inherit;
  margin: 0;
}button{
  overflow: visible;
}button,select{
  text-transform: none;
}button,html input[type="button"],input[type="reset"]{
  -webkit-appearance: button;
  cursor: pointer;
}button[disabled],html input[disabled]{
  cursor: default;
}button::-moz-focus-inner,input::-moz-focus-inner{
  border: 0;
  padding: 0;
}input{
  line-height: normal;
}input[type="checkbox"],input[type="radio"]{
  box-sizing: border-box;
  padding: 0;
}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{
  height: auto;
}input[type="search"]{
  -webkit-appearance: none;
}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
}legend{
  border: 0;
  padding: 0;
}textarea{
  overflow: auto;
}optgroup{
  font-weight: bold;
}table{
  border-collapse: collapse;
  border-spacing: 0;
}td,th{
  padding: 0;
}@font-face{
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}[class^="w-icon-"],[class*=" w-icon-"]{
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}.w-icon-slider-right:before{
  content: "";
}.w-icon-slider-left:before{
  content: "";
}.w-icon-nav-menu:before{
  content: "";
}.w-icon-arrow-down:before,.w-icon-dropdown-toggle:before{
  content: "";
}.w-icon-file-upload-remove:before{
  content: "";
}.w-icon-file-upload-icon:before{
  content: "";
}*{
  box-sizing: border-box;
}html{
  height: 100%;
}body{
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: var(--step-body);
  line-height: var(--leading-body); letter-spacing: 0;}img{
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}html.w-mod-touch *{
  background-attachment: scroll !important;
}.w-block{
  display: block;
}.w-inline-block{
  max-width: 100%;
  display: inline-block;
}.w-clearfix:before,.w-clearfix:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-clearfix:after{
  clear: both;
}.w-hidden{
  display: none;
}.w-button{
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}input.w-button{
  -webkit-appearance: button;
}html[data-w-dynpage] [data-w-cloak]{
  color: #0000 !important;
}.w-code-block{
  margin: unset;
}pre.w-code-block code{
  all: inherit;
}pre.w-code-block code > span{
  display: block !important;
}.w-optimization{
  display: contents;
}.w-webflow-badge,.w-webflow-badge > img{
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}.w-webflow-badge{
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  width: auto !important;
  height: auto !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}.w-webflow-badge > img{
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}h1,h2,h3,h4,h5,h6{
  margin-bottom: 10px;
  font-weight: bold;
}h1{
  margin-top: 20px;
  font-size: var(--step-hero);
  line-height: 1.02; letter-spacing: var(--tracking-display);}h2{
  margin-top: 20px;
  font-size: var(--step-display);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);}h3{
  margin-top: 20px;
  font-size: var(--step-l);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-tight);}h4{
  margin-top: 10px;
  font-size: var(--step-s);
  line-height: 1.3; letter-spacing: var(--tracking-tight);}h5{
  margin-top: 10px;
  font-size: var(--step-xl);
  line-height: 1.1; letter-spacing: var(--tracking-display);}h6{
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}p{
  margin-top: 0;
  margin-bottom: 10px;
}blockquote{
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}figure{
  margin: 0 0 10px;
}figcaption{
  text-align: center;
  margin-top: 5px;
}ul,ol{
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}.w-list-unstyled{
  padding-left: 0;
  list-style: none;
}.w-embed:before,.w-embed:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-embed:after{
  clear: both;
}.w-video{
  width: 100%;
  padding: 0;
  position: relative;
}.w-video iframe,.w-video object,.w-video embed{
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}fieldset{
  border: 0;
  margin: 0;
  padding: 0;
}button,[type="button"],[type="reset"]{
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}.w-form{
  margin: 0 0 15px;
}.w-form-done{
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}.w-form-fail{
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}label{
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}.w-input,.w-select{
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}.w-input::placeholder,.w-select::placeholder{
  color: #999;
}.w-input:focus,.w-select:focus{
  border-color: #3898ec;
  outline: 0;
}.w-input[disabled],.w-select[disabled],.w-input[readonly],.w-select[readonly],fieldset[disabled] .w-input,fieldset[disabled] .w-select{
  cursor: not-allowed;
}.w-input[disabled]:not(.w-input-disabled),.w-select[disabled]:not(.w-input-disabled),.w-input[readonly],.w-select[readonly],fieldset[disabled]:not(.w-input-disabled) .w-input,fieldset[disabled]:not(.w-input-disabled) .w-select{
  background-color: #eee;
}textarea.w-input,textarea.w-select{
  height: auto;
}.w-select{
  background-color: #f3f3f3;
}.w-select[multiple]{
  height: auto;
}.w-form-label{
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}.w-radio{
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}.w-radio:before,.w-radio:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-radio:after{
  clear: both;
}.w-radio-input{
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}.w-file-upload{
  margin-bottom: 10px;
  display: block;
}.w-file-upload-input{
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}.w-file-upload-default,.w-file-upload-uploading,.w-file-upload-success{
  color: #333;
  display: inline-block;
}.w-file-upload-error{
  margin-top: 10px;
  display: block;
}.w-file-upload-default.w-hidden,.w-file-upload-uploading.w-hidden,.w-file-upload-error.w-hidden,.w-file-upload-success.w-hidden{
  display: none;
}.w-file-upload-uploading-btn{
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}.w-file-upload-file{
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}.w-file-upload-file-name{
  font-size: 14px;
  font-weight: normal;
  display: block;
}.w-file-remove-link{
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}.w-icon-file-upload-remove{
  margin: auto;
  font-size: 10px;
}.w-file-upload-error-msg{
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}.w-file-upload-info{
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}.w-file-upload-label{
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}.w-icon-file-upload-icon,.w-icon-file-upload-uploading{
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}.w-icon-file-upload-uploading{
  height: 20px;
}.w-container{
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}.w-container:before,.w-container:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-container:after{
  clear: both;
}.w-container .w-row{
  margin-left: -10px;
  margin-right: -10px;
}.w-row:before,.w-row:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-row:after{
  clear: both;
}.w-row .w-row{
  margin-left: 0;
  margin-right: 0;
}.w-col{
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}.w-col .w-col{
  padding-left: 0;
  padding-right: 0;
}.w-col-1{
  width: 8.33333%;
}.w-col-2{
  width: 16.6667%;
}.w-col-3{
  width: 25%;
}.w-col-4{
  width: 33.3333%;
}.w-col-5{
  width: 41.6667%;
}.w-col-6{
  width: 50%;
}.w-col-7{
  width: 58.3333%;
}.w-col-8{
  width: 66.6667%;
}.w-col-9{
  width: 75%;
}.w-col-10{
  width: 83.3333%;
}.w-col-11{
  width: 91.6667%;
}.w-col-12{
  width: 100%;
}.w-hidden-main{
  display: none !important;
}@media screen and (max-width: 991px){.w-container{
    max-width: 728px;
  }.w-hidden-main{
    display: inherit !important;
  }.w-hidden-medium{
    display: none !important;
  }.w-col-medium-1{
    width: 8.33333%;
  }.w-col-medium-2{
    width: 16.6667%;
  }.w-col-medium-3{
    width: 25%;
  }.w-col-medium-4{
    width: 33.3333%;
  }.w-col-medium-5{
    width: 41.6667%;
  }.w-col-medium-6{
    width: 50%;
  }.w-col-medium-7{
    width: 58.3333%;
  }.w-col-medium-8{
    width: 66.6667%;
  }.w-col-medium-9{
    width: 75%;
  }.w-col-medium-10{
    width: 83.3333%;
  }.w-col-medium-11{
    width: 91.6667%;
  }.w-col-medium-12{
    width: 100%;
  }.w-col-stack{
    width: 100%;
    left: auto;
    right: auto;
  }
}@media screen and (max-width: 767px){.w-hidden-main,.w-hidden-medium{
    display: inherit !important;
  }.w-hidden-small{
    display: none !important;
  }.w-row,.w-container .w-row{
    margin-left: 0;
    margin-right: 0;
  }.w-col{
    width: 100%;
    left: auto;
    right: auto;
  }.w-col-small-1{
    width: 8.33333%;
  }.w-col-small-2{
    width: 16.6667%;
  }.w-col-small-3{
    width: 25%;
  }.w-col-small-4{
    width: 33.3333%;
  }.w-col-small-5{
    width: 41.6667%;
  }.w-col-small-6{
    width: 50%;
  }.w-col-small-7{
    width: 58.3333%;
  }.w-col-small-8{
    width: 66.6667%;
  }.w-col-small-9{
    width: 75%;
  }.w-col-small-10{
    width: 83.3333%;
  }.w-col-small-11{
    width: 91.6667%;
  }.w-col-small-12{
    width: 100%;
  }
}@media screen and (max-width: 479.98px){.w-container{
    max-width: none;
  }.w-hidden-main,.w-hidden-medium,.w-hidden-small{
    display: inherit !important;
  }.w-hidden-tiny{
    display: none !important;
  }.w-col{
    width: 100%;
  }.w-col-tiny-1{
    width: 8.33333%;
  }.w-col-tiny-2{
    width: 16.6667%;
  }.w-col-tiny-3{
    width: 25%;
  }.w-col-tiny-4{
    width: 33.3333%;
  }.w-col-tiny-5{
    width: 41.6667%;
  }.w-col-tiny-6{
    width: 50%;
  }.w-col-tiny-7{
    width: 58.3333%;
  }.w-col-tiny-8{
    width: 66.6667%;
  }.w-col-tiny-9{
    width: 75%;
  }.w-col-tiny-10{
    width: 83.3333%;
  }.w-col-tiny-11{
    width: 91.6667%;
  }.w-col-tiny-12{
    width: 100%;
  }
}.w-widget{
  position: relative;
}.w-widget-map{
  width: 100%;
  height: 400px;
}.w-widget-map label{
  width: auto;
  display: inline;
}.w-widget-map img{
  max-width: inherit;
}.w-widget-twitter{
  overflow: hidden;
}.w-widget-twitter-count-shim{
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}.w-widget-twitter-count-shim *{
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}.w-widget-twitter-count-shim .w-widget-twitter-count-inner{
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}.w-widget-twitter-count-shim .w-widget-twitter-count-clear{
  display: block;
  position: relative;
}.w-widget-twitter-count-shim.w--large{
  width: 36px;
  height: 28px;
}.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner{
  font-size: 18px;
  line-height: 18px;
}.w-widget-twitter-count-shim:not(.w--vertical){
  margin-left: 5px;
  margin-right: 8px;
}.w-widget-twitter-count-shim:not(.w--vertical).w--large{
  margin-left: 6px;
}.w-widget-twitter-count-shim:not(.w--vertical):before,.w-widget-twitter-count-shim:not(.w--vertical):after{
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}.w-widget-twitter-count-shim:not(.w--vertical):before{
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}.w-widget-twitter-count-shim:not(.w--vertical).w--large:before{
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}.w-widget-twitter-count-shim:not(.w--vertical):after{
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}.w-widget-twitter-count-shim:not(.w--vertical).w--large:after{
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}.w-widget-twitter-count-shim.w--vertical{
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}.w-widget-twitter-count-shim.w--vertical:before,.w-widget-twitter-count-shim.w--vertical:after{
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}.w-widget-twitter-count-shim.w--vertical:before{
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}.w-widget-twitter-count-shim.w--vertical:after{
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner{
  font-size: 18px;
  line-height: 22px;
}.w-widget-twitter-count-shim.w--vertical.w--large{
  width: 76px;
}.w-background-video{
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}.w-background-video > video{
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}.w-background-video > video::-webkit-media-controls-start-playback-button{
  -webkit-appearance: none;
  display: none !important;
}.w-background-video--control{
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}.w-background-video--control > [hidden]{
  display: none !important;
}.w-slider{
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}.w-slider-mask{
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}.w-slide{
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}.w-slider-nav{
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}.w-slider-nav.w-round > div{
  border-radius: 100%;
}.w-slider-nav.w-num > div{
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: inherit;
  padding: .2em .5em;
}.w-slider-nav.w-shadow > div{
  box-shadow: 0 0 3px #3336;
}.w-slider-nav-invert{
  color: #fff;
}.w-slider-nav-invert > div{
  background-color: #2226;
}.w-slider-nav-invert > div.w-active{
  background-color: #222;
}.w-slider-dot{
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}.w-slider-dot.w-active{
  background-color: #fff;
}.w-slider-dot:focus{
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}.w-slider-dot:focus.w-active{
  box-shadow: none;
}.w-slider-arrow-left,.w-slider-arrow-right{
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}.w-slider-arrow-left [class^="w-icon-"],.w-slider-arrow-right [class^="w-icon-"],.w-slider-arrow-left [class*=" w-icon-"],.w-slider-arrow-right [class*=" w-icon-"]{
  position: absolute;
}.w-slider-arrow-left:focus,.w-slider-arrow-right:focus{
  outline: 0;
}.w-slider-arrow-left{
  z-index: 3;
  right: auto;
}.w-slider-arrow-right{
  z-index: 4;
  left: auto;
}.w-icon-slider-left,.w-icon-slider-right{
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}.w-slider-aria-label{
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}.w-slider-force-show{
  display: block !important;
}.w-dropdown{
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}.w-dropdown-btn,.w-dropdown-toggle,.w-dropdown-link{
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}.w-dropdown-toggle{
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}.w-dropdown-toggle:focus{
  outline: 0;
}.w-icon-dropdown-toggle{
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}.w-dropdown-list{
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}.w-dropdown-list.w--open{
  display: block;
}.w-dropdown-link{
  color: #222;
  padding: 10px 20px;
  display: block;
}.w-dropdown-link.w--current{
  color: #0082f3;
}.w-dropdown-link:focus{
  outline: 0;
}.w-lightbox-backdrop{
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}.w-lightbox-backdrop,.w-lightbox-container{
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}.w-lightbox-content{
  height: 100vh;
  position: relative;
  overflow: hidden;
}.w-lightbox-view{
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}.w-lightbox-view:before{
  content: "";
  height: 100vh;
}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{
  height: 86vh;
}.w-lightbox-frame,.w-lightbox-view:before{
  vertical-align: middle;
  display: inline-block;
}.w-lightbox-figure{
  margin: 0;
  position: relative;
}.w-lightbox-group .w-lightbox-figure{
  cursor: pointer;
}.w-lightbox-img{
  width: auto;
  max-width: none;
  height: auto;
}.w-lightbox-image{
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}.w-lightbox-group .w-lightbox-image{
  max-height: 86vh;
}.w-lightbox-caption{
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}.w-lightbox-embed{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}.w-lightbox-control{
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}.w-lightbox-left{
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}.w-lightbox-right{
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}.w-lightbox-close{
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}.w-lightbox-strip{
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}.w-lightbox-item{
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}.w-lightbox-active{
  opacity: .3;
}.w-lightbox-thumbnail{
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}.w-lightbox-thumbnail-image{
  position: absolute;
  top: 0;
  left: 0;
}.w-lightbox-thumbnail .w-lightbox-tall{
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}.w-lightbox-thumbnail .w-lightbox-wide{
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}.w-lightbox-spinner{
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}.w-lightbox-spinner:after{
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}.w-lightbox-hide{
  display: none;
}.w-lightbox-noscroll{
  overflow: hidden;
}@media (min-width: 768px){.w-lightbox-content{
    height: 96vh;
    margin-top: 2vh;
  }.w-lightbox-view,.w-lightbox-view:before{
    height: 96vh;
  }.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{
    height: 84vh;
  }.w-lightbox-image{
    max-width: 96vw;
    max-height: 96vh;
  }.w-lightbox-group .w-lightbox-image{
    max-width: 82.3vw;
    max-height: 84vh;
  }.w-lightbox-left,.w-lightbox-right{
    opacity: .5;
    display: block;
  }.w-lightbox-close{
    opacity: .8;
  }.w-lightbox-control:hover{
    opacity: 1;
  }
}.w-lightbox-inactive,.w-lightbox-inactive:hover{
  opacity: 0;
}.w-richtext:before,.w-richtext:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-richtext:after{
  clear: both;
}.w-richtext[contenteditable="true"]:before,.w-richtext[contenteditable="true"]:after{
  white-space: initial;
}.w-richtext ol,.w-richtext ul{
  overflow: hidden;
}.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after,.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div{
  outline: 2px solid #2895f7;
}.w-richtext figure.w-richtext-figure-type-video > div:after,.w-richtext figure[data-rt-type="video"] > div:after{
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}.w-richtext figure{
  max-width: 60%;
  position: relative;
}.w-richtext figure > div:before{
  cursor: default !important;
}.w-richtext figure img{
  width: 100%;
}.w-richtext figure figcaption.w-richtext-figcaption-placeholder{
  opacity: .6;
}.w-richtext figure div{
  color: #0000;
  font-size: 0;
}.w-richtext figure.w-richtext-figure-type-image,.w-richtext figure[data-rt-type="image"]{
  display: table;
}.w-richtext figure.w-richtext-figure-type-image > div,.w-richtext figure[data-rt-type="image"] > div{
  display: inline-block;
}.w-richtext figure.w-richtext-figure-type-image > figcaption,.w-richtext figure[data-rt-type="image"] > figcaption{
  caption-side: bottom;
  display: table-caption;
}.w-richtext figure.w-richtext-figure-type-video,.w-richtext figure[data-rt-type="video"]{
  width: 60%;
  height: 0;
}.w-richtext figure.w-richtext-figure-type-video iframe,.w-richtext figure[data-rt-type="video"] iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}.w-richtext figure.w-richtext-figure-type-video > div,.w-richtext figure[data-rt-type="video"] > div{
  width: 100%;
}.w-richtext figure.w-richtext-align-center{
  clear: both;
  margin-left: auto;
  margin-right: auto;
}.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div{
  max-width: 100%;
}.w-richtext figure.w-richtext-align-normal{
  clear: both;
}.w-richtext figure.w-richtext-align-fullwidth{
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}.w-richtext figure.w-richtext-align-fullwidth > div{
  padding-bottom: inherit;
  display: inline-block;
}.w-richtext figure.w-richtext-align-fullwidth > figcaption{
  display: block;
}.w-richtext figure.w-richtext-align-floatleft{
  float: left;
  clear: none;
  margin-right: 15px;
}.w-richtext figure.w-richtext-align-floatright{
  float: right;
  clear: none;
  margin-left: 15px;
}.w-nav{
  z-index: 1000;
  background: #ddd;
  position: relative;
}.w-nav:before,.w-nav:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-nav:after{
  clear: both;
}.w-nav-brand{
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}.w-nav-link{
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}.w-nav-link.w--current{
  color: #0082f3;
}.w-nav-menu{
  float: right;
  position: relative;
}[data-nav-menu-open]{
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}.w--nav-link-open{
  display: block;
  position: relative;
}.w-nav-overlay{
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}.w-nav-overlay [data-nav-menu-open]{
  top: 0;
}.w-nav[data-animation="over-left"] .w-nav-overlay{
  width: auto;
}.w-nav[data-animation="over-left"] .w-nav-overlay,.w-nav[data-animation="over-left"] [data-nav-menu-open]{
  z-index: 1;
  top: 0;
  right: auto;
}.w-nav[data-animation="over-right"] .w-nav-overlay{
  width: auto;
}.w-nav[data-animation="over-right"] .w-nav-overlay,.w-nav[data-animation="over-right"] [data-nav-menu-open]{
  z-index: 1;
  top: 0;
  left: auto;
}.w-nav-button{
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}.w-nav-button:focus{
  outline: 0;
}.w-nav-button.w--open{
  color: #fff;
  background-color: #c8c8c8;
}.w-nav[data-collapse="all"] .w-nav-menu{
  display: none;
}.w-nav[data-collapse="all"] .w-nav-button,.w--nav-dropdown-open,.w--nav-dropdown-toggle-open{
  display: block;
}.w--nav-dropdown-list-open{
  position: static;
}@media screen and (max-width: 991px){.w-nav[data-collapse="medium"] .w-nav-menu{
    display: none;
  }.w-nav[data-collapse="medium"] .w-nav-button{
    display: block;
  }
}@media screen and (max-width: 767px){.w-nav[data-collapse="small"] .w-nav-menu{
    display: none;
  }.w-nav[data-collapse="small"] .w-nav-button{
    display: block;
  }.w-nav-brand{
    padding-left: 10px;
  }
}@media screen and (max-width: 479.98px){.w-nav[data-collapse="tiny"] .w-nav-menu{
    display: none;
  }.w-nav[data-collapse="tiny"] .w-nav-button{
    display: block;
  }
}.w-tabs{
  position: relative;
}.w-tabs:before,.w-tabs:after{
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}.w-tabs:after{
  clear: both;
}.w-tab-menu{
  position: relative;
}.w-tab-link{
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}.w-tab-link.w--current{
  background-color: #c8c8c8;
}.w-tab-link:focus{
  outline: 0;
}.w-tab-content{
  display: block;
  position: relative;
  overflow: hidden;
}.w-tab-pane{
  display: none;
  position: relative;
}.w--tab-active{
  display: block;
}@media screen and (max-width: 479.98px){.w-tab-link{
    display: block;
  }
}.w-ix-emptyfix:after{
  content: "";
}@keyframes spin{
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}.w-dyn-empty{
  background-color: #ddd;
  padding: 10px;
}.w-dyn-hide,.w-dyn-bind-empty,.w-condition-invisible{
  display: none !important;
}@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  /* --- v2 spacing: capped, so sections stop growing on wide screens --- */
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-s:   1.25rem;
  --space-m:   2rem;
  --space-l:   3.25rem;
  --space-xl:  5rem;
  --space-2xl: 7.5rem;
  --space-3xl: 11rem;

  /* --- v4 spatial system ---------------------------------------------------
     The page edge and the gap between section bands, as their own tokens.
     v2 replaced the visual system but left every section sitting on the same
     1.25rem its components use, which is what made the content read as
     scattered across the page rather than composed on it. Splitting the two
     means the page edge can be generous without inflating component padding.
     --gutter resolves to 24px on mobile, ~77px at 1280, ~115px at 1920. */
  --gutter:    clamp(1.5rem, 6vw, 8rem);
  --section-y: clamp(4rem, 9vw, 9rem);

  /* --- v2 surface language --- */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-pill: 999px;
  --hairline-gold: rgba(213, 171, 96, .25);
  --hairline-gold-strong: rgba(213, 171, 96, .55);
  --ink: #f2f4f8;        /* body text - softer than pure white */
  --navy-alt: #021833;   /* alternating ground */

  /* --- v2 type scale: floors and ceilings, so nothing can overflow --- */
  --step-numeral: clamp(5rem, 16vw, 13rem);
  --step-hero:    clamp(3rem, 8.4vw, 7.5rem);
  --step-display: clamp(2.25rem, 5.8vw, 5rem);
  /* v7: the same correction v5 made to --step-m / -s / -body, applied to the
     three tiers it did not reach. A bare Nvw middle term does not overtake
     the floor until late, so each of these sat pinned at its floor across most
     of the range and then ramped steeply:

       --step-xl        3.6vw overtakes 1.875rem at  833px
       --step-statement 3vw   overtakes 1.75rem  at  933px
       --step-l         2.4vw overtakes 1.5rem   at 1000px  <- the hero claim
       --step-micro     .85vw overtakes .75rem   at 1412px  <- every eyebrow

     --step-l is the landing page's own claim and --step-micro is the label on
     every section on the site, so between them that is most of what a reader
     meets between 480 and 1000 held at a phone size on a laptop.

     Rewritten as base + slope*vw, anchored so each hits its floor at 480
     and its ceiling at 1920 exactly as before - this only fills in the middle:

                        480    768   1280   1920
       --step-xl         30    33.6   40      48    (was 30, 30, 46.1, 48)
       --step-statement  28    31.2   36.9    44    (was 28, 28, 38.4, 44)
       --step-l          24    26     29.6    34    (was 24, 24, 30.7, 34)
       --step-micro      12    12.3   12.6    13    (was 12, 12, 12,   13)

     --step-numeral, -hero and -display keep their bare vw: they clear their
     floors at 500/571/621px, which is a deliberate mobile floor rather than a
     plateau, and re-anchoring them would shrink display type across the middle
     of the range. */
  --step-xl:      clamp(1.875rem, 1.5rem + 1.25vw, 3rem);
  --step-statement: clamp(1.75rem, 1.417rem + 1.111vw, 2.75rem);
  --step-l:       clamp(1.5rem, 1.292rem + 0.694vw, 2.125rem);
  /* v5: the three reading tiers were a bare `Nvw` middle term, which meant the
     vw was still below the floor for most of the range and the token sat pinned
     at its floor until very late - --step-body's 1.1vw does not overtake 1rem
     until 1454px. So body copy was a flat 16px from 480 all the way to 1454 and
     then stepped to 17, while --step-display travelled 36 -> 74 across the same
     span. The ladder the README describes only existed at the top of the range.

     Rewritten as `base + slope*vw` so each one starts moving at 480 instead of
     waiting. The floors and the ceilings are unchanged, and each still reaches
     exactly its old value at 1920 - this only fills in the flat middle:

                     480    768   1280   1920
       --step-m       19    20.6   23.5    24     (was 19, 19, 22.4, 24)
       --step-s       16    16.6   17.7    18     (was 16, 16, 16,   18)
       --step-body    16    16.3   16.8    17     (was 16, 16, 16,   17)   */
  --step-m:       clamp(1.1875rem, 1.019rem + 0.561vw, 1.5rem);
  --step-s:       clamp(1rem, 0.9375rem + 0.208vw, 1.125rem);
  --step-body:    clamp(1rem, 0.972rem + 0.094vw, 1.0625rem);
  --step-micro:   clamp(.75rem, .729rem + .069vw, .8125rem);

  /* display runs tight, micro labels run wide - the two ends of the voice */
  --tracking-display: -0.022em;
  --tracking-tight:   -0.015em;
  --tracking-micro:    0.14em;

  /* leading, loosened from the donor's .95 / 1.1 */
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body:    1.55;

  /* NilTech brand palette */
  --navy: #032956;          /* primary dark ground */
  --navy-deep: #021c3b;     /* recessed panels */
  --gold: #d5ab60;          /* accent */
  --white: #fff;
  --hairline: #d5ab608c;    /* gold at 55% - reads as a rule on navy and on white */
  --transparent: #fff0;
  /* inherited token names kept as aliases so the existing var() call sites resolve.
     the --oragne spelling is the original author, preserved only as an alias. */
  --black: var(--navy);
  --oragne: var(--gold);
}.w-layout-grid{
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}body{
  background-color: var(--black);
  color: var(--ink);
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-body);
  font-weight: 300;
  line-height: var(--leading-body);
  overflow-x: hidden; letter-spacing: 0;}h1{
  letter-spacing: var(--tracking-display);
  font-feature-settings: "dlig" on, "ss03" on;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-hero);
  font-weight: 500;
  line-height: 1.02;
}h2{
  letter-spacing: var(--tracking-display);
  font-feature-settings: "dlig" on, "ss03" on;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-display);
  font-weight: 500;
  line-height: var(--leading-display);
}h3{
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "dlig" on, "ss03" on;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-l);
  font-weight: 500;
  line-height: var(--leading-heading);
}h4{
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "dlig" on, "ss03" on;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-s);
  font-weight: 400;
  line-height: 1.3;
}h5{
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-xl);
  font-weight: 400;
  line-height: 1.1; letter-spacing: var(--tracking-display);}p{
  margin-bottom: 0;
}a{
  text-decoration: underline;
}ul{
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}strong{
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-s);
  font-weight: 400;
}.container{
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}.container.projet-cont{
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}.container.full-page{
  position: relative;
}.container.full-page.home-hero{
  cursor: none;
  padding-top: var(--space-2xl);
}.background{
  z-index: -10;
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  inset: 0% auto auto 0%;
  overflow: hidden; border-radius: var(--radius-m);}.button-big{
  z-index: 99;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: fixed;
  transform: translate(-50%, -50%);
}.button-big__content{
  background-color: var(--white);
  height: 4.167vw;
  color: var(--black);
  border-radius: 12.5rem;
  justify-content: center;
  align-items: center;
  padding: var(--space-s) var(--space-s);
  font-family: 'General Sans', Arial, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
  display: flex;
}.button-big__content.circle-big{
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  width: 4.167vw;
  margin-left: -.3vw;
  padding: 0;
}.nav--logo{
  position: relative;
}.nav--item{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  justify-content: space-between;
  align-items: center;
  padding: .8vw .694vw .694vw;
  display: flex;
  position: relative;
}.nav--button{
  z-index: 1;
  position: relative;
}.nav__link{
  letter-spacing: .03125rem;
  text-transform: uppercase;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: .625rem;
  text-decoration: none;
}.button-small{
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: fit-content;
  text-decoration: none;
  display: flex;
  position: relative;
}.button-small__center{
  background-color: #ffffff1a;
  border-radius: 50vw;
  justify-content: center;
  align-items: center;
  height: 3.472vw;
  padding-left: var(--space-s);
  padding-right: var(--space-s);
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  -webkit-backdrop-filter: blur(30px) !important;
  backdrop-filter: blur(30px) !important; letter-spacing: var(--tracking-micro);}.button-small__center.button-small__center{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}.button-small__center.button-small__center.color-orange{
  color: var(--oragne);
}.button-small__center.bg-white{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}.button-big__svg{
  justify-content: center;
  align-items: center;
  width: .72vw;
  height: .72vw;
  display: flex;
}.item--marquee{
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100vw;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  overflow: hidden;
}.marquee{
  flex-flow: row;
  display: flex;
  overflow: hidden;
}.marquee-content{
  flex: none;
  justify-content: space-around;
  display: flex;
}.marquee-content.scroll-marquee{
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}.marquee__text{
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-display);
  font-weight: 500;
  line-height: var(--leading-display);
}.marquee__text.clipping-text{
  background-color: var(--black);
}.marquee__text.no-upp{
  text-transform: none;
}.marquee__svg{
  height: 3.472vw;
  margin-bottom: 1.5vw;
  padding-left: 3vw;
  padding-right: 3vw;
}.div-hide{
  position: relative;
  overflow: hidden;
}.logo{
  width: 5.972vw;
  color: var(--white);
}.grid-container{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  padding-top: var(--space-l);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}.grid-container.big-margin{
  padding-top: var(--space-2xl);
}.grid-container.margin-s{
  margin-top: 6.944vw;
  padding-top: 0;
}.grid-container.no-padd{
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  padding-left: 0;
  padding-right: 0;
}.grid-container.no-pad-top{
  padding-top: 0;
}.grid-container.on-mobile{
  place-items: center stretch;
}.span-text{
  white-space: pre;
  word-break: normal;
  display: inline-block;
}.card-container{
  padding-top: 2.5rem;
}.horizontal-section{
  width: 100vw;
  height: 100vh;
  margin-top: -50vh;
  display: flex;
  position: sticky;
  top: 0;
}.horizontal-section.no-margin{
  margin-top: 0;
}.track{
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: none;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  display: flex;
  position: relative;
}.horizontal-wrapper{
  transform-origin: 100% 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}.h-slide{
  height: 100%;
  color: var(--black);
  background-color: #fff;
  flex-flow: column;
  flex: 0 0 50vw;
  justify-content: space-between;
  align-items: stretch;
  padding: var(--space-l) var(--space-l) var(--space-m);
  display: flex; border-radius: var(--radius-m);}.h-slide.side{
  background-color: var(--transparent);
  padding-bottom: var(--space-l);
}.h-slide.h-slide--schema{
  background-color: var(--transparent);
  flex: 0 0 42vw;
  justify-content: flex-start;
  align-items: stretch;
  width: 42vw;
  padding: 0;
  position: relative;
  overflow: hidden;
}.color-black{
  color: var(--black);
}.slide-side__content{
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  display: flex;
}.spacer{
  height: 19vw;
}.text-span-2{
  padding-left: 6vw;
}.last-section{
  background-color: var(--white);
  flex-flow: column;
  width: 100%;
  margin-bottom: -100vh;
  display: block;
  position: relative;
}.section__intro-text{
  grid-column-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  grid-row-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  flex-flow: column;
  display: flex;
}.section-values{
  padding-top: var(--space-2xl);
  position: relative;
}.section-values.margin-s{
  padding-top: var(--space-xl);
}.value-list{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  justify-content: center;
  display: flex;
  position: relative;
}.value-item{
  flex-flow: column;
  flex: 1 0 0;
  justify-content: space-between;
  align-items: stretch;
  min-height: 33vw;
  padding: var(--space-l) var(--space-m) var(--space-m);
  display: flex;
  position: relative; border-radius: var(--radius-m);}.value-item.top-align{
  justify-content: flex-start;
  align-items: stretch;
  min-height: auto;
}.value-divider{
  background-color: var(--hairline);
  width: 1px;
}.value-divider.blend-overlay{
  mix-blend-mode: overlay;
}.value-icon{
  height: 12.5vw;
  min-height: 12.5vw;
}.value-icon.color-orange{
  color: var(--oragne);
}.use-case__wrapper{
  flex-flow: row;
  padding-bottom: var(--space-2xl);
}.use-case__list{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  justify-content: flex-start;
  align-items: stretch;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex;
}.use-case__item{
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: 1;
}.use-case__block{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  color: var(--black);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}.use-case__block.color-white{
  color: var(--white);
}.use-case__img-container{
  width: 100%;
  overflow: hidden; border-radius: var(--radius-m);}.use-case__img-item{
  aspect-ratio: 28 / 34;
  object-fit: cover;
  width: 100%;
  /* the <img> carries width/height attributes for CLS; without this the 1200px
     presentational hint outranks aspect-ratio and the card grows to 1200px tall */
  height: auto;
}.h-line{
  background-color: var(--white);
  mix-blend-mode: overlay;
  width: 100%;
  height: 1px;
}.h-line.on-mobile{
  display: none;
}.h-line.color-blue{
  mix-blend-mode: normal;
  background-color: #71adcf;
}.subtitle-in-text{
  width: fit-content;
  margin-bottom: -1.5vw;
}.use-case-text{
  max-width: 23.611vw;
  font-weight: 300;
  line-height: 1.1;
}.value-item__line{
  background-color: var(--hairline);
  width: 100%;
  height: 1px;
  position: absolute;
  inset: auto 0% 0%;
}.value-item__line.top{
  inset: 0% 0% auto;
}.value-item__line.top.blend-overlay{
  mix-blend-mode: overlay;
}.value-item__line.bot{
  inset: auto 0% 0%;
}.value-item__line.bot.blend-overlay{
  mix-blend-mode: overlay;
}.footer{
  flex-flow: column;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
  padding: var(--space-s);
  display: flex;
}.footer-text-container{
  grid-column-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  grid-row-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  flex-flow: column;
  display: flex;
}.footer-bot-info{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}.top{
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}.top.use-case__top-margin{
  margin-bottom: -.5vw;
}.top.top-circle{
  padding-top: .3vw;
}.top.row{
  grid-column-gap: 1.181vw;
  grid-row-gap: 1.181vw;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
}.top.row.min-height{
  height: 8vw;
}.top.center{
  grid-column-gap: .6vw;
  grid-row-gap: .6vw;
  justify-content: center;
  align-items: center;
}.navigation{
  z-index: 999;
  width: 100vw;
  color: var(--black);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s);
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}.section-home{
  width: 100vw;
  position: relative;
}.div-block{
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 37.5vw;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex;
}.div-block.home-margin{
  position: sticky;
  top: 10vw;
}.div-block.home-margin.follow-section{
  margin-top: 10vh;
}.h-arrow{
  width: .833vw;
  color: var(--oragne);
}.section-hero-bis{
  width: 100vw;
  height: 100vh;
  position: relative;
}.title-cont{
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 43.056vw;
  display: inline-flex;
}.abs{
  min-width: 23.264vw;
  color: var(--black);
  margin-top: 10.417vw;
  margin-right: 1.389vw;
  position: absolute;
  top: 0%;
  bottom: auto;
  right: 0%;
}.test-blend-mode{
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  background-color: var(--white);
  mix-blend-mode: lighten;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
}.test-blend-mode.bot-left{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-left: var(--gutter);
  display: inline-flex;
}.mwg_effect031{
  padding-top: 40vh;
  position: relative;
  overflow: hidden;
}.slide{
  height: 100vh;
  position: relative;
}.slide.last{
  border-bottom: 1px solid var(--hairline);
}.slide-content{
  perspective: 250vw;
  width: 100%;
  height: 100%;
  position: relative;
}.content-slide{
  background-color: var(--white);
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 10%;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  padding: var(--space-xl) var(--space-l);
  display: flex;
  position: absolute;
  inset: 0; border-radius: var(--radius-m);}.left{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  display: flex;
}.left.clipping-text{
  -webkit-text-fill-color: transparent;
  background-image: url("../img/nt-logo-texture.svg");
  background-position: 0 0;
  background-size: auto;
  -webkit-background-clip: text;
  background-clip: text;
}.right{
  flex-flow: column;
  display: flex;
}.right.right-align{
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  align-items: flex-end;
}.number{
  color: var(--transparent);
  letter-spacing: var(--tracking-display);
  -webkit-text-stroke-width: .069vw;
  -webkit-text-stroke-color: var(--oragne);
  text-transform: uppercase;
  font-feature-settings: "dlig" on, "ss03" on;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-numeral);
  font-weight: 500;
  line-height: .9;
}.bot{
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}.bot.col{
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}.bot.col.clipping-text.gap{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
}.bot.center{
  justify-content: center;
}.max-w{
  max-width: 34vw;
}.bg-white{
  background-color: var(--white);
  position: relative;
}.bg-white.offre-last{
  padding-top: var(--space-3xl);
}.center-text{
  grid-column-gap: 6.944vw;
  grid-row-gap: 6.944vw;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}.clipping-text{
  -webkit-text-fill-color: transparent;
  background-image: url("../img/nt-logo-texture.svg");
  background-position: 0 0;
  background-size: auto;
  -webkit-background-clip: text;
  background-clip: text;
}.first-slide{
  width: 100vw;
  height: 100%;
  color: var(--black);
  flex-flow: column;
  flex: 0 0 100vw;
  justify-content: center;
  align-items: center;
  padding: 3.75rem;
  display: flex;
}.second-slide{
  height: 100%;
  color: var(--black);
  flex-flow: row;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: stretch;
  padding: var(--space-m) var(--space-m);
  display: flex;
}.circle{
  aspect-ratio: 1;
  background-color: var(--oragne);
  border-radius: 100%;
  width: .375rem;
}.div-block-2{
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 20.625vw;
  display: flex;
}.div-block-2.no-mw{
  grid-column-gap: .625vw;
  grid-row-gap: .625vw;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
  max-width: none;
}.claim-m{
  letter-spacing: -0.005em;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-m);
  font-weight: 300;
  line-height: 1.45;
}.claim-s{
  letter-spacing: 0;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-s);
  font-weight: 300;
  line-height: var(--leading-body);
}.claim-s.max-w-footer{
  max-width: 18.958vw;
}.claim-s.max-w-footer.expertise-split{
  max-width: 30vw;
}.manifesto{
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "dlig" on, "ss03" on;
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-statement);
  font-weight: 300;
  line-height: var(--leading-heading);
}.manifesto.color-white{
  color: var(--white);
}.nav-tag{
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 0;
  padding: 0;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  position: static;
}.nav-tag.color-black,.nav-tag.color-black.w--current{
  color: var(--black);
}.nav-tag.color-white{
  color: var(--white);
}.nav-tag.color-white.hide{
  position: absolute;
  top: 100%;
  left: 0;
}.nav-tag.color-white.center{
  text-align: center;
}.nav-tag.hide{
  position: absolute;
}.nav-tag.hide.color-white{
  transform: translate(0, 20%)rotate(3deg);
}.nav-tag.min-w{
  min-width: 23.264vw;
}.nav-tag.one{
  margin-top: 4.861vw;
}.nav-tag.color-orange{
  color: var(--oragne); border-radius: var(--radius-pill);}.btn-b{
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 600;
  line-height: 1.4; letter-spacing: var(--tracking-micro);}.btn-b.color-orange{
  color: var(--oragne);
}.btn-s{
  white-space: nowrap;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 600;
  line-height: 1.4; letter-spacing: var(--tracking-micro);}.btn-s.color-white{
  color: var(--white);
}.btn-s.color-white.nav-link.hide{
  position: absolute;
}.btn-s.color-orange{
  color: var(--oragne);
}.btn-s.color-orange.hide{
  position: absolute;
}.logo-footer{
  width: 45vw;
}.value-text{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  padding-right: 2vw;
  display: flex;
}.value-p{
  padding-right: var(--space-l);
}.no-wrap{
  white-space: nowrap;
}.right-align{
  grid-column-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  grid-row-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}.use-case-h4{
  line-height: 1.2;
}.test{
  backface-visibility: hidden;
  width: 50vw;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 1.181vw;
  transform: translateZ(0);
}.link-block{
  text-decoration: none;
}.link-block.last-link,.link-block.ml-link{
  opacity: .5;
}.no-scroll{
  overflow: hidden;
}.use-case__bg-item{
  object-fit: cover;
  width: 100%;
  height: 100%;
}.use-case__bg{
  z-index: -1;
  width: 100vw;
  height: 100vh;
  margin-bottom: -100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}.intro-header{
  grid-column-gap: 1.736vw;
  grid-row-gap: 1.736vw;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: var(--space-2xl);
  display: flex;
}.min-w{
  width: 23.264vw;
  padding-right: 6vw;
}.tag{
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin-top: 10.417vw;
  margin-bottom: 2.778vw;
  display: flex;
}.tag-case{
  margin-top: .2vw;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 300;
  line-height: 1.4; letter-spacing: var(--tracking-micro); border-radius: var(--radius-pill);}.info-case{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  justify-content: flex-start;
  align-items: stretch;
  padding-top: var(--space-xl);
  display: flex;
}.info-case__item{
  grid-column-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  grid-row-gap: clamp(var(--space-m), 2.778vw, var(--space-l));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  flex-flow: column;
  flex: 1;
  padding: var(--space-l) var(--space-m) var(--space-xl);
  display: flex; border-radius: var(--radius-m);}.info-case__item.no-border{
  border-top-width: 0;
}.info-case__list{
  grid-column-gap: 2.083vw;
  grid-row-gap: 2.083vw;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}.galerie{
  margin-top: 6.944vw;
}.collection-list-wrapper{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
  display: flex;
}.collection-list-2{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  display: flex;
}.column-inner{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}.img-cont-1,.img-cont-2,.img-cont-3{
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}.img-cont{
  position: relative;
  overflow: hidden; border-radius: var(--radius-m);}.img-fill{
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}.img-mask{
  clip-path: inset(30%); border-radius: var(--radius-m);}.section-wrapper{
  display: block;
  position: relative;
  overflow: visible;
}.projets-details{
  margin-bottom: 17.361vw;
}.full-page{
  flex-flow: column;
  justify-content: space-between;
  height: 100vh;
  display: flex;
}.usecase__bg-mask{
  background-color: var(--black);
  opacity: .3;
  width: 100%;
  height: 100%;
  position: absolute; border-radius: var(--radius-m);}.tag-block{
  border: 1px solid #ffffff4d;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: var(--space-s);
  display: flex;
}.use-case__img-mask{
  clip-path: inset(30%);
  overflow: hidden; border-radius: var(--radius-m);}.middle-first{
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  flex-flow: row;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}.div-block-3{
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}.align-center{
  text-align: center;
}.align-center.color-white{
  color: var(--white);
}.svh-shema{
  margin-top: .35vw;
}.middle{
  flex-flow: row;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-top: 3.472vw;
  display: flex;
}.middle.row{
  flex-flow: column;
  height: auto;
  margin-top: 0;
}.middle.row.pading{
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
}.middle.bot{
  justify-content: space-between;
  align-items: flex-end;
  height: auto;
}.middle.bot.special{
  width: 100%;
  margin-top: -13.8vw;
}.middle.first{
  justify-content: flex-end;
  align-items: center;
  margin-left: 5.556vw;
}.middle.lastt{
  margin-top: 0;
}.svg-line{
  width: 3.819vw;
  color: var(--white);
  justify-content: center;
  display: flex;
}.svg-line.one{
  margin-right: -6.5vw;
}.svg-line.two{
  margin-left: -4.736vw;
}.svg-line.last-first{
  margin-top: 3.472vw;
}.circle-anim{
  border-radius: 50%;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 25vw;
  height: 25vw;
  padding: var(--space-m);
  display: flex;
  position: relative;
}.div-block-4{
  justify-content: space-between;
  display: flex;
}.div-block-5{
  grid-column-gap: 1.042vw;
  grid-row-gap: 1.042vw;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #ffffff0f;
  justify-content: center;
  align-items: center;
  height: 2.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
  display: flex;
}.small-circle-anim{
  border-radius: 50%;
  width: 13.889vw;
  height: 13.889vw;
  position: relative;
}.div-block-7{
  justify-content: center;
  align-items: flex-end;
  display: flex;
}.v-line{
  opacity: .7;
  background-color: #71adcf;
  width: 1px;
  height: 100%;
}.s-line{
  background-color: #fff6;
  width: 1.042vw;
  height: 1px;
  padding-bottom: 0;
}.s-line.color-blue{
  background-color: #5ea8ffbf;
  margin-top: -.25vw;
}.h-slide--info{
  background-color: var(--white);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  height: 100%;
  margin-left: 50%;
  padding: var(--space-l) var(--space-l) 1.556vw;
  display: flex;
  position: absolute;
  bottom: auto;
  transform: translate(-50%, 110%); border-radius: var(--radius-m);}.info--top{
  grid-column-gap: 2.083vw;
  grid-row-gap: 2.083vw;
  flex-flow: column;
  display: flex;
}.content-slide__list{
  grid-column-gap: .7vw;
  grid-row-gap: .7vw;
  flex-flow: column;
  min-width: 20vw;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}.content-hslide__list{
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  flex-flow: column;
  min-width: 21vw;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}.info-bot{
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}.shema-tag{
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: var(--step-micro);
  font-weight: 500; line-height: 1.4; letter-spacing: var(--tracking-micro);}.shema-tag.center{
  text-align: center;
}.shema-tag.center.marg{
  margin-top: 2.5vw;
}.shema-tag.margin{
  margin-bottom: -.6vw;
}.last{
  margin-top: 1.5vw;
}.line--btn{
  width: 4.167vw;
  height: 1px;
}.button-small__arrow{
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  width: 3.472vw;
  height: 3.472vw;
  color: var(--white);
  background-color: #ffffff1a;
  border-radius: 50vw;
  justify-content: center;
  align-items: center;
  transition: transform .35s cubic-bezier(.77, 0, .175, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}.button-small__arrow.left{
  margin-right: -.3vw;
}.button-small__arrow.left.bg-white{
  background-color: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--oragne);
}.button-small__arrow.right{
  margin-left: -.3vw;
}.button-small__arrow.right.bg-white{
  background-color: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--oragne);
}.section-expertise{
  margin-top: 6.944vw;
}.expertise__item{
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 34vw;
  padding: var(--space-l) var(--space-m) var(--space-m);
  display: flex;
  position: relative; border-radius: var(--radius-m);}.expertise__list{
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-items: stretch stretch;
  gap: 0 1.389vw;
  display: grid;
}.side-divider{
  background-color: var(--hairline);
  width: 1px;
  height: 90%;
  position: absolute;
  inset: 50% 0% 0% 102%;
  transform: translate(0, -50%);
}.top-divider{
  background-color: var(--hairline);
  width: 90%;
  height: 1px;
  position: absolute;
  inset: 0% 0% auto 50%;
  transform: translate(-50%);
}.bot-divider{
  background-color: var(--hairline);
  width: 90%;
  height: 1px;
  position: absolute;
  inset: auto 0% 0 50%;
  transform: translate(-50%);
}.expertise__svg-block{
  height: 12.5vw;
}.expertise__text-block{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  color: var(--black);
  flex-flow: column;
  display: flex;
}.expertise__link-block{
  grid-column-gap: .694vw;
  grid-row-gap: .694vw;
  color: var(--oragne);
  letter-spacing: .035vw;
  text-transform: uppercase;
  justify-content: flex-start;
  align-items: flex-start;
  width: fit-content;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}.expertise__link-text{
  font-size: var(--step-micro); line-height: 1.4; letter-spacing: var(--tracking-micro);}.arrow-link{
  width: .486vw;
  height: .486vw;
}.slide-title{
  line-height: .8;
}.nav-list{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  flex-flow: column;
  display: flex;
}.nav--dropdown{
  background-color: #ffffff1a;
}.nav--dropdown.nav-dropdown--offre{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  opacity: 0;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  pointer-events: none;
  flex-flow: column;
  width: 100%;
  padding: 2.5vw var(--space-s) 1vw;
  display: flex;
  position: absolute;
  inset: 110% auto auto 0%;
}.nav--dropdown.nav-dropdown--expertise{
  grid-column-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  grid-row-gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  opacity: 0;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  pointer-events: none;
  flex-flow: column;
  width: 100%;
  padding: 2.5vw var(--space-s);
  display: flex;
  position: absolute;
  inset: 110% auto auto 0%;
}.nav-dropdown__link.split-nav{
  color: var(--white);
  font-size: var(--step-m);
  line-height: 1.25;
  text-decoration: none; letter-spacing: var(--tracking-tight);}.no-marg{
  width: 0;
  height: 0;
  margin-bottom: 0;
}.h-line-mobile{
  background-color: var(--white);
  mix-blend-mode: overlay;
  width: 100%;
  height: 1px;
}.h-line-mobile.on-mobile{
  display: none;
}.logo-mobile{
  width: 45vw;
}.footer-mobile{
  display: none;
}.nav--buttons{
  justify-content: flex-start;
  align-items: center;
  display: flex;
}.nav--lang{
  z-index: 2;
  width: fit-content;
  margin-right: -2vw;
  display: flex;
  position: relative;
}.use-case__block-top{
  grid-column-gap: .694vw;
  grid-row-gap: .694vw;
  flex-flow: column;
  display: flex;
}.body{
  background-color: var(--white);
}.nav-lang{
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 0;
  padding: 0;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  position: static;
}.nav-lang.color-black,.nav-lang.color-black.w--current{
  color: var(--black);
}.nav-lang.color-white{
  color: var(--white);
}.nav-lang.color-white.hide{
  position: absolute;
  top: 100%;
  left: 0;
}.nav-lang.color-white.center{
  text-align: center;
}.nav-lang.hide{
  position: absolute;
}.nav-lang.hide.color-white{
  transform: translate(0, 20%)rotate(3deg);
}.nav-lang.min-w{
  min-width: 23.264vw;
}.nav-lang.one{
  margin-top: 4.861vw;
}.nav-lang.color-orange{
  color: var(--oragne);
}@media screen and (max-width: 479.98px){body{
    background-color: var(--black);
  }h2{
  }h3{
  }h4{
  }h5{
    margin-top: 0;
    margin-bottom: 0;
  }strong{
  }.container{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }.container.full-page.home-hero{
    justify-content: flex-start;
    align-items: stretch;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }.container.is-mobile{
    padding-left: 0;
    padding-right: 0;
  }.container.no-mobile{
    display: none;
  }.background{
    height: 100vh;
    min-height: 100dvh;
  }.button-big,.nav--item,.nav--button{
    display: none;
  }.button-small__center{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    height: 14.925vw;
    padding-left: 4.975vw;
    padding-right: 4.975vw;
  }.item--marquee{
    padding-top: 24.876vw;
    padding-bottom: 24.876vw;
  }.marquee__text{
  }.marquee__text.no-upp{
  }.marquee__text.no-upp.load-split{
  }.marquee__svg{
    justify-content: center;
    align-items: center;
    height: 7vw;
    margin-bottom: 1.5vw;
    margin-right: 11vw;
    padding-left: 7vw;
  }.logo{
    width: 29.851vw;
  }.logo.nav__link{
    width: 30.1vw;
    height: 9vw;
  }.grid-container{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    padding-top: 9.95vw;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }.grid-container.big-margin{
    padding-top: 24.876vw;
    padding-left: 0;
    padding-right: 0;
  }.grid-container.margin-s{
    margin-top: 24.876vw;
  }.grid-container.no-padd{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }.grid-container.no-padd.gap-2x{
    padding-top: 9.95vw;
  }.grid-container.no-padd.no-grid{
    flex-flow: column;
    display: flex;
  }.grid-container.no-pad-top{
    width: 100%;
  }.grid-container.no-pad-top.no-grid{
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    padding-top: 29vw;
    display: flex;
  }.grid-container.on-mobile{
    padding-left: 0;
    padding-right: 0;
    display: block;
  }.card-container{
    padding-top: 9.95vw;
  }.horizontal-section{
    flex-flow: column;
    height: auto;
    margin-top: 0;
    position: relative;
  }.track{
    flex-flow: column;
    height: auto;
  }.track.o-design{
    flex-flow: row;
    justify-content: flex-start;
    align-items: stretch;
  }.horizontal-wrapper{
    height: auto;
  }.h-slide{
    flex: none;
    height: 90vh;
    padding-top: 14.925vw;
    padding-bottom: 9.95vw;
  }.h-slide.side{
    height: 70vh;
    padding-top: 9.95vw;
    padding-bottom: 9.95vw;
  }.h-slide.h-slide--schema{
    flex: 0 0 130vw;
    width: 130vw;
    height: 80vh;
  }.spacer{
    height: 49.751vw;
  }.rel{
    text-align: center;
    flex-flow: column;
    align-items: center;
    margin-bottom: 24.876vw;
    display: flex;
  }.text-span-2{
    padding-left: 0;
  }.last-section.bg-white{
    z-index: 99;
  }.section__intro-text{
  }.section-values{
    padding-top: 37.313vw;
  }.section-values.margin-s{
    padding-top: 24.876vw;
  }.value-list{
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-left: 4.975vw;
    padding-right: 4.975vw;
    overflow: auto;
  }.value-item.top-align{
    scroll-snap-align: center;
    flex: none;
    width: 69.652vw;
    min-height: 99vw;
    padding: 9.95vw 4.975vw;
  }.value-divider{
    flex: none;
    height: 99vw;
    display: block;
  }.value-divider.blend-overlay{
    justify-content: center;
    align-items: center;
    height: 110vw;
    display: block;
  }.value-divider.no-mobile{
    display: none;
  }.value-icon{
    height: 44.776vw;
    min-height: 44.776vw;
  }.use-case__wrapper{
    padding-bottom: 49.751vw;
  }.use-case__list{
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    justify-content: flex-start;
    align-items: stretch;
    padding-left: 4.975vw;
    padding-right: 4.975vw;
    overflow: auto;
  }.use-case__item{
    scroll-snap-align: center;
    flex: none;
    width: 75.124vw;
  }.use-case__block{
  }.use-case__block.color-white{
    width: 75.124vw;
  }.use-case__img-item{
    aspect-ratio: 5 / 6;
  }.h-line.on-mobile{
    mix-blend-mode: overlay;
    display: block;
  }.subtitle-in-text{
    margin-bottom: 4.975vw;
  }.use-case-text{
    max-width: 60vw;
  }.footer-text-container{
  }.footer-bot-info{
  }.top.top-circle{
    padding-top: 0;
    padding-bottom: .6vw;
  }.top.center{
  }.top.top-slide-mobile{
    flex-flow: column-reverse wrap;
    flex: 1;
    justify-content: space-between;
    align-items: flex-start;
  }.navigation{
    padding: 4.975vw 7.463vw 4.975vw 4.975vw;
  }.div-block.home-margin.follow-section{
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 29.851vw;
    position: static;
  }.h-arrow{
    width: 2.985vw;
  }.section-hero-bis{
    height: 99vh;
  }.title-cont{
    height: 161.692vw;
  }.abs.load-split{
    min-width: 70vw;
    margin-top: 37.313vw;
    margin-left: 4.975vw;
    left: 0;
    right: auto;
  }.test-blend-mode.bot-left.bg-white{
    padding-bottom: 7.463vw;
    padding-left: 4.975vw;
  }.content-slide.bg-white{
    padding-top: 4.975vw;
    padding-bottom: 22.438vw;
    padding-left: 4.975vw;
  }.left.clipping-text{
  }.right.right-align{
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
  }.right.marg-left{
    margin-left: auto;
  }.number{
    letter-spacing: -2.587vw;
    -webkit-text-stroke-width: 1px;
  }.bot{
    flex-flow: column;
    justify-content: flex-end;
    align-items: stretch;
  }.bot.center{
    align-items: center;
  }.bot.clipping-text.nav{
    height: 40%;
    min-height: 40%;
    max-height: 40%;
  }.bot.cards{
  }.max-w.claim-s.color-black{
    max-width: 80vw;
  }.bg-white.offre-last{
    padding-top: 37.313vw;
  }.center-text{
  }.first-slide{
    height: 100dvh;
    padding: 0;
  }.second-slide{
    padding: 24.876vw 7.463vw;
  }.div-block-2{
  }.div-block-2.no-mw{
    justify-content: flex-start;
    align-items: center;
  }.claim-m{
  }.claim-s{
  }.claim-s.max-w-footer.split,.claim-s.max-w-footer.expertise-split{
    max-width: 70%;
  }.manifesto{
  }.nav-tag{
  }.nav-tag.one{
    margin-top: 12.438vw;
  }.btn-s{
  }.value-text{
  }.value-p{
    padding-right: 0;
  }.right-align{
    align-items: stretch;
  }.test{
    width: 89vw;
    bottom: 29.851vw;
  }.link-block.no-mobile{
    display: none;
  }.link-block.last-link,.link-block.ml-link{
    opacity: .6;
  }.no-scroll{
    overflow: auto;
  }.intro-header{
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 0;
  }.min-w.load-split{
    width: 60vw;
  }.tag{
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    place-items: start;
    margin-top: 17.413vw;
    margin-bottom: 9.95vw;
    display: flex;
  }.tag-case{
    white-space: nowrap;
  }.info-case{
    flex-flow: column;
  }.info-case__item{
    padding: 14.925vw 0;
  }.info-case__item.no-border-top{
    border-top-width: 0;
  }.info-case__item.no-border{
    margin-left: 4.975vw;
    margin-right: 4.975vw;
  }.info-case__list{
  }.collection-list-wrapper{
    padding-left: 4.975vw;
    padding-right: 4.975vw;
  }.collection-list-2{
  }.column-inner{
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }.full-page{
    justify-content: flex-end;
    align-items: stretch;
    padding-bottom: 31.95vw;
  }.tag-block{
    flex: none;
    width: fit-content;
    padding: 4.975vw;
  }.timeline-horizontal,.horizontal-text{
    display: none;
  }.middle.row.pading{
  }.middle.bot.special{
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -42.8vw;
  }.middle.first{
    margin-top: 4.4vw;
    margin-left: 3.556vw;
  }.svg-line{
    width: 9.95vw;
  }.svg-line.one{
    width: 16.169vw;
    margin-right: -23.5vw;
  }.svg-line.two{
    margin-left: -8.736vw;
  }.circle-anim{
    width: 80vw;
    height: 80vw;
    padding: 8.458vw;
  }.div-block-5{
    height: 7.96vw;
    padding-left: 3.234vw;
    padding-right: 3.234vw;
  }.small-circle-anim{
    width: 43.035vw;
    height: 43.035vw;
  }.v-line{
    height: 75vh;
  }.s-line{
    width: 3.234vw;
  }.s-line.color-blue{
    width: 3.234vw;
    margin-top: -.6vw;
  }.h-slide--info{
    width: 70%;
    padding: 7.463vw 7vw;
    transform: translate(-50%, 110%);
  }.info--top{
  }.content-slide__list{
  }.info-bot{
  }.shema-tag{
    font-size: var(--step-micro);
  }.shema-tag.center.marg{
    margin-top: 8.458vw;
  }.button-small__arrow{
    width: 14.925vw;
    min-width: 14.925vw;
    height: 14.925vw;
  }.button-small__arrow.left{
    margin-right: -.6vw;
  }.button-small__arrow.right{
    margin-left: -.6vw;
  }.section-expertise{
    margin-top: 14.925vw;
  }.expertise__item{
    scroll-snap-align: center;
    min-width: 80vw;
    min-height: 110vw;
    padding: 9.95vw 4.975vw;
  }.expertise__list{
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-left: 4.975vw;
    padding-right: 4.975vw;
    display: flex;
    overflow: auto;
  }.side-divider{
    left: 103%;
  }.expertise__svg-block{
    height: 44.776vw;
  }.expertise__text-block{
  }.expertise__link-block{
  }.expertise__link-text{
  }.arrow-link{
    width: 1.741vw;
    height: 1.741vw;
  }.div-block-8{
    height: 100vh;
    padding-bottom: 7.463vw;
    padding-left: 4.975vw;
    padding-right: 4.975vw;
  }.nav-mobile-panel{
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 17.91vw 4.975vw 7.463vw;
    display: flex;
  }.nav-mobile__list-link{
    flex-flow: column;
    align-items: flex-start;
    display: flex;
  }.nav-mobile__list-item{
    color: var(--black);
    font-family: 'Cabinet Grotesk', Arial, sans-serif;
    font-size: clamp(1.75rem, 8.706vw, 2.5rem);
    font-weight: 400;
    text-decoration: none;
  }.nav-mobile__link{
    color: var(--black);
    text-decoration: none;
  }.h-line-mobile.on-mobile{
    mix-blend-mode: normal;
    display: block;
  }.h-line-mobile.on-mobile.clipping-item{
    -webkit-text-fill-color: inherit;
    background-image: url("../img/nt-logo-texture.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
  }.logo-mobile{
    width: 90vw;
  }.nav-mobile__submenu.nav-mobile__submenu-offres,.nav-mobile__submenu.nav-mobile__submenu-expertise{
    background-color: var(--white);
  }.nav-mobile__submenu-back{
    height: 3vw;
    color: var(--oragne);
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: absolute;
    top: 7.711vw;
    left: 5.473vw;
  }.nav-submobile__list-link{
    flex-flow: column;
    align-items: flex-start;
    height: 50svh;
    display: flex;
    overflow: auto;
  }.nav-submobile__list-item{
    color: var(--black);
    font-family: 'Cabinet Grotesk', Arial, sans-serif;
    font-weight: 400;
    text-decoration: none;
  }.nav-submobile__link{
    color: var(--black);
    font-family: 'General Sans', Arial, sans-serif;
    font-weight: 500;
    text-decoration: none;
  }.submenu__block{
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 17.91vw 4.975vw 7.463vw;
    display: flex;
    position: relative;
  }.submenu-back{
    text-transform: uppercase;
    margin-top: .4vw;
    font-family: 'General Sans', Arial, sans-serif;
    font-size: var(--step-micro);
    font-weight: 600;
  }.svg-back{
    width: 3vw;
    height: 3vw;
  }.collection-item-2{
  }.footer-mobile{
    display: flex;
  }.nav--buttons{
    display: none;
  }.nav--lang{
    margin-right: 0;
  }.div-block-9{
    flex-flow: column;
    max-height: 50%;
    display: flex;
  }.nav-lang,.nav-lang.color-black.w--current{
    font-size: var(--step-micro);
  }.nav-lang.one{
    margin-top: 12.438vw;
  }
}#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf737-8b326cb4{
  grid-area: 1 / 7 / 2 / 13;
}#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf74e-8b326cb4{
  grid-area: 1 / 3 / 2 / 11;
}#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf7b3-8b326cb4{
  grid-area: 1 / 1 / 2 / 10;
}#w-node-_2690f36a-fdfc-f994-ece2-59160c882c29-0c882c27{
  grid-area: 1 / 9 / 2 / 13;
}#w-node-ee800743-e554-c0d6-9565-72a00bd7483c-68a27c80{
  grid-area: 1 / 8 / 2 / 13;
}#w-node-_12f0deca-9aed-1786-37dd-11a9e3539b1d-68a27c80{
  grid-area: 1 / 2 / 2 / 12;
}#w-node-_26077660-ff5d-a4b8-4c2a-f4cb7825458c-40100f8c{
  grid-area: 1 / 1 / 2 / 7;
}#w-node-_311f4a16-744a-bc1f-be1d-177f4ff0b649-40100f8c{
  grid-area: 1 / 10 / 2 / 13;
}#w-node-_271fda40-67c2-f836-30aa-5906f8b6f562-726c225f{
  grid-area: 1 / 3 / 2 / 11;
}#w-node-d06fef78-6912-e0ae-e768-e7c78c5742f4-726c225f{
  grid-area: 1 / 1 / 2 / 10;
}#w-node-a714a6b4-e177-6e76-2bc1-3542ea690147-56a682eb{
  grid-area: 1 / 8 / 2 / 12;
}#w-node-d37a2b33-8650-7c8e-52a5-6d64eb626cdb-56a682eb{
  grid-area: 1 / 3 / 2 / 11;
}#w-node-_9f197fe8-0ffb-fd25-e89f-4aec9b561d56-9d872a11{
  grid-area: 1 / 2 / 2 / 7;
}#w-node-dc764a7d-0a5b-4e10-6fd6-70eac55e8c7a-9d872a11{
  grid-area: 1 / 8 / 2 / 12;
}#w-node-_971b34b4-3df6-6035-8d0b-0a77653bf4e7-9d872a11{
  grid-area: 2 / 6 / 2 / 10;
}#w-node-_3b3d2e60-95dd-ce88-8ae2-0809f710214d-9d872a11{
  grid-area: 1 / 1 / 2 / 10;
}#w-node-_4a00765e-71af-2fb5-3e30-8f0723220c00-59704e63{
  grid-area: 1 / 1 / 2 / 7;
}#w-node-b01c6dd6-69de-3abc-815b-19aee8a30716-59704e63{
  grid-area: 1 / 1 / 2 / 2;
}#w-node-cd14e1c2-160e-f3dd-5bcd-b2740e0c51d8-59704e63{
  grid-area: 2 / 1 / 3 / 2;
}#w-node-_29d05b2f-3b49-1bbb-d17e-dfbfa4a4aec2-59704e63{
  grid-area: 3 / 1 / 4 / 2;
}#w-node-_627b7aec-8061-1a08-0a26-44687a4bca0b-59704e63{
  grid-area: 1 / 2 / 4 / 3;
  align-self: stretch;
}#w-node-_4a00765e-71af-2fb5-3e30-8f0723220c08-59704e63{
  grid-area: 4 / 1 / 5 / 2;
}#w-node-_9ca2c7cb-9c13-b6ae-7cbd-77ab0c53f21d-36478e7a{
  grid-area: 1 / 10 / 2 / 13;
}#w-node-_9e49c91f-2469-0e98-c578-2d192ee8a121-36478e7a{
  grid-area: 1 / 1 / 2 / 7;
}#w-node-_10de4557-9562-469f-1a57-85ee3beae446-36478e7a{
  grid-area: 1 / 7 / 2 / 13;
}#w-node-_3ca2a343-8885-8e0c-818a-f99971c5347a-36478e7a{
  grid-area: 1 / 5 / 2 / 9;
}#w-node-fa558db9-23dd-0c38-e5e9-6ebf48f4ae51-36478e7a{
  grid-area: 1 / 1 / 2 / 7;
}#w-node-_1465f352-8dd7-b1d0-d390-e117735b3de2-ca4d2c39{
  grid-area: 1 / 5 / 2 / 9;
}#w-node-_4e058f7f-dee6-6d29-6bc8-099482e65d68-ca4d2c39{
  grid-area: 1 / 1 / 2 / 7;
}#w-node-_1b2354f1-1adc-e788-6d6a-d48419e77dda-ca4d2c39{
  grid-area: 2 / 6 / 3 / 11;
}#w-node-_4466da10-d8b8-97b2-73dd-95e014f3bbe6-ca4d2c39{
  grid-area: 2 / 6 / 3 / 8;
}#w-node-_8675fe22-e801-0f93-bf62-4addd71d9629-a60e2e1f{
  grid-area: 1 / 3 / 2 / 11;
}@media screen and (max-width: 479.98px){#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf737-8b326cb4{
    grid-area: 2 / 1 / 3 / 6;
  }#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf74e-8b326cb4{
    grid-column: 1 / 7;
  }#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf7b3-8b326cb4,#w-node-_2690f36a-fdfc-f994-ece2-59160c882c27-0c882c27{
    grid-column-end: 6;
  }#w-node-_2690f36a-fdfc-f994-ece2-59160c882c29-0c882c27{
    grid-area: 1 / 1 / 2 / 6;
  }#w-node-_12f0deca-9aed-1786-37dd-11a9e3539b1d-68a27c80{
    grid-column: 2 / 6;
  }#w-node-_26077660-ff5d-a4b8-4c2a-f4cb7825458c-40100f8c{
    grid-column-end: 6;
  }#w-node-_311f4a16-744a-bc1f-be1d-177f4ff0b649-40100f8c{
    grid-area: 2 / 1 / 3 / 6;
  }#w-node-_271fda40-67c2-f836-30aa-5906f8b6f562-726c225f,#w-node-a714a6b4-e177-6e76-2bc1-3542ea690147-56a682eb,#w-node-d37a2b33-8650-7c8e-52a5-6d64eb626cdb-56a682eb{
    grid-column: 1 / 7;
  }#w-node-_9f197fe8-0ffb-fd25-e89f-4aec9b561d56-9d872a11{
    grid-column-start: 1;
  }#w-node-dc764a7d-0a5b-4e10-6fd6-70eac55e8c7a-9d872a11{
    grid-area: 2 / 1 / 3 / 7;
    justify-self: center;
  }#w-node-_971b34b4-3df6-6035-8d0b-0a77653bf4e7-9d872a11{
    grid-area: 3 / 1 / 4 / 7;
    justify-self: center;
  }#w-node-_4a00765e-71af-2fb5-3e30-8f0723220c00-59704e63{
    grid-area: span 1 / span 6 / span 1 / span 6;
    place-self: stretch stretch;
  }#w-node-_627b7aec-8061-1a08-0a26-44687a4bca0b-59704e63{
    grid-area: 4 / 1 / 5 / 2;
  }#w-node-_7be398b2-2737-56cc-dbfa-5b906561c7a4-59704e63{
    grid-area: 5 / 1 / 6 / 2;
  }#w-node-_4e058f7f-dee6-6d29-6bc8-099482e65d68-ca4d2c39{
    grid-area: 1 / 1 / 2 / 7;
  }#w-node-_1b2354f1-1adc-e788-6d6a-d48419e77dda-ca4d2c39{
    grid-column: 1 / 7;
  }
}


/* ============ v2 surface layer ============ */

/* cards: rounded, gold hairline, restrained hover - the donor cards have none */
.use-case__block{
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-m);
  padding: var(--space-s);
  background-color: rgba(255,255,255,.02);
  transition: border-color .45s ease, background-color .45s ease, transform .45s ease;
}
.use-case__block:hover{
  border-color: var(--hairline-gold-strong);
  background-color: rgba(255,255,255,.045);
}
.use-case__img-container,.use-case__img-mask{ border-radius: var(--radius-s); overflow: hidden; }
/* translateZ(0) rasterises the panel into its own texture once. Without it the
   hover scale re-rasterises a 1000+ path SVG on every frame of the transition;
   with it, the compositor just re-samples the bitmap. */
.use-case__img-item{
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.use-case__block:hover .use-case__img-item{ transform: scale(1.03) translateZ(0); }

/* the workflow steps read as panels rather than ruled columns */
.value-item{
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-s);
}
.value-item__line{ display: none; }
.value-divider{ display: none; }

/* marquee bands get a hairline rule top and bottom */
.item--marquee{
  border-top: 1px solid var(--hairline-gold);
  border-bottom: 1px solid var(--hairline-gold);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* alternating ground, so the dark stretches have a rhythm */
.footer{ background-color: var(--navy-alt); }
.container.before-horizontal{ background-color: var(--navy-alt); }

/* the hero canvas sits in a rounded well rather than bleeding to the edges */
.background{ border-radius: var(--radius-m); overflow: hidden; }


/* ============ v2 navigation ============ */

.navigation{
  height: 4.5rem;
  padding: 0 var(--space-m);
  gap: var(--space-l);
  justify-content: flex-start;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}

/* wordmark pinned left. on the home page the hero wordmark flies into this slot
   and hands off to it (home-hero-wordmark.js drives the opacity); everywhere
   else it is simply always on. */
/* no opacity transition here on purpose - the handoff is scrubbed frame by
   frame, and a CSS transition would restart on every one of those frames. */
.nav--logo{ margin-right: auto; display: flex; align-items: center; }

/* the hero wordmark in transit: centre of the viewport -> bottom-left of the
   hero -> this nav slot. Fixed, so it sticks to the top once it lands. Above
   the nav (999) so it reads over the scrim on the way in; it fades out at the
   end and the real nav logo takes over. */
.hero-wordmark-flier{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
.hero-wordmark-flier svg{ display: block; width: 100%; height: auto; }
/* never let it sit over the open mobile menu */
body.no-scroll .hero-wordmark-flier{ opacity: 0 !important; }
.logo{ width: 6.25rem; color: currentColor; }

/* links sit against the CTA on the right rather than floating centre-left */
.nav--item{
  margin-left: auto;
  gap: var(--space-m);
  padding: 0;
  justify-content: flex-end;
}
.nav--buttons{ gap: var(--space-s); }

/* a permanent scrim instead of a scroll-triggered panel: the nav sits over both
   the navy hero and the white section, and this reads correctly on both without
   depending on a scroll class. The donor nav is fully transparent with no rule. */
.navigation{
  background-image: linear-gradient(to bottom, rgba(2,24,51,.82) 0%, rgba(2,24,51,.55) 55%, rgba(2,24,51,0) 100%);
  border-bottom-color: transparent;
}
.navigation.is-on-white{
  background-image: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,0) 100%);
  border-bottom-color: var(--hairline-gold);
}

/* CTA: gold outline on transparent, no circled-arrow satellite */
.button-small__center{
  background-color: transparent;
  border: 1px solid var(--hairline-gold-strong);
  border-radius: var(--radius-pill);
  height: 2.5rem;
  padding: 0 var(--space-s);
  color: inherit;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.button-small:hover .button-small__center{
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.button-small__arrow{ display: none; }

/* The donor CTA slid the centre pill sideways on hover to make room for a
   circled arrow swapping from one end to the other. v2 drops the arrows, so
   that translate has nothing to trade places with - it just shunted the pill
   3.472vw right, and since this CTA is the last thing in the nav it went off
   the right edge of the screen. Neutralise every variant of the shift; the
   hover is the gold fill above.
   The class is doubled to out-specify the per-page inline <style> block, which
   sits in the body and so wins on document order otherwise - same trick as
   .button-small__center.button-small__center further up this file. */
.button-small.button-small .button-small__center,
.button-small.button-small:hover .button-small__center,
.button-small.button-small.is-footer-variant .button-small__center,
.button-small.button-small.is-footer-variant:hover .button-small__center{
  transform: none;
}

/* the cursor-following hero button picks up the same language */
.button-big__content{
  border-radius: var(--radius-pill);
  height: auto;
  padding: var(--space-xs) var(--space-m);
}

@media screen and (max-width: 991px){
  .navigation{ height: 4rem; padding: 0 var(--space-s); }
  .logo{ width: 5.5rem; }
}
@media screen and (max-width: 479.98px){
  .navigation{ height: 3.5rem; }
  .logo{ width: 5rem; }
}

/* ============ v2 mobile corrections ============ */

/* v5 note: every *type* rule that used to live in this section has been
   removed. Each one existed to rein in a donor `vw` font-size that no longer
   exists - `.marquee__text` at 14.925vw, `.manifesto` at 7.463vw, the timeline
   `h2` at 14.428vw. With the donor values gone the corrections stopped being
   corrections and became the cliff themselves: every one of them grows with
   the viewport up to 479 and then drops at 480, where the token floor takes
   over. Measured before removal, at 479 -> 480:

       .marquee__text   52.0 -> 36    .manifesto              30.6 -> 28
       .h-slide h2      43.1 -> 36    .h-slide--schema h3     25.6 -> 20

   The token floors (display 36, statement 28, l 24, m 19) are the mobile
   values now, so all four are flat across the boundary. What stays here is the
   layout half of the fix - letting the fixed-height schema row grow - which is
   about the panel box, not the donor type scale, and is still needed. */
@media screen and (max-width: 991px){
  /* The schema stage headings run to two lines but sit in a fixed-height row,
     so the text spilled out of the panel. Inherited from the donor layout;
     the looser v2 leading made it a few px worse. Let the row grow.
     At <=991 rather than <=479: the panel is narrow across that whole band,
     and the donor sizes these with three-class selectors, so this needs to be
     at least as specific to win. */
  .h-slide--schema .top.row,
  .h-slide--schema .top.row.min-height{ min-height: 0; height: auto; align-items: flex-start; }
  .h-slide--schema h3.align-center.color-white{
    font-size: clamp(1.25rem, 3.2vw, 1.75rem);
    line-height: 1.15;
  }
}
@media screen and (max-width: 479.98px){
  /* leading only - the sizes come from the ladder now */
  .h-slide h2,
  .h-slide .home-h2{ line-height: 1.05; }
}

/* The marquee track is deliberately wider than the viewport; clip it so it does
   not push the page into horizontal scroll at tablet widths. */
.item--marquee{ overflow: hidden; }

/* Below the desktop breakpoint the burger is the navigation, so the inline link
   row must step aside. Without this it stays in flow, and the right-aligned
   layout pushes the burger past the viewport edge - which is what put 8px of
   horizontal overflow on the page at tablet width. */
@media screen and (max-width: 991px){
  .navigation{ gap: var(--space-s); }
  .nav--item{ display: none; }
  .nav-burger{ margin-left: auto; }
}

/* The v2 spacing ladder is more generous than the vw values it replaced, which
   widened the horizontal-scroll slides enough to push the track past the
   viewport at tablet. Tighten the slide padding below the desktop breakpoint. */
@media screen and (max-width: 991px){
  .h-slide{ padding: var(--space-m) var(--space-m) var(--space-s); }
  .h-slide.side{ padding-bottom: var(--space-m); }
}

/* Clip the horizontal track's residual few px at tablet. `clip` rather than
   `hidden` on purpose: `hidden` would make this a scroll container and break the
   position:sticky pin that drives the horizontal section. */
@media screen and (max-width: 991px){
  .horizontal-section{ overflow-x: clip; }
}

/* ============ v3 approach section ============ */

/* The approach panel is one full screen: the rule and the manifesto at the top,
   the trajectory line resting clear of the bottom edge. The donor built it as
   an auto-height stack with a fixed 19vw .spacer doing all the pushing, which
   both overshot 100vh and left the trajectory copy hard against the fold. The
   card block grows into whatever is left instead, so the bottom padding is a
   real gap at any height. min-height rather than height: nothing should be
   clipped if the copy wraps to more lines on a narrow screen. */
.container.before-horizontal{
  min-height: 100vh;
  flex-flow: column;
  display: flex;
  padding-bottom: var(--space-xl);
}
.container.before-horizontal .card-container{
  flex: 1 0 auto;
  padding-top: var(--space-l);
}
.container.before-horizontal .spacer{ display: none; }
.container.before-horizontal .horizontal-text-pin{ padding-top: var(--space-m); }


/* ============ v4 spatial system ============ */

/* The nav sits on the same page edge as everything under it. Without this the
   wordmark starts 2rem in while the content starts at --gutter, and the two
   left edges disagree at every width. */
.navigation{ padding: 0 var(--gutter); }

/* Section bands get their vertical rhythm from one token rather than each
   picking a --space-* off the ladder. The donor's values ranged from 0 to
   7.5rem with no pattern, which is the other half of why the page read as
   scattered: nothing lined up vertically either. */
.section-values{ padding-top: var(--section-y); }
.section-values.margin-s{ padding-top: var(--section-y); }
.use-case__wrapper{ padding-bottom: var(--section-y); }
.last-section > .grid-container:first-child{ padding-top: var(--section-y); }

/* The marquee is a band, so it needs air on both sides of its rules. It
   carried a gold hairline top and bottom with zero margin, which put those
   rules hard against the cards above and below - three lines competing for the
   same edge. */
.item--marquee{
  margin-top: var(--section-y);
  margin-bottom: var(--section-y);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
/* "The team" heads the section under it, so it travels with that section
   rather than floating midway between two. */
.last-section > .section-title{
  margin-top: var(--section-y);
  margin-bottom: var(--space-l);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


/* ============ v4 typographic hierarchy ============ */

/* The missing tier. Every section led with a 12px tracked label and then went
   straight to body copy, so the eyebrow was doing a title's job at a caption's
   size. .nav-tag stays exactly as it is - it is a good eyebrow - and this sits
   under it as the actual heading. */
.section-title{
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-display);
  font-weight: 300;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.section-title.color-black{ color: var(--navy); }
/* The nanotechnology Method heading sits on the navy field of the pinned
   horizontal section and inherited the body navy, so it rendered navy on navy
   and the word was invisible. There was no white variant to reach for. */
.section-title.color-white{ color: var(--white); }

/* The trajectory line: the donor indented its first line with a 6vw padded
   span, so the paragraph started a third of the way in and every line after it
   ran back to the margin - a ragged block with no left edge. The label sits
   above the copy instead. */
.subtitle-in-text{ margin-bottom: var(--space-2xs); }
.text-span-2{ padding-left: 0; }
.horizontal-text-pin .manifesto{ max-width: 46ch; }
/* the donor put this cell in grid column 3, so the trajectory block started
   215px inboard of the section title above it - two left edges in one panel */
#w-node-f795206b-cfea-47c2-42e7-3d1c4abaf74e-8b326cb4{ grid-column: 1 / 9; }

/* Card titles sat at 16px/400 directly above body at 16px/300 - a weight step
   with no size step, which is not a hierarchy. Give them a real size above
   the copy they head. */
h4, .use-case-h4{
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-m);
  font-weight: 500;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}
.use-case-text{
  font-size: var(--step-body);
  line-height: var(--leading-body);
  max-width: 34ch;
}
/* the numeral above each workflow step is a label, not a heading */
.value-item .nav-tag{ margin-bottom: var(--space-2xs); }

/* The hero claim was a 22px line crushed into a 174px column hard against the
   right gutter, reading as a caption. It is the only copy in the hero besides
   the wordmark, so it carries weight: a wider measure, a real display size,
   and dropped down the hero so it counterweights the wordmark instead of
   hanging off the top corner. */
.home-hero .div-block.home-margin.follow-section{
  /* the hero container already carries the gutter - this was adding a second
     one, which is why the claim stopped 173px short of the right edge while
     everything else stopped at 86 */
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  /* Bottom-right, opposite the wordmark's bottom-left. An auto top margin
     rather than flex-grow: the hero is a space-between column, and .home-margin
     already contributes a 90px top margin, so a growing first child overshoots
     100vh and pushes the wordmark's layout slot out of the hero - which is the
     slot the flier animation measures its resting corner from. */
  flex: 0 1 auto;
  margin-top: auto;
  margin-bottom: var(--space-l);
}
.home-hero .claim-m{
  font-size: var(--step-l);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  text-align: right;
}


/* ============ v4 component fixes ============ */

/* The hero cursor button. The v2 override took the fixed height off
   .button-big__content, which left .circle-big's 4.167vw width with nothing to
   square it - so the arrow rendered as a long flat bar trailing off the side of
   the pill. One pill now holds both, arrow immediately after the label. */
.button-big__content{
  gap: var(--space-xs);
  white-space: nowrap;
}
.button-big__svg{ width: .625rem; height: .625rem; flex: none; }
.button-big__svg svg{ width: 100%; height: 100%; display: block; }

/* Below 991px .nav--item is hidden, which left .nav--buttons floating between
   the logo's margin-right:auto and the burger's margin-left:auto - dead centre
   of the bar. The CTA belongs next to the burger. */
@media screen and (max-width: 991px){
  .nav--buttons{ margin-left: auto; }
  .nav-burger{ margin-left: var(--space-s); }
}

/* The nav link row lit up with a translucent blurred panel behind all five
   links at once - a heavy, imprecise hover that also kept a backdrop-filter
   painting on every frame. The hover belongs on the link you are actually
   pointing at. */
.navigation .nav--item::before{ display: none; }
.navigation .nav-link{
  position: relative;
  transition: opacity .28s cubic-bezier(.22,.61,.36,1);
}
.navigation .nav--item > .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.4em;
  height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.navigation .nav--item > .nav-link:hover::after{ transform: scaleX(1); }
.navigation .nav--item:hover > .nav-link:not(:hover){ opacity: .55; }

/* The footer was a fixed 100vh with space-between, which parked a ~280px dead
   band between the CTA and the bottom row at desktop heights. Let it size to
   its content on the section rhythm instead. */
.footer{
  height: auto;
  min-height: 100vh;
  padding: var(--section-y) var(--gutter) var(--space-xl);
  justify-content: flex-start;
  gap: var(--section-y);
}
/* the footer already carries the gutter, so its grid must not add a second */
.footer .grid-container{ padding-top: 0; padding-left: 0; padding-right: 0; }
.footer .bot{ margin-top: auto; }
/* The CTA block sat in grid column 9, so the footer had two left edges: the
   wordmark and the holding line on the gutter, and the "material challenge"
   copy floating out on the right. One left edge. */
#w-node-_2690f36a-fdfc-f994-ece2-59160c882c29-0c882c27{ grid-column: 1 / 7; }

/* ---- landing timeline card, box only ----
   The card is an object on the navy, not the ground: 40vw wide, capped at 34rem
   and centred in the track, so the network reads around all four sides. This is
   sizing and nothing else - the composition inside the card is the donor's and
   stays as it is (52px padding, copy pinned to the top edge, year + title pinned
   to the bottom at display size, 16px corners, no hairline).

   Two exclusions. .h-slide--schema is the nanotechnology method panel, which is
   full-height by design and carries its own block further down; it must not
   inherit a 34rem cap or its figure and `+` button start colliding again. And
   .track.o-design is that same section's track, which centres nothing.

   Bounded at 480 because the donor's own mobile rules (`.h-slide{height:90vh}`,
   the 130vw schema panel) take over below that and are lower specificity than
   the :not() here - unscoped, this would silently override them. */
@media screen and (min-width: 480px){
  .h-slide:not(.h-slide--schema){
    flex: 0 0 40vw;
    height: min(100%, 34rem);
    align-self: center;
  }
  .h-slide.side{ flex: 0 0 20vw; height: 100%; }
  .track:not(.o-design){ align-items: center; }
}
@media screen and (min-width: 480px) and (max-width: 991px){
  .h-slide:not(.h-slide--schema){ flex: 0 0 52vw; }
  .h-slide.side{ flex: 0 0 16vw; }
}

/* The spacer slides between the cards repeated the word "Timeline" top and
   bottom, six times across the track, saying nothing the 2022/2024/2026 dates
   on the cards do not already say. The glyph alone carries the interval. */
.h-slide.side .slide-side__content .nav-tag{ display: none; }
.h-slide.side .slide-side__content{ justify-content: center; }

/* Five workflow steps and four use-case cards in one nowrap row is a desktop
   composition. Below the desktop breakpoint they were being squeezed under
   their own min-content width, which is what pushed the page into horizontal
   scroll at 768 - the overflow the README logged as 8px and never traced.
   Let them wrap instead of forcing one row. */
@media screen and (max-width: 991px){
  .value-list,
  .use-case__list{ flex-wrap: wrap; }
  .value-item{ flex: 1 1 calc(50% - var(--space-s)); }
  .use-case__item{ flex: 1 1 calc(50% - var(--space-s)); }
}
@media screen and (max-width: 479.98px){
  .value-item,
  .use-case__item{ flex: 1 1 100%; }
  .value-item{ min-height: 0; }
}

/* v6: `.expertise__item:last-child .side-divider{ display:none }` stood here.
   It was the v4 fix for "an inherited 9px overflow at exactly 1280 on
   /en/nanotechnology", traced to .side-divider being a 1px rule pinned at
   left:102% of its card - correct in the gutter between two cards, 9px past
   the page after the last one in a row. The v6 card surface block at the foot
   of this file hides all three dividers outright, so the overflow no longer
   has a source and the patch has nothing left to patch. The `clip` below
   stays: it was always belt-and-braces, and its 479.98px reasoning is the
   reference for every boundary in this file.

   `clip` rather than `hidden` on the list, for the same reason as
   .horizontal-section above: hidden would make it a scroll container and
   break the sticky pins. */
/* v5: scoped to >=480. Unscoped, this beat the mobile carousel rule at :3076 -
   equal specificity, later in the file, and a media query adds none - which
   computed to overflow-x:hidden over a 986px-wide flex row in a 375px box. The
   list was not pannable, so cards 2..n were unreachable on every phone. The
   :last-child rule described above is what actually removed the 9px overflow;
   this was belt-and-braces and only ever needed to apply where the grid
   applies.

   Written as the negation of the mobile query rather than `min-width: 480px`:
   those two are only complements at *integer* viewport widths. Measured at a
   real 479px viewport with devicePixelRatio 2, the true width is 479.5, where
   `max-width:479px` is already false and `min-width:480px` is not yet true - a
   dead zone in which the donor's entire mobile stylesheet dropped out and the
   page rendered its desktop composition in a 479px window. Every `max-width`
   boundary in this file was moved to 479.98px for the same reason; as the exact
   negation of that, this pair cannot have a gap. */
@media not all and (max-width: 479.98px){
  .expertise__list{ overflow-x: clip; }
}


/* ============ v4 sub-page alignment ============ */

/* The discipline and branch pages run the same design system but were never
   given the page edge: their card grids and stacked slides sat full-bleed at
   left 0 while the nav, the section copy and the footer all sat on the gutter.
   Four different left edges on one page is the same dispersion the landing
   page had, so they get the same treatment. */
.expertise__list{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.mwg_effect031 .slide-content{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* A .container nested inside a block that already carries the gutter doubles
   it - the same fault the hero claim and the footer grid had. One page edge,
   set once, by the outermost container that asks for it. */
.container .container,
.footer .container,
.container .grid-container,
.bg-white .container .container{
  padding-left: 0;
  padding-right: 0;
}

/* the section bands on the sub-pages get the same vertical rhythm as the
   landing page rather than their own ad-hoc vw values */
.bg-white.offre-last{ padding-top: var(--section-y); }
.mwg_effect031{ padding-top: var(--section-y); }

/* ---- sub-page hero ----
   One full screen, composed rather than stacked at the edges.

   The fault was a unit mismatch: the section is 100vh but the white title
   block was 43.056vw. Those two diverge with aspect ratio, so on anything wide
   and short the white block nearly filled the section, the title ended up
   jammed on the white/navy seam with no breathing room, and the navy band
   below it collapsed to a sliver. Sizing the block as a fraction of the
   section keeps the composition at every aspect ratio. */
.section-hero-bis{
  width: 100%;
  min-height: 100vh;
  position: relative;
}
.title-cont{
  height: 72%;
  min-height: 20rem;
}
/* the title needs to sit above the seam, not on it */
.test-blend-mode.bot-left{
  padding-bottom: var(--space-xl);
  padding-right: var(--gutter);
}

/* The standfirst was absolutely positioned with a min-width and no max, so it
   ran as a single 16px line the full width of the page. It is the first thing
   read on the page - give it a measure and a size that says so. */
.section-hero-bis .abs{
  min-width: 0;
  max-width: 36ch;
  margin-top: 0;
  margin-right: 0;
  top: calc(4.5rem + var(--section-y));
  right: var(--gutter);
  font-size: var(--step-m);
  line-height: var(--leading-body);
  text-align: right;
}

/* ---- sub-page stacked slides ----
   Each step card is a full viewport tall with only a title, a numeral and a
   short paragraph in it, and space-between pushed those to opposite ends -
   a 441px hole through the middle of every card. Group the content instead
   and let the empty room sit below it, which is where the next card rises
   from anyway. */
.content-slide{
  justify-content: flex-start;
  gap: var(--space-2xl);
}
/* the step copy was 18px against an 80px title and a 208px numeral, which read
   as a caption rather than the substance of the card */
.content-slide .claim-s{
  font-size: var(--step-m);
  line-height: var(--leading-body);
}

/* The lead-in over the card grid is a section heading doing it in body size.
   Centred is the donor's composition and it works here - it just needs to
   carry the weight of a title. */
.bg-white.offre-last .center-text .manifesto{
  font-size: var(--step-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

/* Lead paragraphs parked in grid column 2 or 3. Each of these is the only cell
   in its grid - there is no second column for it to be balancing against - so
   the indent just gave the page another left edge, exactly as the trajectory
   block did on the landing page. Verified sole-occupant before pulling them
   back; two-column rows are deliberately left alone. */
#w-node-_12f0deca-9aed-1786-37dd-11a9e3539b1d-68a27c80{ grid-column: 1 / 11; }   /* the four branch pages */
#w-node-_271fda40-67c2-f836-30aa-5906f8b6f562-726c225f{ grid-column: 1 / 9; }    /* nanotechnology */
#w-node-d37a2b33-8650-7c8e-52a5-6d64eb626cdb-56a682eb{ grid-column: 1 / 9; }     /* advanced-materials */


/* ============ v5 card + hero corrections ============ */

/* ---- sub-page hero ----
   v4 gave the white title block a fraction of the section (72%) to fix a unit
   mismatch, which held at every aspect ratio but left the hero reading as a
   short white band sitting on a navy strip rather than as one screen. The
   section is already 100vh; the block now fills it, so the first screen of a
   discipline page is a single white ground with the standfirst top-right and
   the title bottom-left - the landing hero's composition, mirrored. */
.title-cont{
  height: 100%;
  min-height: 20rem;
}

/* ---- sub-page step cards ----
   Each card was position:absolute;inset:0 inside a 100vh wrapper, so it
   measured 1252x900 at 1440x900 and carried ~640px of content: the card was
   the ground rather than an object on it. Same move the landing timeline
   already made for .h-slide - narrower, capped in height and centred, so the
   polymer network shows around all four sides. .slide stays 100vh because the
   pin and the `+= innerHeight` scrub in polymer-scroll-indicator.js and
   advanced-materials-scroll.js are measured against it. */
.mwg_effect031 .slide-content{
  display: flex;
  align-items: center;
  justify-content: center;
}
.mwg_effect031 .content-slide{
  position: relative;
  inset: auto;
  width: min(100%, 62rem);
  height: min(76%, 34rem);
  padding: var(--space-l);
  gap: var(--space-l);
}
/* the numeral is what forced the card to be a full screen tall: 208px of
   outline type above a four-line paragraph */
.mwg_effect031 .content-slide .number{
  font-size: clamp(4.5rem, 11vw, 8.5rem);
}
@media screen and (max-width: 767px){
  .mwg_effect031 .content-slide{
    width: 100%;
    height: min(84%, 32rem);
    padding: var(--space-m) var(--space-s);
    gap: var(--space-m);
  }
}

/* The section band had --section-y above the first card and nothing below the
   last, so the last card's bottom edge and the top of the white section landed
   on the same pixel. Bands get the rhythm on both sides. */
.mwg_effect031{
  padding-bottom: var(--section-y);
}

/* ---- nanotechnology method panels ----
   The four step panels were laid out in viewport units drawn for a full-height
   100vh slide: 25vw rings, 3.472vw row margins, a -13.8vw pull on step 03. Set
   against a panel that is 42vw wide and shorter than it is wide, the content
   measured 640-810px inside a 544px box with overflow:hidden. Three of the four
   `+` buttons were clipped out of existence, which made .h-slide--info - where
   the actual content of each step lives - unreachable on steps 01, 02 and 04,
   and the rotating rings were sliced into arcs that read as noise.

   The panel box is the authority now. Three rows: the numbered heading, the
   figure taking whatever is left, and the `+` on the bottom edge. The figures
   are single SVGs on a shared 440x220 viewBox, so they scale with the panel
   instead of the window and all four sit on one visual scale. */
/* two classes, because the donor sets `padding: 0` at .h-slide.h-slide--schema */
.h-slide.h-slide--schema{
  justify-content: space-between;
  padding: var(--space-l) var(--space-m) var(--space-m);
}
.h-slide--schema .top.row,
.h-slide--schema .top.row.min-height{ flex: 0 0 auto; }
.h-slide--schema .bot.center{ flex: 0 0 auto; }
/* The info panel had no `left` and no `top`: it was placed by its static
   position plus margin-left:50%, which only centred it while the panel ran
   padding:0. Now that the panel is padded it has to be anchored to the panel
   box itself, or it hangs 32px right and 52px below where it belongs. */
.h-slide--schema .h-slide--info{
  top: 0;
  left: 50%;
  bottom: auto;
  margin-left: 0;
}
.schema-figure{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m) 0;
}
.schema-svg{
  display: block;
  width: 100%;
  height: auto;
}
/* nanotechnology-horizontal-scroll.js draws every .schema-line in on scroll
   with a dasharray stagger, so anything that should animate needs the class */
.schema-line{
  fill: none;
  stroke: var(--white);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.schema-line.is-quiet{ opacity: .4; }
.schema-node{ fill: var(--white); stroke: none; }
.schema-node.is-open{ fill: var(--navy); stroke: var(--white); stroke-width: 1px; }
/* px here are viewBox units, so the labels scale with the drawing they annotate */
.schema-label{
  fill: var(--white);
  font-family: 'General Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  opacity: .68;
}
.schema-label.is-key{ opacity: 1; }
/* The figure is one drawing on a 440-unit viewBox scaled to the panel width, so
   panel width sets label legibility. At 42vw the labels fall to 8.8px at 991 and
   4.7px at 600 - the diagram survives, the words annotating it do not. The panel
   gets wider instead of the type getting relatively smaller. Both are bounded
   below at 480 because the donor's own mobile rule takes the panel to 130vw
   there, and it carries the same two-class specificity as these. */
@media screen and (min-width: 480px) and (max-width: 991px){
  .h-slide.h-slide--schema{ flex: 0 0 62vw; width: 62vw; }
}
@media screen and (min-width: 480px) and (max-width: 767px){
  .h-slide.h-slide--schema{
    flex: 0 0 100vw;
    width: 100vw;
    padding: var(--space-m) var(--space-s) var(--space-s);
  }
}

/* the one thing in the section that still turns: step 02 is a loop, and it
   reads as one when it moves */
.schema-spin{
  transform-origin: 220px 110px;
  animation: schemaSpin 24s linear infinite;
}
@keyframes schemaSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .schema-spin{ animation: none; }
}

/* The gold network runs at full intensity behind the pinned section and the
   schema is drawn in 1px white hairlines - the two were competing for the same
   contrast. A navy scrim between them: the network still reads as depth, the
   diagrams read as the subject. .no-margin is only on this section; the hero
   and the landing timeline keep the network undamped. */
.horizontal-section.no-margin::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(3, 41, 86, .55);
  pointer-events: none;
}
.horizontal-section.no-margin .horizontal-wrapper{ z-index: 1; }

/* ---- landing timeline cards ----
   The gold hairline, the tighter padding, the 34rem cap and the fixed
   var(--space-2xl) group gap are all gone. They turned the card into a framed
   object with a dead band through the middle of it. The donor composition is
   the one that works at this scale: full-height card, 52px of padding, copy
   pinned to the top edge and the year + title pinned to the bottom, with the
   navy reading through the 16px corners only. .side is the transparent spacer
   slide and takes none of this.

   The one thing kept from the narrowed version is the mobile card width. */
@media screen and (max-width: 479.98px){
  /* the track stacks here and the cards were content-width, so three cards
     with different copy lengths gave three different card widths. One width,
     and it is the page gutter, like everything else at this size. */
  .h-slide:not(.side){
    width: calc(100vw - var(--gutter) * 2);
  }
}

/* ---- capability card icons ----
   The icon slot on .expertise__item was fed nt-panel-07.svg - a 1600x1000
   abstract panel, the same file on all nine cards across two pages, and with
   only max-width:100% to constrain it, it rendered 212px tall in a 180px box
   and covered the card title. It is an icon slot; it now holds an icon, in the
   same 58px gold line language as the landing page's .value-icon set. The card
   min-heights went with it - 34vw and 110vw were both drawn around the panel. */
.expertise__svg-block{
  height: auto;
  min-height: 0;
  margin-bottom: var(--space-m);
  color: var(--oragne);
}
.expertise__svg-block svg{
  width: 3.625rem;
  height: 3.625rem;
  display: block;
}
.expertise__item{
  min-height: 0;
}

/* ---- the three IA pages ----
   /en/approach, /en/about and /en/contact compose from the same components as
   the discipline pages, but the donor placed every grid cell with a generated
   #w-node id. Named spans instead, so a page can be written without minting
   Webflow ids that mean nothing outside Webflow. Below 991px .grid-container
   drops to six columns, where a span starting at 8 would create an implicit
   column and push the page into horizontal scroll - so they all go full width
   there, which is the composition those breakpoints want anyway. */
.grid-container > .col-lead { grid-column: 1 / 7; }
.grid-container > .col-aside{ grid-column: 8 / 13; }
.grid-container > .col-4    { grid-column: span 4; }
@media screen and (max-width: 991px){
  .grid-container > .col-lead,
  .grid-container > .col-aside,
  .grid-container > .col-4{ grid-column: 1 / -1; }
}

/* The contact routes are the only real links in running copy on the site; the
   UA default is blue and underlined, which belongs to no part of this system. */
.link-plain{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-gold);
  padding-bottom: .15em;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1), color .28s cubic-bezier(.22,.61,.36,1);
}
.link-plain:hover{ color: var(--oragne); border-bottom-color: var(--hairline-gold-strong); }
.route-line{ margin-top: var(--space-2xs); margin-bottom: 0; }

/* On the discipline pages the white band closes with the use-case grid, which
   carries --section-y underneath it. The IA pages close on the card grid
   itself, so without this the last card's bottom edge and the top of the
   footer land on the same pixel - the same fault as the step cards above. */
.bg-white.offre-last > .section-expertise:last-child{
  padding-bottom: var(--section-y);
}

/* A section heading sitting directly on the cards it heads. Elsewhere the
   spacing comes from .last-section > .section-title's own margins; these
   headings are inside the band, so they need their own. */
.section-values > .container > .section-title{
  margin-bottom: var(--space-l);
}

/* The footer carries its own darker ground, so a band that ends on its cards
   meets that seam with no rhythm between the two. Everywhere else the space
   came from whatever sat last inside the band - a use-case grid or a white
   section - so it is only needed where a card row is genuinely the last thing
   on the page. */
.section-values.is-last-band{
  padding-bottom: var(--section-y);
}


/* ============ v5 responsive continuity ============ */

/* v4 rebuilt the spatial system and the type ladder on the desktop
   composition. Below 992 the donor's own rules still ran, and below 480 the
   donor's entire vw stylesheet ran and *overrode* the v4 tokens - it is later
   in the file at equal specificity, and a media query adds none. This block
   closes that gap. Same additive style as the v2/v3/v4/v5 blocks above. */

/* ---- the two horizontal sections agree at mobile ----
   The donor stacked the home track at <=479 (`.track{flex-flow:column}`) and
   then explicitly exempted this one (`.track.o-design{flex-flow:row}` at
   :2716), keeping four 130vw panels on a row driven by a pinned scroll-scrub.
   Nothing is lost that way - the scrub does traverse the track, and the `+`
   overlays open - but it means the two sibling sections read as two different
   compositions on the same phone, and a pinned scrub turns vertical finger
   movement into sideways travel. Stack it, like its sibling.
   nanotechnology-horizontal-scroll.js drops its pin at the same breakpoint. */
@media screen and (max-width: 479.98px){
  .track.o-design{
    flex-flow: column;
  }
  /* 130vw only makes sense on a swipe track: on a stack it is just 1.3 screens
     of horizontal crop. The panel is the page width now, and its height comes
     from its content rather than 80vh - the figure and the `+` row already
     measure short of the box at every width. */
  .h-slide.h-slide--schema{
    flex: none;
    width: 100%;
    height: auto;
  }
}

/* ---- type: the mobile band joins the ladder ----
   The donor's <=479 stylesheet sized 26 things in `vw` with no floor and no
   ceiling, and because it sits later in this file at equal specificity it beat
   every --step-* token underneath it. Measured before removal at 375 / 479 /
   480:  body 14.9 / 19.1 / 16   .nav-tag 7.5 / 9.5 / 12   .btn-s 11.2 / 14.3 /
   12   .marquee__text 41.3 / 52 / 36. Body copy was *larger* at 479 than at
   480, and the eyebrow that carries every section name rendered at 7.5px on a
   phone (6.4px at 320). Those declarations are gone; the token floors - display
   36, statement 28, l 24, m 19, body 16, micro 12 - are the mobile values now,
   which makes every one of them flat across the boundary instead of inverted.

   Four kept a value rather than a deletion, because they belong to components
   that only exist below the desktop breakpoint and so have no >=480 partner to
   be continuous with. They get a clamp instead: a floor, a ceiling, and the
   donor's own ratio in between. */

/* The burger is the navigation from 0 to 991, so the panel's type has to hold
   across that whole band. The donor sized it only at <=479, which left the
   primary links at an unstyled 16px from 480 to 991 - half their size at 479. */
@media screen and (max-width: 991px){
  .nav-mobile__list-item{ font-size: clamp(1.75rem, 8.706vw, 2.5rem); }
}

/* The footer wordmark was 45vw base and 90vw at <=479, so it *halved* at the
   breakpoint: 338px at 375, 216px at 480. One curve, floored so it keeps its
   presence on a phone and capped at the 54rem the 45vw already reached at
   1920, so the desktop end is unchanged. */
.logo-footer{ width: clamp(16rem, 45vw, 54rem); }

/* The footer's bottom row is a nowrap flex row, and .nav-tag is nowrap by
   design - it is a tracked label. At 6.4px that fitted a 320px screen; at a
   legible 12px "hello@niltechs.com" runs 79px past the page edge. The row wraps
   below the desktop breakpoint rather than the label shrinking back. */
@media screen and (max-width: 991px){
  .footer .right.right-align{
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
  }
}

/* ---- one page edge below 480 ----
   v4 split the page edge (--gutter) from component padding and put every
   section band on it. That never reached the donor's mobile block, which had
   two rules working against it: `.container.color-black` had its gutter zeroed
   at <=479 (removed above, at :2633 - every other .container keeps it at every
   width), and .value-list / .use-case__list carried a 4.975vw page edge of
   their own to compensate. The result was two left edges on every phone -
   measured on /en: 16 and 24 at 320, 19 and 24 at 375, 24 and 29 at 479 - the
   exact dispersion v4 was written to remove, and the two never converge
   because one is vw and the other is a clamp.

   The lists go to 0 here, which is what they already are at >=480; the gutter
   comes from the .container above them, once, as it does everywhere else. */
@media screen and (max-width: 479.98px){
  .value-list,
  .use-case__list{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---- the 480-991 band ----
   v4 composed the desktop and the donor composed the phone; nothing was ever
   drawn for the band between them, so rules written for a 1440 canvas ran
   unmodified at 480. */

/* .expertise__list was a hard `1fr 1fr 1fr` from 480 all the way to 1920, with
   no intermediate step. Measured card widths: 171/155/160 at 480, 171/170/170
   at 600, 218 at 768 - three columns each carrying a 58px icon, a 24px title
   and body copy. `1fr` is `minmax(auto, 1fr)`, so the tracks were also visibly
   uneven wherever content hit its min-content width; minmax(0, 1fr) is what
   makes them equal. Below 480 the list is the scroll-snap carousel and must
   keep its own flex layout, so this is scoped to where the grid applies. */
@media not all and (max-width: 479.98px){
  .expertise__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 992px){
  .expertise__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The tag row is `justify-content: space-between` on a nowrap flex line. The
   donor wrapped it at <=479 and nowhere else, so at 480 the row ran 90px past
   the page edge on the branch pages - the widest single overflow on the site,
   and the only route that still panned horizontally. */
@media screen and (max-width: 991px){
  .tag{ flex-wrap: wrap; }
}

/* The branch hero video had no height, so it kept its intrinsic 4:5 and grew
   with the page: 375x469, 768x960, 1280x1600. Its .use-case__bg well is a
   sticky 100vh box with overflow:hidden, so the excess was cropped rather than
   breaking layout - but at 1280 the element was twice the viewport height, the
   object-fit crop was doubled, and the framing the video was shot for was never
   what you saw. The well defines the box now.

   The fix has to land on the wrapper, not the media: the markup carries
   `style="width:100%; height:100%; object-fit:cover"` inline on the <video>,
   which no stylesheet rule can outrank, and its 100% was resolving against an
   auto-height .w-embed - so it fell back to the intrinsic ratio. Giving the
   wrapper the well's height is what makes that inline 100% mean something. */
.use-case__bg > .w-embed,
.use-case__bg > .usecase__bg-mask{
  height: 100%;
}
.use-case__bg video,
.use-case__bg .use-case__bg-item{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- systemic ---- */

/* The page could be panned sideways by 15.5px at *every* width, 1920 included.
   Cause: a dozen full-bleed elements are `width: 100vw`, and 100vw includes the
   classic scrollbar gutter while the layout viewport does not - so the content
   is always ~15px wider than the space it has. body{overflow-x:hidden} hid the
   scrollbar but not the scroll: the root still panned, which on a touch device
   is the rubber-band wobble you get on every horizontal swipe.

   `clip` on the root, not `hidden`. hidden would make the root a scroll
   container and break the position:sticky pins that drive both horizontal
   sections; overflow-x:clip with overflow-y:visible is the one pairing the spec
   leaves alone, so the pins are untouched. This is the same reasoning already
   applied to .horizontal-section and .expertise__list above. */
html{
  overflow-x: clip;
}

/* Dynamic viewport units for the boxes that are meant to be exactly one screen.
   On iOS Safari and Android Chrome the URL bar makes 100vh taller than what is
   actually visible, so a "full screen" hero is cut off on first paint and only
   fits after the bar retracts.

   Deliberately NOT applied to .slide, .horizontal-section or
   .horizontal-wrapper: polymer-scroll-indicator.js and
   advanced-materials-scroll.js scrub `+= window.innerHeight` against those, and
   the two horizontal sections pin against them. A unit that changes as the URL
   bar moves would make the pin length drift mid-scroll, which is worse than the
   crop. Those stay on 100vh on purpose. */
@supports (height: 100svh){
  .title-cont,
  .nav-mobile-panel,
  .use-case__bg{
    height: 100svh;
  }
}

/* The v4 note says the footer was freed from its fixed 100vh, but a
   `min-height: 100vh` stayed behind, and the content only exceeds it at 1920 -
   so at every width below that the footer is still exactly one screen, and on a
   phone it is a full dead screen before the page ends. Give it the floor only
   where there is screen to spare. */
.footer{
  min-height: 0;
}
@media screen and (min-width: 992px){
  .footer{ min-height: 100vh; }
}

/* Touch targets. Measured at 375 with the menu open: 18 of 24 links were under
   32px tall - the menu's own footer links were 42x10 and 100x10, the submenu
   rows 26px, the submenu back affordance 11px, and the burger itself 38x24.
   WCAG 2.5.8 asks 24px; 44px is the practical minimum. Padding rather than
   font-size, because the type sizes are right - it is the hit area that is not. */
@media screen and (max-width: 991px){
  .nav-burger{
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-submobile__link,
  .nav-mobile__submenu-back,
  .footer-mobile a,
  .nav-mobile-panel .bot a,
  .nav-mobile-panel .footer-bot-info a{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ============ v6 card surface ============ */

/* The site has three card components and only two of them were ever given the
   v2 surface language. .value-item got it at :3248 and .use-case__block at
   :3225 - 16px radius, a gold hairline, the donor's own 1px rules switched off
   (`.value-item__line{ display:none }`). .expertise__item never did: it kept
   `border-radius: var(--radius-m)` with no border to round, and drew its edges
   with three absolutely-positioned hairlines instead - .top-divider,
   .bot-divider and .side-divider at left:102%.

   That is the whole reason the four capability grids - /en/about,
   /en/approach, /en/nanotechnology and /en/polymer-engineering - read as a
   different component from the workflow cards sitting directly above them on
   the same page. It is also where the 9px overflow at 1280 came from, and the
   reason two separate patches exist upstairs to contain it.

   The values here are .value-item's, copied rather than re-chosen: one card
   surface means one set of numbers. No background tint and no hover, because
   .value-item has neither and `rgba(255,255,255,.02)` is invisible on the
   white ground all four of these grids sit on. */
.expertise__item{
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-s);
}
.expertise__item .side-divider,
.expertise__item .top-divider,
.expertise__item .bot-divider{ display: none; }

/* .expertise__list is `gap: 0 1.389vw` - a column gap and no row gap. That was
   invisible while the cards were ruled rather than boxed, because a divider is
   1px and two of them stacking read as one line. With real edges the two rows
   of the six-card /en/nanotechnology grid share a border. Same floored clamp
   as .value-list and .use-case__list, so all three card lists gap alike. */
.expertise__list{
  gap: clamp(var(--space-s), 1.389vw, var(--space-m));
}


/* ============ v6 the Method panels are objects ============ */

/* v5 gave the landing timeline cards a cap and a centre - 40vw wide,
   `height: min(100%, 34rem)`, `align-self: center` - so the gold network reads
   around all four sides and the card is an object on the navy rather than the
   navy itself. .h-slide--schema, the four nanotechnology Method panels, was
   explicitly excluded: at the time it was full-height by design and a 34rem cap
   collided its figure with its `+` button.

   Measured at 1557x1145 the panels were 654x1081 - 94% of the viewport height,
   which is the ground, not an object on it. The exclusion is answered rather
   than ignored: `.schema-svg` gets an explicit height, so the drawing - one SVG
   on a shared 440x220 viewBox - letterboxes inside .schema-figure under the
   default preserveAspectRatio instead of overflowing a panel that is
   `overflow: hidden`. The heading row, the figure and the `+` row keep the
   three-row split v5 built; only the figure gives up height, and it gives it
   up by scaling rather than by clipping.

   Bounded at 480 because below it the track stacks and the panel is
   `height: auto`, where `height: 100%` resolves against nothing. */
@media screen and (min-width: 480px){
  .h-slide.h-slide--schema{
    height: min(100%, 34rem);
    align-self: center;
  }
  .track.o-design{ align-items: center; }
  .schema-svg{ height: 100%; }
}

/* Capping the height changes which axis limits the drawing. It is one SVG on a
   440x220 viewBox - 2:1 - inside a panel that is now 1.48:1, so above roughly
   1400 the figure stops being width-limited and starts being height-limited,
   and the 11-unit labels scale with it. Measured at 1920 with the cap and the
   old padding: 9.46px, against 18.5px uncapped. The panel is what shrank, so
   the panel is where the room comes back - both of these were drawn for a
   1081px box and neither is load-bearing at 544:

     .schema-figure   var(--space-m) 0  ->  var(--space-s) 0   (+24px)
     panel top pad    var(--space-l)    ->  var(--space-m)     (+20px)

   which puts the labels back at 11.9px at 1920 and leaves 1280 and below
   untouched, since those are still width-limited.

   Bounded at 768 rather than 480: the 480-767 band has its own panel padding a
   few rules up (`var(--space-m) var(--space-s) var(--space-s)`, drawn for a
   100vw panel), this is later in the file at the same specificity, and it
   would silently replace it. Nothing is lost - across that band the panel is
   the full viewport width, so the drawing is width-limited there anyway. */
@media screen and (min-width: 768px){
  .h-slide.h-slide--schema{
    padding: var(--space-m);
  }
  .h-slide--schema .schema-figure{
    padding: var(--space-s) 0;
  }
}

/* The `+` overlay is `height: 100%` of the panel, so it lost the same 537px the
   panel did - and it cannot spill, because .h-slide--schema is overflow:hidden
   and has to be (the closed overlay parks below the panel on a
   `translate(-50%, 110%)`). Measured at 1280 after the cap: panels 01 and 03
   overflowed their overlay by 15px and 11px.

   Both of the values recovered here are donor `vw` leftovers of exactly the
   kind v5 retired 82 of - `.info-bot{ gap: 5vw }` and the overlay's
   `1.556vw` bottom padding, neither floored nor capped, so both grow with the
   window and neither was drawn for this box. The 5vw is 64px of fixed air
   between the list and the close button inside a container that is already
   `justify-content: space-between` - it was never doing work the layout was
   not already doing. Floored to the same clamp the card lists use, and the
   padding to the ladder, the tallest overlay measures 527 in a 544 box.

   Scoped to >=480: below it the donor's own `padding: 7.463vw 7vw` takes over
   on a stacked panel, and that composition is unaffected by the cap. */
@media screen and (min-width: 480px){
  .h-slide--schema .h-slide--info{
    padding: var(--space-m) var(--space-l);
  }
  .h-slide--schema .info-bot{
    gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  }
}

/* Below 480 the same overlay clips too, and this one predates v6 - none of the
   rules above reach that band, and it measures the same on v5. The panel is
   content-height there (the track is a column, `height: auto`), so it comes out
   at 600px, while the overlay's own content is 647 at 375 and 738 at 320: 47px
   and 138px of the step's copy behind `overflow: hidden`, reachable by no
   gesture. Found in the v6 width sweep and fixed here because it is the same
   overlay.

   Padding cannot close a 138px gap, and the panel cannot grow to meet an
   absolutely-positioned child. The overlay scrolls instead - it is already a
   tap-to-open panel on a track that does not pin at this width, so an inner
   scroll costs nothing and no sticky pin exists here for it to break. */
@media screen and (max-width: 479.98px){
  .h-slide--schema .h-slide--info{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============ v6 band rhythm ============ */

/* v4 put the section bands on one token, --section-y, and v5 carried it across
   the width range - but only ever on the leading edge. `.section-values` is
   `padding-top: var(--section-y); padding-bottom: 0`, so a band opens on the
   rhythm and closes on nothing. Measured on /en/approach: the last workflow
   card's bottom edge is y=2307 and the white section's top edge is y=2307. The
   same on /en/about, where the Trajectory cards meet the white band on a shared
   pixel. A band gets the measure on both sides.

   `.section-values.is-last-band` at :4131 was the narrow version of this - the
   bottom measure, but only where a card row happened to be the last thing
   before the footer. It is redundant now and left in place: it names the case
   it was written for, and it resolves to the same value. */
.section-values{
  padding-bottom: var(--section-y);
}
/* One exception, and it is the one place on the site where a band already
   carried its own leading measure: .item--marquee has `margin-top:
   var(--section-y)` from the v4 block at :3466, added when the section above it
   ended flush. With the rule above that stacks - measured on /en at 1280, 231px
   of unbroken white between the last workflow card and the marquee's top rule,
   two section gaps with no change of ground between them to justify either.
   The marquee yields, because the band above it is now the one carrying the
   measure. Only /en puts a .section-values directly before a marquee; on the
   discipline and branch pages it follows a card grid or opens a section, and
   keeps its own margin there. */
.section-values + .item--marquee{
  margin-top: 0;
}
/* Same stack, two more places, both found by walking 320-1920 across every
   route rather than by reading the markup:

   /en/advanced-materials - the band is followed by a .grid-container carrying a
   6.944vw top margin (89px at 1280, 277 at 1920). It was the whole separation
   before, and it is not on the ladder; with the band measure under it the gap
   went to 204. The margin yields, and the gap lands on --section-y for the
   first time. This is the only route where a .section-values is followed by a
   .grid-container.

   /en/about - the team band closes with a .use-case__wrapper, which carries
   `padding-bottom: var(--section-y)` of its own from the v4 block at :3482. Two
   boxes, one nested in the other, both closing the same band: 231px of navy
   before the footer's own 115. The inner one is the one that yields, so the
   measure sits on the band rather than on the grid inside it. Again the only
   route where a .use-case__wrapper is the last child of a .section-values. */
.section-values + .grid-container{
  margin-top: 0;
}
.section-values > .use-case__wrapper:last-child{
  padding-bottom: 0;
}

/* The lead band under the sub-page hero had no padding at all, so its .h-line -
   the rule that opens the band - landed on the hero's own bottom edge: y=1145
   against a 1145px hero on both /en/approach and /en/about. Two horizontal
   lines sharing a pixel, which is the fault the marquee band already had at
   :3466 and was fixed for there.

   The selector is the pattern, not the page: /en/about, /en/approach,
   /en/contact, /en/advanced-materials and /en/polymer-engineering all open with
   `.section-hero-bis` followed by a `.container`. /en/nanotechnology does not -
   its hero hands straight to the pinned .horizontal-section, which is one
   screen by construction and wants no padding above it. */
.section-hero-bis + .container{
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* ===========================================================================
   v7 - accessibility, focus and the a11y-driven corrections.
   Appended at the end deliberately: media queries carry no specificity, so at
   equal specificity the rule that appears LATER in this file wins. Anything
   that has to override a class defined above must come after it.
   ========================================================================= */

/* Skip link. v6 had none, and ~24 KB of nav markup (17 desktop links + 24
   mobile links) sits before the first heading on every page, so a keyboard
   user tabbed the whole navigation on every page load. */
.skip-link{
  position: absolute; top: 0; left: 0; z-index: 10000;
  transform: translateY(-120%);
  background: var(--gold); color: var(--navy);
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro); font-weight: 600;
  letter-spacing: var(--tracking-micro); text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-xs) var(--space-s);
  border-bottom-right-radius: var(--radius-s);
  transition: transform .18s ease;
}
.skip-link:focus{ transform: translateY(0); }

/* Focus. webflow.css carries EIGHT `outline: 0` declarations from the export
   (:19, :346, :802, :822, :869, :892, :1233, :1283) and authored none back, so
   keyboard focus fell through to the UA default over a #032956 ground - and
   inside the two opacity:0 dropdowns it was invisible entirely.
   :focus-visible, not :focus, so a mouse click on a link does not draw it. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* on the white bands the gold ring is 2.1:1 against the ground, so the focused
   element gets a navy ring instead */
.bg-white a:focus-visible,
.bg-white button:focus-visible,
.offre-last a:focus-visible{
  outline-color: var(--navy);
}

/* The burger is a <button> in v7 (it was a div, so the mobile menu could not be
   opened by keyboard). Strip the UA button chrome so it looks unchanged. */
button.nav-burger{
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
button.nav-burger .burger-glyph{ display: flex; }

/* Closed dropdowns were opacity:0 but still in the tab order, so a keyboard
   user landed on twelve invisible links. visibility removes them from the tree
   without touching the opacity transition the design depends on. */
.nav--dropdown{ visibility: hidden; }
.nav--dropdown.is-open{ visibility: visible; }

/* Gold on white measures 2.14:1 - it fails AA at any size, and the v6 README
   states the rule ("never use it for body text on the light section, only
   rules, icons and large display type"). .link-plain is described in this file
   as "the only real links in running copy on the site", and its hover state
   broke exactly that rule. Navy text with a gold underline keeps the brand
   signal and puts the text back at 13:1. */
.link-plain:hover{
  color: var(--navy);
  border-bottom-color: var(--gold);
}

/* .schema-label is 11px inside a 440-unit viewBox, which this file's own note
   at the end measured as 9.46px at 1920, at 68% opacity. Two notches up and
   opaque enough to read. */
.schema-label{ font-size: 13px; opacity: .82; }
/* 1px white hairlines at .4 on navy are ~2.9:1, under the 3:1 that WCAG 1.4.11
   sets for non-text contrast. */
.schema-line.is-quiet{ opacity: .55; }

/* Reduced motion. v6 honoured it in three places against ~11 animation
   surfaces. The two pinned horizontal scroll-jacks and the two rotationX:40
   card stacks are handled in JS; these are the CSS-side start states that
   would otherwise leave content invisible if a script bails out early. */
@media (prefers-reduced-motion: reduce){
  .split-word, .split-line, .load-split, .split-tag, .expertise-split,
  .manifesto, .h-line, .value-item__line, .value-divider,
  .usecase__bg-mask, .info-case__item, .tag-block, .logo-footer{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
  .marquee-content, .scroll-marquee{ animation: none !important; }
  html{ scroll-behavior: auto !important; }
}

/* Reduced motion, part two: the two pinned horizontal sections.
   Both scroll-jack - they pin the viewport and convert vertical wheel movement
   into sideways travel, which is the single strongest trigger on the page and
   the one v6 honoured nowhere. The fix is not to disable them into a broken
   state: it reuses the stacked composition that already exists and is already
   tested at <=479.98, and applies it at every width. The matching JS guards in
   home-horizontal-scroll.js and nanotechnology-horizontal-scroll.js drop the
   pin, so the two agree. */
@media (prefers-reduced-motion: reduce){
  .horizontal-section{
    flex-flow: column;
    height: auto;
    margin-top: 0;
    position: relative;
  }
  .horizontal-wrapper{ height: auto; transform: none !important; }
  .track,
  .track.o-design{
    flex-flow: column;
    height: auto;
    transform: none !important;
  }
  .h-slide{
    flex: none;
    width: 100%;
    height: auto;
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
  .h-slide.h-slide--schema{ flex: none; width: 100%; height: auto; }
  /* .slide-content is pinned by advanced-materials-scroll.js /
     polymer-scroll-indicator.js, which now return early - so the card stack
     needs to lay out as ordinary blocks rather than as pinned layers. */
  .mwg_effect031 .slide-content{ position: relative !important; top: auto !important; }
  .mwg_effect031 .content-slide{ transform: none !important; opacity: 1 !important; }
  .scroll{ display: none; }
}

/* The IX3 rule near the top of every <head> sets `visibility: hidden` on a
   list of classes until Webflow's interaction bundle adds .w-mod-ix3. That is
   real behaviour, not residue - but it means a JS failure, a blocked CDN or a
   reduced-motion path that returns early leaves the hero headline and a dozen
   other blocks permanently invisible. Two safety nets: this one for reduced
   motion, and the timeout in webflow-mod-classes.js for everything else. */
@media (prefers-reduced-motion: reduce){
  [data-wf-target], .claim-m, .claim-s, .marquee__text, .section-title{
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Headings that carry a body-copy class.
   Three hero headlines were <p> in v6 and are <h1> in v7, so that each page
   has exactly one - seven pages had none at all, including the home page. The
   class still supplies the type; the element brings `margin: .67em 0`,
   `font-weight: bold` and `font-size: var(--step-hero)` from the reset, none
   of which the <p> had. Neutralise the element defaults and let the class win
   on everything it sets. */
h1.claim-m, h1.claim-s{
  margin: 0;
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-m);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
/* The sub-page hero heading was <h2 class="color-black"> and is now <h1>. h2
   and h1 are different sizes in the reset, so pin it back to the h2 step the
   composition was built on. */
.test-blend-mode h1,
.title-cont h1{
  font-family: 'Cabinet Grotesk', Arial, sans-serif;
  font-size: var(--step-display);
  font-weight: 300;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

/* ---- the landing timeline, below 480 ----
   Measured at 375x812 before this block: the track ran 3898px tall for three
   cards. Each card was 731px (the donor's `.h-slide{height:90vh}`) with
   `justify-content: space-between` still on it, so the copy sat at the top, the
   year and title sat ~500px below it, and the space between them was empty
   white. Between every pair of cards sat a `.h-slide.side` spacer at 568px
   (70vh) of empty navy - 1704px of nothing across the section. The cards also
   measured 327 wide in a 375 viewport and sat flush left, so the right edge
   read as clipped rather than as a margin.

   None of that is a bug in the desktop composition: `space-between` and a
   viewport-height card are exactly right for a swipe track where each card IS
   the screen. They are simply the wrong instructions once the track stacks. */
@media screen and (max-width: 479.98px){
  /* One gutter, like every other band on the site. The cards measured 327
     wide before this - the right number - but sat flush against the left edge
     with all 48px of slack on the right, which reads as a clipped card rather
     than as a margin. The gutter goes on the track so the cards can be 100%. */
  .horizontal-section .track{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    gap: var(--space-s);
  }
  .horizontal-section .track > .h-slide{
    width: 100%;
    height: auto;               /* content height, not 90vh */
    flex: none;
    justify-content: flex-start;
    gap: var(--space-s);
    padding: var(--space-l) var(--space-m);
  }
  /* Reading order on a stack is not reading order on a swipe. The year and the
     title lead; the paragraph follows. On the desktop track the paragraph is
     the thing you meet first as the card slides in, which is why it is first
     in the source. */
  .horizontal-section .track > .h-slide > .top{ order: 2; }
  .horizontal-section .track > .h-slide > .bot{ order: 1; }
  /* The side slides are travel between cards, not content: their only visible
     element, the "Timeline" label, is already display:none above. Stacked,
     they are three empty screens. */
  .horizontal-section .track > .h-slide.side{ display: none; }
  /* The trailing spacer was 49.751vw - 187px of nothing under the last card. */
  .horizontal-section + .spacer, .track .spacer{ height: var(--space-l); }
}

/* ---- the home hero claim, below 480 ----
   Measured at 375x812: the claim occupied y 557-640 and the wordmark 596-693 -
   44px of overlap, with the tagline printed straight across NILTECH.

   It is not a stacking accident. home-hero-wordmark.js rests the wordmark on
   the hero's bottom-left corner (.test is the hero's last flex child) and
   starts it from the hero's vertical centre, drifting between the two as you
   scroll. The claim's own `margin-top` put it at 557 - directly on that path.
   At desktop widths the claim is bottom-RIGHT and the two never meet.

   The fix is to give them different halves of the hero rather than to fight the
   script: the claim takes the band under the nav, the wordmark keeps the lower
   two thirds. As the page scrolls the wordmark drifts down and the claim moves
   up, so the gap only ever opens. */
@media screen and (max-width: 479.98px){
  .home-hero .div-block.home-margin.follow-section{
    margin-top: var(--space-l);
    margin-bottom: auto;
  }
  /* 83px of claim at --step-m is three lines here; keep it to a comfortable
     measure so it cannot grow back into the wordmark on a narrower phone. */
  .home-hero h1.claim-m{ max-width: 22ch; }
}

/* ---- body copy on the mobile tier ----
   The Approach manifesto rendered at ~28px on a 375 screen, so a single 42-word
   paragraph filled the whole viewport and had to be scrolled through in three
   passes. .manifesto is a display-scale token doing body-copy work at this
   width; step it down to the reading tier and give it a measure. */
@media screen and (max-width: 479.98px){
  .manifesto{ font-size: var(--step-l); line-height: 1.28; }
  .manifesto.col-lead{ font-size: var(--step-xl); }
  .claim-m, .claim-s{ max-width: 34ch; }
}

/* The mobile drawer's contact row is `display:flex` with no gap, so its two
   links butted straight against each other and the drawer read
   "LINKEDINHELLO@NILTECH.COM" as one string. Measured at 375: LINKEDIN ended at
   x=86 and the address began at x=86. A third, empty LinkedIn anchor sat beside
   them - invisible, unlabelled and still focusable - and is removed in
   partials/nav.html. The LinkedIn link itself has since been removed from the
   whole site, so this row now carries the email alone; the gap and wrap are
   kept because the row is still a flex row that has to survive a long label. */
.footer-mobile{
  gap: var(--space-s);
  flex-wrap: wrap;
}

/* .clipping-text - the texture fill on years, section titles and the marquee.
   This lived in a per-page inline <style> that also carried the
   .w-webflow-badge suppression, which is exactly the kind of pairing that gets
   a whole block thrown away by a filter aimed at the badge. It is a site-wide
   component rule, so it belongs in the stylesheet: one definition, no chance of
   a page losing it. Restored from v6 verbatim - `color` and
   `-webkit-text-fill-color` both go transparent so the background shows through
   the glyphs in every engine. */
.clipping-text * {
  background-image: url('/assets/img/nt-panel-05.svg');
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ===========================================================================
   v8 - one card language, one band rhythm, a hero that moves

   v7 built the fourteen generated pages out of the components the hand-built
   pages use, but the assembly missed things those pages carry, and a handful of
   donor rules were never corrected on either tier. Walking 320-1920 across every
   route, the same faults kept coming back: a card that is transparent where the
   equivalent card elsewhere is white, a band that closes on nothing, an icon
   slot four times the size of its icon. Nine numbered defects, all measured in
   the browser before anything here was written.

   Additive, like every block above it. Nothing upstairs is edited in place.
   ========================================================================= */

/* ---- the closing band gets the measure ----
   `.section-hero-bis + .container` at :4556 gives the manifesto band under the
   hero its --section-y. The nine capability pages emit a SECOND band of exactly
   that shape after the white card grid, and it matched no rule at all: measured
   0px top and 0px bottom at both 1440 and 768, so its .h-line landed on the
   white band's own bottom edge and its copy ran into the footer.

   The selector is the pattern rather than the page, the same way :4556 is. */
.bg-white.offre-last + .container{
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* ---- the step cards are a stack below 480, not half a carousel ----
   The donor drew .value-list as a scroll-snap carousel - `overflow:auto`,
   `scroll-snap-type: x mandatory`, cards at `width: 69.652vw`. v5 gave the list
   `flex-wrap: wrap` at :3719 to stop it overflowing, and gave .value-item
   `flex: 1 1 100%` at :3723 - but that is (0,1,0) against the donor's
   `.value-item.top-align` at :2787, which is (0,2,0) and also sets an explicit
   width. So the cards wrapped into a stack and kept their carousel width.

   Measured at 375 on /en and on every capability page: the list runs 24-351 and
   every card runs 24-285. 66px of dead ground down the right of the whole
   section, on the landing page as much as anywhere.

   Two classes, to answer the donor at its own specificity. */
@media screen and (max-width: 479.98px){
  .value-item.top-align{
    flex: 1 1 100%;
    width: 100%;
    min-height: 0;
    /* the donor's 9.95vw 4.975vw is a second padding system; .value-item's own
       padding from :3280 is the one the other two card lists use */
    padding: var(--space-m) var(--space-s);
  }
  /* nothing scrolls sideways here any more, and a snap axis on a wrapped
     column is a scroll container that can trap a swipe */
  .value-list{
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* ---- the icon slot fits the icon ----
   `.value-icon{ height: 12.5vw; min-height: 12.5vw }` at :1763 (and 44.776vw at
   :2804) holds a 58px mark: a 180px slot at 1440, 168px at 375, 96px at 768.
   ~120px of dead space between the icon and the heading on every card on /en,
   /en/advanced-materials, the nine capability pages, /en/approach, /en/about and
   /en/legal.

   This is the fault .expertise__svg-block had, and v5 fixed it at :4064. Same
   three lines, so both icon slots are finally one rule. Later in source than
   both :1763 and :2804, so it carries at every width without a media query. */
.value-icon{
  height: auto;
  min-height: 0;
  margin-bottom: var(--space-m);
}
.value-icon svg{
  width: 3.625rem;
  height: 3.625rem;
  display: block;
}

/* ---- an aside that ends where the page ends ----
   Every right-hand aside on the site ends at column 13 - polymer-engineering is
   10/13, edipop is 8/13, the generated pages' .col-aside is 8/13 at :4088. The
   pillar aside on /en/advanced-materials was 8/12, one column short: measured at
   1440 its right edge was x=1233 against the card grid's x=1339. It now uses the
   .col-aside utility, which already collapses to 1/-1 at 991 like the rest.

   .is-ranged is the opt-in for setting the copy right as well as placing it
   right. It is one paragraph answering a card row above it, not running body
   copy - the capability pages' .col-aside stays ragged-right. */
.grid-container > .col-aside.is-ranged{
  text-align: right;
}

/* ---- a card on the navy ground is a white object on it ----
   The site has one card language for this and it was applied to two of the
   three places that need it. .h-slide is `background:#fff` at :1690 and
   .content-slide is `background:var(--white)` at :1952 - both sit on the navy,
   both read as objects on it. .value-item never got it, so on
   /en/advanced-materials and on the nine capability pages the gold network runs
   straight through the card copy.

   On /en the same component sits inside .last-section.bg-white, where a white
   fill would be invisible and the gold hairline is the whole surface. So this is
   an opt-in on the band rather than a :not() chain on the card - the band knows
   what ground it is on, and a future wrapper cannot break it. */
.section-values.on-navy .value-item{
  background-color: #fff;
  color: var(--navy);
  /* the hairline was standing in for a surface; with a real one it would read
     as a second edge inside the 16px corner */
  border-color: transparent;
}
/* the gold marks are the same language as .expertise__item's on the white band,
   where gold-on-white is already the established treatment for icons */
.section-values.on-navy .value-icon{
  color: var(--oragne);
}

/* ---- the nanotechnology Method panels join the card language ----
   .h-slide is the white card. .h-slide.h-slide--schema overrode it back to
   var(--transparent) at :1702, which made the four Method panels the only
   horizontal-track card on the site drawn light-on-dark - against the three
   .h-slide timeline cards on /en and the nine .content-slide step cards on the
   two other discipline pages, all of them white.

   The panel takes the ground it already inherits and the drawing inverts with
   it. Every selector here needs .h-slide--schema as a second class or a
   descendant step, because the donor's rules are two-class throughout. */
.h-slide.h-slide--schema{
  background-color: #fff;
}
/* the figure is the card's content now, not a diagram on a dark ground */
.h-slide--schema .schema-line{ stroke: var(--navy); }
.h-slide--schema .schema-node{ fill: var(--navy); }
.h-slide--schema .schema-node.is-open{ fill: #fff; stroke: var(--navy); }
.h-slide--schema .schema-label{ fill: var(--navy); }
/* .align-center.color-white at :2312 and .nav-tag.color-white.center at :2112
   are the two rules that put white on this panel's type */
.h-slide--schema .align-center.color-white,
.h-slide--schema .nav-tag.color-white,
.h-slide--schema .nav-tag.color-white.center{
  color: var(--navy);
}
/* #5ea8ffbf was a one-off blue that is not in the palette. On white the rule
   between the numeral and the step name is a hairline like every other. */
.h-slide--schema .s-line.color-blue{
  background-color: var(--hairline-gold-strong);
}
/* .h-slide--info - the panel the + reveals - has been white since :2401, so
   with the card behind it also white the reveal had no change of ground to
   announce itself, only the slide. It takes the card surface the rest of the
   site uses, which is what separates the two planes. */
.h-slide--schema .h-slide--info{
  border: 1px solid var(--hairline-gold);
}

/* ---- the sub-page hero is glass, not a white rectangle ----
   .test-blend-mode is `background: var(--white); mix-blend-mode: lighten` at
   :1919. Lighten over white resolves to white whatever is behind it, so the
   plate was opaque by construction: a full screen of dead white opening every
   sub-page, with the polymer network running underneath it and never seen.

   Matte brushed glass instead. 93% white is enough to keep the plate reading as
   a white ground - the h1, the eyebrow and the standfirst all hold their
   contrast without being re-tuned - while the network moves under it. The grain
   is a repeating gradient on the background layer rather than a ::before, so it
   cannot paint over the type and needs no asset. */
.test-blend-mode.bot-left.bg-white{
  mix-blend-mode: normal;
  background-color: rgba(255, 255, 255, .88);
  background-image: repeating-linear-gradient(
    115deg,
    rgba(3, 41, 86, .016) 0 1px,
    rgba(3, 41, 86, 0) 1px 3px
  );
  /* blur(18) smeared the network's 1px strands into a flat tonal wash - the
     structure only survives under about 8px. Measured through the plate at
     .88: navy on the lightest point of the network is 11.4:1, so the h1, the
     eyebrow and the standfirst all keep far more than AA. */
  -webkit-backdrop-filter: blur(7px) saturate(118%);
  backdrop-filter: blur(7px) saturate(118%);
}
/* Without backdrop-filter the network would show through a 7% window
   unblurred, which reads as dirt rather than as depth. Go opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .test-blend-mode.bot-left.bg-white{
    background-color: var(--white);
  }
}
/* The title was 300 across a --step-display line on a plate with nothing else
   on it. 400 is a real Cabinet Grotesk cut (300/400/500 ship in assets/fonts),
   so this is weight, not a synthesised bold. */
.test-blend-mode h1,
.title-cont h1{
  font-weight: 400;
}
/* The plate stays full-height - .title-cont went to 100% in v5 for a reason
   documented at :3878, and shortening it puts the title back on the white/navy
   seam. The dead space comes out of the plate's own padding instead. */
.test-blend-mode.bot-left{
  padding-bottom: var(--space-l);
}

/* ---- the landing claim goes under the wordmark, below 480 ----
   This replaces the v7 placement at :4798, and the reason that placement exists
   still holds: home-hero-wordmark.js rests the wordmark on the hero's
   bottom-left and starts it from the hero's vertical centre, drifting down as
   the page scrolls, and at 375 the claim and the wordmark overlapped by 44px
   before v7 gave them different halves of the hero.

   Putting the claim at the bottom of the flow is not enough on its own, and
   measuring it proves why: .test's resting slot runs 596-700 inside an 812
   hero, while the claim's own band - margin-top:auto against a content box that
   ends at 692 - runs 589-672. The two are the same band. Scrubbed from 0 to
   812, the flier overlapped the claim at every step from y=120 to y=600.

   So the slot moves rather than the claim. `bottom: 15rem` lifts the resting
   corner to 468-572 and leaves the whole bottom band free; the hero's own
   padding-bottom comes down from --space-2xl to --space-xl so the claim can use
   it. In rem rather than vw because the old 29.851vw shrank the reserved band
   on exactly the narrow screens that need the claim to wrap to four lines.
   The drift start is the hero's vertical centre (354 here), so the descent into
   the raised corner is still monotonically downward - which is the thing the
   ease at CORNER 0.45 was tuned for. */
@media screen and (max-width: 479.98px){
  .home-hero .div-block.home-margin.follow-section{
    margin-top: auto;
    margin-bottom: var(--space-s);
    align-items: flex-end;
    text-align: right;
  }
  .container.full-page.home-hero{
    padding-bottom: var(--space-xl);
  }
  .home-hero .test{
    bottom: 15rem;
  }
  /* .home-hero .claim-m has carried text-align:right since :3605 - it was the
     box that sat left, not the type inside it */
  .home-hero h1.claim-m{
    max-width: 20ch;
    margin-left: auto;
  }
}

/* ---- the pillar dividers were never actually hidden below 480 ----
   v2 retired the donor's drawn rules when the cards became boxed:
   `.value-divider{ display: none }` at :3283. But the donor restates it inside
   its own mobile block as `.value-divider.blend-overlay{ display: block;
   height: 110vw }` at :2797, which is (0,2,0) against v2's (0,1,0).

   Measured at 375 on /en/advanced-materials: two 1x413px gold rules standing in
   the middle of the stacked pillar column - 826px of empty ground the reader
   scrolls through between three cards. /en carries the bare class and was
   never affected, which is why this survived six versions. */
@media screen and (max-width: 479.98px){
  .value-divider.blend-overlay{ display: none; }
}

/* ---- one left edge in the hero, below 480 ----
   This is the fault v5 named for the card lists at :4205 - "two left edges on
   every phone" - in the one component that pass did not reach. The hero plate
   is `padding-left: 4.975vw` at :2864 while --gutter is a clamp that floors at
   24px: measured at 375, the title sits at x=19 and every other left edge on
   the page at x=24.

   The standfirst is worse, and it is worse in two different ways depending on
   which tier the page is on. `.abs.load-split` at :2857 sets `left: 0;
   margin-left: 4.975vw`, so on the three hand-built discipline pages it lands
   at x=19 with the title. The eleven pages that carry no .load-split keep
   `left: auto` and stretch from x=0 - hard against the screen edge, with no
   gutter at all. Same component, three different left edges.

   All of it onto --gutter, at (0,3,0) and (0,2,0) so the donor's two-class
   rules are answered rather than fought with !important. */
@media screen and (max-width: 479.98px){
  .test-blend-mode.bot-left.bg-white{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .section-hero-bis .abs{
    left: var(--gutter);
    right: var(--gutter);
    margin-left: 0;
    max-width: none;
  }
}

/* hero-background.js settles the network into a still frame under reduced
   motion (its `still` branch at :516), so there is nothing left to see moving
   under the plate - and a full-viewport backdrop blur is then pure cost on
   every scroll frame for no effect. Drop it and carry the ground on alpha,
   the same trade the file already makes in the reduced-motion blocks at
   :4641 and :4658. */
@media (prefers-reduced-motion: reduce){
  .test-blend-mode.bot-left.bg-white{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, .94);
  }
}

/* ---- the last container with its own page edge ----
   v5 removed the donor's `.container.color-black{ padding-left: 0 }` at <=479
   for a reason it set out at :4205: every .container keeps the gutter at every
   width, and a modifier that zeroes it gives the phone two left edges.
   `.container.is-mobile` at :2668 is the same rule under a different modifier
   and was missed - it appears on one page, /en/advanced-materials, which is
   why it survived.

   It did not show while the pillar cards were transparent: a hairline running
   off both screen edges reads as a full-bleed rule. With a white fill the card
   is an object, and an object bleeding off the screen on the one page whose
   siblings all sit on the gutter is the dispersion v4 was written to remove. */
@media screen and (max-width: 479.98px){
  .container.is-mobile{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* ---- the Method panels were unreachable on a phone ----
   v5 stacked this track at <=479.98 (:4151) and v7 reused that stacked
   composition for prefers-reduced-motion at every width (:4666). Both set
   `.track.o-design{ flex-flow: column }` and `.h-slide--schema{ width: 100% }`,
   and the v5 comment says plainly what was intended: "the panel is the page
   width now".

   It never was. The four panels are not children of .track - they sit inside
   `.second-slide`, which is `flex-flow: row` from :2038 at every width and was
   never answered. So `width: 100%` resolved against .second-slide's content box
   and the four panels stayed on one row inside a wrapper that is
   `overflow: hidden` with nothing to scroll it.

   Measured at 375: .second-slide is 1112px wide in a 375px wrapper. Panel 01
   runs 52->323, panel 02 runs 323->594, and panels 03 and 04 sit at 594->865
   and 865->1136 - entirely off-screen and unreachable. Three of the four `+`
   controls are off-screen with them, so steps 02, 03 and 04 of the Method have
   no way to be opened on a phone at all.

   The same holds under reduced motion at every width, because that block
   inherits the same stacked composition and the same untouched .second-slide. */
@media screen and (max-width: 479.98px){
  .second-slide{
    flex-flow: column;
    /* v7 put the page edge on the track at :4756 - "the gutter goes on the
       track so the cards can be 100%" - and gave it a gap. Both were written
       against `.horizontal-section .track > .h-slide`, direct children, which
       is the home track's shape and not this one. Here .second-slide sits in
       between and adds a second 7.463vw edge on top of the track's --gutter:
       measured at 375, the track pads to 24 and the panel starts at 52.
       One edge, and it is the track's, like every other section. */
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    gap: var(--space-s);
  }
}
@media (prefers-reduced-motion: reduce){
  .second-slide{
    flex-flow: column;
    gap: var(--space-s);
  }
}

/* ---- the Method panels stop growing, and get a gap ----
   Three things the user could see at once: a 1px blue rule between every pair
   of panels, panels too big, and nothing between them but that rule.

   The rule is gone from the markup - five .v-line divs, used on this page and
   nowhere else, with nothing in JS referencing them. The two .v-line rules at
   :2388 and :3001 are left where they are, dead, the same way :3729 and :4131
   were left: they name the case they were written for.

   The size is a cap rather than a new number. The panel was `flex: 0 0 42vw`
   with no ceiling, so it grew forever while its height was capped at 34rem in
   v6 - 605x544 at 1440 and 806x544 at 1920, a slab that gets flatter the wider
   the screen. 42vw is kept, because the 480-991 ladder at :4002 and :4005 was
   drawn around label legibility and must not move; it is simply stopped at
   30rem, which is where 42vw lands at ~1143. Below that nothing changes at all.
   At 1440 the panel goes 605 -> 480, at 1920 806 -> 480.

   The height comes down with it. The figure is one SVG on a 440x220 viewBox -
   2:1 - and a 480x544 box is portrait around a landscape drawing. 28rem puts
   the panel at 480x448, which is 1.07 and reads as a card holding a diagram
   rather than a column with a diagram in it. Scoped to 992+ because that is
   the tier the cap applies to; the tablet ladder keeps 34rem.

   The gap is the one every other card list on this site already uses -
   .value-list, .use-case__list and .expertise__list are all
   `clamp(var(--space-s), 1.389vw, var(--space-m))` - so the four lists finally
   agree. It goes on .second-slide, which is the flex parent of the panels;
   .track's own gap is the one between .first-slide and .second-slide. */
.second-slide{
  gap: clamp(var(--space-s), 1.389vw, var(--space-m));
}
@media screen and (min-width: 992px){
  .h-slide.h-slide--schema{
    flex: 0 0 min(42vw, 30rem);
    width: min(42vw, 30rem);
    height: min(100%, 28rem);
  }
}

/* The labels are 13px inside a 440-unit viewBox scaled to the panel width, so
   the panel width sets how big they actually render. v7 raised them from 11 to
   13 at :4636 for exactly this reason. With the panel capped they render at
   12.3px at 1440 against 16 before, so the number goes up to hold the size the
   a11y pass settled on: 14.2px at 1440 and above, and 12.0px at 992 - which is
   larger than the 10.4px that tier renders today. */
.schema-label{
  font-size: 15px;
}

/* The reveal has always been within 2px of overflowing its panel: measured at
   1440 before any of this, step 01's seven items need 542px inside a 544px box.
   So the panel cannot lose 96px of height without the reveal losing the same,
   and the space comes out of its own spacing rather than its content - a 52px
   side padding, a 30px gap under the heading, a 20px gap above the close button
   and a 14.4px gap between seven list items, none of them on the token ladder
   the rest of the site uses. On the tokens, all four reveals need 446px in a
   448px box: the same 2px of headroom the component shipped with. */
@media screen and (min-width: 992px){
  .h-slide--schema .h-slide--info{
    padding: var(--space-s) var(--space-m);
  }
  .h-slide--schema .info--top{ gap: var(--space-s); }
  .h-slide--schema .info-bot{ gap: var(--space-xs); }
  .h-slide--schema .content-hslide__list{ gap: var(--space-2xs); }
  .h-slide--schema .h-slide--info h3{ font-size: var(--step-m); }
}

/* ===========================================================================
   v9 - the four branch pages join the system

   v8 walked 320-1920 across every route and put the fourteen generated pages
   onto the cards, bands and hero the hand-built discipline pages use. What
   neither pass reached is the third tier: the four case-study pages under
   /en/branch. They are hand-built, but out of their own components - a photo
   hero (`.case-projet__home`), a ruled block that wants to be a card
   (`.info-case__item`), a gallery, a tag row - and every one of those was left
   on the donor's raw vw values while the rest of the site moved onto the token
   ladder in v2-v8.

   Walked 320 / 375 / 480 / 768 / 991 / 1440 / 1920 on all four routes,
   measuring rather than reading. Every number below was taken in the browser
   before the rule under it was written.

   Additive, like every block above it. Nothing upstairs is edited in place.
   ========================================================================= */

/* ---- the closing band opens on the rhythm ----
   The white band that carries the whole case study measured `padding-top: 0`
   and `padding-bottom: 0` at every one of the seven widths. What stood in for
   the measure was `.info-case{ padding-top: var(--space-xl) }` at :2216 - a
   flat 80px that never moves, against a --section-y that travels 64 -> 144. So
   the band opened 80px in at 1440 where every other white band on the site
   opens 129.6px in, and 80px in at 375 where they open 64px.

   The band is the same component the discipline pages close on, so it takes
   the same class: `.bg-white.offre-last` in the markup, which reaches v4's
   `.bg-white.offre-last{ padding-top: var(--section-y) }` at :3792. That
   leaves .info-case's own 80px stacking on top of it - the fault v6 named at
   :4519 for `.section-values + .item--marquee`, two section gaps with no
   change of ground between them to justify either. The inner one yields, so
   the measure sits on the band rather than on the first thing inside it. */
.bg-white.offre-last .info-case{ padding-top: 0; }

/* ---- one page edge for the gallery ----
   `.collection-list-wrapper` pads `var(--space-2xl)` at :2245 and `4.975vw`
   below 480 at :2957. Neither is --gutter, and the error is not a constant -
   the gallery's left edge crosses the page's as the viewport grows:

              320    375    480    768   1440   1920
     gallery    16     19    120    120    120    120
     --gutter   24     24     29     46     86    115

   so at 480 the photographs sat 91px inside a page whose every other content
   box was on the gutter, and at 375 they sat 5px outside it. Scoped to
   `.galerie`, because .collection-list-wrapper is also the landing page's and
   the discipline pages' image well, where it is not a page-edge box. */
.galerie .collection-list-wrapper{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- and one for the Programme block below 480 ----
   `.info-case__item.no-border` takes `margin-left: 4.975vw` at :2953, inside a
   `.grid-container.on-mobile` that has no padding of its own at this width.
   Measured at 375: the block starts at x=19 while the three cards above it,
   the hero title and the tag row all start at x=24. The same fault as the hero
   plate's `4.975vw` that v8 answered at :5127, in the one component that pass
   did not reach. */
@media screen and (max-width: 479.98px){
  .info-case__item.no-border{
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
}

/* ---- a card on the white band is the card the white band already has ----
   `.info-case__item` is `border-top` + `border-bottom: 1px solid
   var(--hairline)` with `border-radius: var(--radius-m)` and no side borders
   at :2221. A radius with nothing to round: the corners curl away from a rule
   that runs off both ends, which is what makes the three blocks read as an
   unfinished table rather than as objects.

   Three rows below them, on the same band of the same page, `.use-case__block`
   is a four-sided `var(--hairline-gold)` at `var(--radius-m)`; so is
   `.expertise__item` on the discipline pages. That is the site's card on a
   white ground - v2 drew it at :3256 and v8 spent its headline on making every
   tier agree with it - and this is the last block that does not.

   The colour is the part that needs !important, and it is the only rule in
   nine correction blocks that does. The stylesheet has never controlled this
   border: the IX2 timeline t-083f1820, compiled into
   assets/js/vendor/webflow.6e252011.68a2237ab45ba035.js, scrubs
   `borderColor` from `hsla(0,0%,100%,1)` to `hsla(211.15,50.98%,80%,1)` and
   writes the result inline. So the card opens as a white rule on a white band
   - nothing at all - and settles on #B2CBE6, an opaque pale blue that appears
   in no token, on no other component, and on no other page. Confirmed by
   sampling the element: `style="border-color: rgb(255, 255, 255)"` before the
   reveal, rgb(178, 203, 230) after it. An inline declaration can only be
   answered by !important, the same trade the reduced-motion block makes at
   :4647. Width and radius need no such thing.

   The bottom padding comes back to the top's with it: --space-xl against
   --space-l left 28px of dead ground inside every card, invisible while the
   box had no outline to measure it against. */
.info-case__item{
  border: 1px solid var(--hairline-gold);
  border-color: var(--hairline-gold) !important;
  padding: var(--space-l) var(--space-m);
}
/* .no-border and .no-border-top zero the top rule so a stack of them reads as
   one continuous ruled list. With four sides that is a card missing an edge,
   so both are answered here rather than edited upstairs. */
.info-case__item.no-border,
.info-case__item.no-border-top{ border-top-width: 1px; }

/* ---- the branch spacing joins the ladder ----
   Six raw vw lengths, none of them floored or capped. Measured:

                                     320    375    480    768   1440   1920
     .projets-details margin-bottom   56     65     83    133    250    333
     .galerie         margin-top      22     26     33     53    100    133
     .info-case__list gap              7      8     10     16     30     40
     .intro-header    gap              6      7      8     13     25     33
     .tag             margin-top      56     65     50     80    150    200
     .tag             margin-bottom   32     37     13     21     40     53

   Two of those are gaps between blocks of the page and go onto --section-y,
   the token the rest of the site uses for exactly that - the marquee band on
   this same page already does, at :3519. The other three are component gaps
   and take the floored clamp the README describes, the same shape
   `.value-list`, `.use-case__list` and `.expertise__list` all carry, keeping
   each one's own vw as the middle term so nothing moves at 1440.

   .tag is the one that was not merely uncapped but non-monotonic: the donor
   restates both margins inside its <=479.98 block at :2941, and the restated
   values are larger than the ones above the breakpoint, so both gaps got
   *smaller* as the screen got bigger - margin-top 65 -> 50 and margin-bottom
   37 -> 13 across the 480 line. One value at every width now. */
.projets-details{ margin-bottom: var(--section-y); }
.galerie{ margin-top: var(--section-y); }
.info-case__list{ gap: clamp(var(--space-s), 2.083vw, var(--space-m)); }
.intro-header{ gap: clamp(var(--space-2xs), 1.736vw, var(--space-m)); }
.tag{
  margin-top: var(--section-y);
  margin-bottom: clamp(var(--space-m), 2.778vw, var(--space-l));
}

/* ---- the tag row is a list, not a justified line ----
   `.tag` is `justify-content: space-between` at :2200 with no gap, so the row
   is spaced by however many pills the page happens to carry. Measured at 1440
   inside the same 1252px box: edipop's five pills sit 96px apart, fire-safety's
   three sit 381px apart. Same component, same width, and on fire-safety the
   three read as three unrelated objects pinned across the page rather than as
   a row.

   A real gap, and the one every other list on the site uses. Below 480 the
   donor also sets `place-items: start` at :2940, which stops the pills
   stretching: measured at 375, a pill whose label wraps to two lines stands
   74px tall between two 57px pills. */
.tag{
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(var(--space-s), 1.389vw, var(--space-m));
}

/* ---- the hero eyebrow was clipped at every width but one ----
   `.min-w` is `width: 23.264vw; padding-right: 6vw` at :2198, `60vw` below 480
   at :2932, and `.nav-tag` is `white-space: nowrap` at :2095. SplitText wraps
   each line in a `.gsap_split_line-mask` with `overflow: clip`, so a label that
   cannot wrap and does not fit is cut rather than wrapped. Measured on
   /en/branch/fire-safety, "Thermal and fire performance":

              320    375    480    768    991   1440   1920
     needs     253    253    253    257    261    267    331
     has       173    203     83    133    171    249    331
     clipped    80     50    170    124     90     18      0

   At 480 the reader saw "Thermal a". The three shorter labels on the other
   branches happen to fit, which is why this survived - it is a defect of the
   fixed width, not of the string.

   The same declaration carries a second fault. `.intro-header` is
   `align-items: flex-end`, so the block is already right-aligned against the
   page gutter, and `padding-right: 6vw` then insets it by a second gutter:
   measured at 1440 the eyebrow's right edge landed at 1252 against the page's
   1339. Both go. A measure in rem rather than vw, so the column stays narrow
   at the top of the range and simply wraps if a longer label is ever written. */
.intro-header .nav-tag.min-w,
.intro-header .min-w.load-split,
.intro-header .min-w{
  width: auto;
  min-width: 0;
  max-width: min(24rem, 100%);
  padding-right: 0;
  white-space: normal;
}

/* ---- the hero title takes the weight the other sub-page titles took ----
   The h1 is `.marquee__text`, so it inherits the marquee's own 500 at :1622.
   v8 stepped every other sub-page h1 to 400 at :5040 for a reason that holds
   here too: 400 is a real Cabinet Grotesk cut and a --step-display line does
   not need the extra weight to hold. Named on the section rather than on the
   class, so the marquee band further down the same page keeps its 500. */
.case-projet__home h1{ font-weight: 400; }

/* ---- the card keeps its side padding on a phone ----
   `.info-case__item{ padding: 14.925vw 0 }` at :2949 - 48px at 320, 56 at 375,
   and no horizontal padding at all. That was survivable while the block had no
   left or right edge; with four sides it puts the copy against the outline.
   On the ladder, and continuous with the >=480 value rather than stepping. */
@media screen and (max-width: 479.98px){
  .info-case__item{
    padding: var(--space-l) var(--space-s);
  }
}

/* ---- the gallery plate stops at the asset, not at the grid ----
   `.img-mask` is a flex item of `.img-cont` with no width of its own, so it is
   sized by the photograph inside it: every gallery asset is 1000x1250, and the
   plate therefore stops growing at 1000px however wide the row gets. It shrinks
   below that correctly, which is why this only shows above ~1170. Measured on
   /en/branch/edipop, the wide plate against the two-up row directly under it in
   the same gallery:

                          768   1185   1265   1440   1920
     row box              661   1041   1111   1252   1675
     wide plate           661   1000   1000   1000   1000
     inset each side        0     21     56    126    338
     two-up plate, each   320    511    546    616     824

   So at 1920 the reader gets a plate floating 338px inside a page whose next
   row reaches the gutter on both sides. The plate fills the row, the way it
   already does at every width below 1170, and keeps the assets' own ratio
   rather than being given a new one. */
.galerie .img-cont > .img-mask{
  width: 100%;
}

/* ===========================================================================
   v10 - the branch heroes join the system, and the burger leaves the desktop

   v9 put the four /en/branch pages onto the token ladder - gutters, section
   rhythm, the card, the tag row - but deliberately stopped at their hero. It
   stayed `.case-projet__home`: a sticky 100vh photograph with the h1 parked at
   the bottom of a `justify-content: space-between` box, which is a component
   no other page on the site uses.

   That left the type sitting on a photograph, protected only by
   `.usecase__bg-mask` - a flat 30% navy wash with no gradient. Sampling the
   real image pixels through that wash, at 1440, against #f2f4f8:

                          eyebrow   standfirst   h1 (80px)   required
     fire-safety            12.40        11.05       pass      4.5 / 3
     edipop                 15.62        14.92       8.89      4.5 / 3
     agritech               14.35        14.34     * 2.88      4.5 / 3
     medical-polymers       10.37      *  2.83     * 2.50      4.5 / 3

   Two of the four fail, and which ones fail is decided by the photograph, not
   by the CSS - the h1 lands wherever that image happens to be brightest. A
   heavier scrim would buy numbers on these four images and lose them on the
   next four.

   So the hero becomes the one the discipline pages use - `.section-hero-bis`
   with the frosted `.test-blend-mode.bot-left.bg-white` plate, measured at
   11.4:1 at its lightest point (see :5022) - and the photograph moves out from
   under the type into a full-width plate of its own. The failure mode is
   removed rather than tuned.

   Additive, like every block above it. Nothing upstairs is edited in place.
   ========================================================================= */

/* ---- the lede band under the hero ----
   The branch pages carried their standfirst and Context copy inside the hero,
   in `.grid-container.no-padd.no-grid` - a flex column, so the two blocks
   simply stacked. The discipline pages put the same pair in
   `.grid-container.no-padd.gap-2x` and place them across the 12 columns with
   Webflow node ids (:3160, :3162). Naming the placement rather than borrowing
   another page's generated id, and taking the 479.98 stack it already carries
   at :3223.

   The statement column is polymer's (1-7). The body column is not: polymer
   runs ~40 words there and sits in 10-13, which measured 298px at 1440. The
   branch pages carry two paragraphs, ~90 words, and at that width the column
   ran fifteen lines against a two-line statement beside it. It keeps the span
   the branch pages already had at :3156 - 8-13, 501px - which is the measure
   that copy was written into. */
.branch-lede__statement{ grid-area: 1 / 1 / 2 / 7; }
.branch-lede__body{ grid-area: 1 / 8 / 2 / 13; }

@media screen and (max-width: 479.98px){
  .branch-lede__statement{ grid-column-end: 6; }
  .branch-lede__body{ grid-area: 2 / 1 / 3 / 6; }
}

/* ---- the burger was on the desktop, on all 25 routes ----
   v7 made the burger a real <button> so the mobile menu could be opened from
   the keyboard, and stripped the UA button chrome to keep it looking the same
   (:4608). That reset included `display: flex` to centre the glyph - but
   `button.nav-burger` is (0,1,1) and carries no media query, while the rule
   that hides it is `.nav-burger{ display: none }` at (0,1,0) in the nav
   partial. Specificity beat it at every width, so the burger rendered 18x18
   beside the full desktop link row from 992 up.

   Measured at 1440 on /en/branch/fire-safety before the fix: `display: flex`,
   18x18, x=1336, with all five `.nav--item` links also `display: flex`.

   Hiding it again cannot be done with a bare `.nav-burger{ display: none }` -
   appended, at equal specificity, that would win below 992 as well and take
   the mobile menu with it. The min-width guard is what makes it safe: below
   992 nothing here applies, and the 44x44 touch target at :4331 stands. */
@media screen and (min-width: 992px){
  button.nav-burger{ display: none; }
}

/* ---- gold is not a body-text colour on the light band ----
   `.expertise__link-text` is the "Discover" label on the capability cards,
   12.9px at 600 on `.bg-white`. `.expertise__link-block` sets
   `color: var(--oragne)` at :2532, so it renders #d5ab60 on #fff - measured
   2.14:1, against the 4.5 it needs at that size.

   This is the rule the v6 README already states: gold on white is ~1.9:1, so
   it is for rules, icons and large display type, never body text. The label
   takes the navy the rest of the card uses; the arrow beside it stays gold,
   which is what the colour is for. */
.bg-white .expertise__link-text{ color: var(--black); }

/* ---- the eyebrow keeps its measure on the new parent ----
   `.nav-tag` is `white-space: nowrap` at :2095, and v9 answered that for the
   old hero by scoping the wrap to `.intro-header .nav-tag.min-w` at :5464 -
   the parent this pass removes. The plate is a different parent, so the fix
   has to move with the eyebrow or fire-safety's 27-character label is cut
   again by SplitText's `overflow: clip` mask, which is the fault v9 measured
   at :5438 ("at 480 the reader saw 'Thermal a'").

   Wider than the v9 rule on purpose: the discipline eyebrows are one or two
   short words, so nothing there moves. */
.test-blend-mode .nav-tag{ white-space: normal; }

/* ===========================================================================
   v11 - the photograph returns to the hero, and the gallery becomes a lightbox

   v10 moved the branch hero photograph out from under the type because two of
   the four heroes failed WCAG with the type on the image. The look was right;
   the contrast was not. This pass keeps the photograph and answers the
   contrast differently: the type sits on frosted panels that hug it, so the
   picture stays fully visible and legibility stops depending on which picture
   it is. v10's `.branch-plate` is withdrawn above rather than corrected - the
   photograph is in the hero again, so the band it created is redundant.

   Additive otherwise, like every block above it.
   ========================================================================= */

/* ---- the backdrop, and the scrim it carries ----
   The markup drops `.usecase__bg-mask` and the scrim moves onto a pseudo
   element. Two reasons, both about that div rather than about the design:
   IX2 timeline t-11e0ee7a animates its opacity and writes the result inline
   (which is why the old hero measured .4 against the .3 at :2284), and the
   reduced-motion net at :4648 lists it among the elements forced to
   `opacity: 1 !important` - a safety net meant for animation start states,
   which on a scrim means a solid navy sheet with the photograph invisible
   behind it. A pseudo element is reachable by neither.

   Bottom-weighted rather than flat: darker at the top so the nav's own
   gradient has something to sit on, lightest through the middle where the
   photograph does its work, and a little heavier at the foot to seat the
   title panel. */
/* ---- the backdrop is a layer of the hero, not a sticky full-bleed band ----
   `.use-case__bg` ships `height: 100vh; margin-bottom: -100vh` at :2180 - the
   negative margin is what lifts `.title-cont` back over the photograph - and
   the @supports at :4305 overrides only the height, to 100svh. The margin is
   never restated, so wherever svh < vh (iOS Safari with the URL bar showing,
   ~67px on a 13-class iPhone) the layer's outer height goes negative and the
   type is pulled that far above the section, exposing a navy band at the foot
   of the hero.

   inset:0 on the already-relative section is exact at every viewport, needs no
   negative margin to undo and no 100vw, so the scrollbar-gutter case at :4278
   never arises here either. */
.section-hero-bis.is-branch .use-case__bg{
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin-bottom: 0;
}

@supports (height: 100svh){
  .section-hero-bis.is-branch .use-case__bg{ height: auto; }
}
.section-hero-bis.is-branch .use-case__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(3, 41, 86, .62) 0%,
              rgba(3, 41, 86, .52) 34%,
              rgba(3, 41, 86, .50) 68%,
              rgba(3, 41, 86, .70) 100%);
}

/* ---- the type sits on the photograph, carried by a feathered shadow ----
   No panel. The eyebrow, the headline and the standfirst go white and take a
   three-stop navy shadow: a tight one to hold the letterforms apart from the
   grain, a mid one for weight, and a wide soft one that darkens the ground the
   glyphs sit on without drawing an edge anywhere.

   A shadow is not contrast in the WCAG sense - the ratio is still measured
   against the pixel behind the glyph - so the gradient above does the actual
   work and the shadow does the feathering. The two are tuned together: the
   gradient is heaviest at the foot, where the headline sits, and at the head,
   where the nav does. Measured worst case per photograph in the v11 table. */
.section-hero-bis.is-branch .nav-tag,
.section-hero-bis.is-branch h1,
.section-hero-bis.is-branch .abs{
  color: var(--white);
  text-shadow: 0 1px 2px rgba(2, 24, 51, .62),
               0 2px 14px rgba(2, 24, 51, .78),
               0 8px 38px rgba(2, 24, 51, .62);
}

.section-hero-bis.is-branch .title-cont{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: var(--space-xl);
}

/* An explicit width rather than a content-driven one. SplitText rewrites the
   h1 into block line divs at load, after which the block's max-content
   collapses to the widest line already split - a feedback loop that settled at
   544px and broke "Industrial Fire Safety" across two lines while 665px of
   single line was available. A fixed measure also makes the four sibling
   heroes agree with each other. */
.hero-type{
  display: inline-flex;
  flex-flow: column;
  align-items: flex-start;
  width: min(38rem, 100%);
}

/* `.nav-tag` is `white-space: nowrap` at :2095; v9 answered that for the old
   hero's `.intro-header` and v10 moved it to the plate. This is the third
   parent, so it carries it too - fire-safety's 27-character eyebrow is the
   case, and it has to wrap at 320. */
.section-hero-bis.is-branch .nav-tag{ white-space: normal; }

/* ---- the gallery is a masonry, and every plate is a control ----
   The donor laid the three `.collection-item-2` out as stacked rows - one
   full-bleed plate, a two-up, then another full-bleed - so at 1440 the reader
   met about 1,565px of photograph per row and had to scroll to discover there
   were four.

   Every asset is 1000x1250, a uniform 4:5, so there is no natural variance to
   build a ragged masonry from: the rhythm is imposed here, and the uncropped
   photograph is what the lightbox shows. Multi-column rather than grid because
   it balances by height on its own and needs no JS to place anything - which
   also means the resting state is correct with no script at all, unlike the
   layout it replaces, which sat 30% cropped until GSAP released `.img-mask`. */
/* The page edge used to come from `.galerie .collection-list-wrapper` at :5329,
   which went with the donor nesting - so the grid carries the gutter itself. */
.galerie{ padding-left: var(--gutter); padding-right: var(--gutter); }

/* auto-fit rather than a fixed column count. Multi-column was the first try and
   balanced four plates into two of its three columns, leaving the third empty;
   a fixed 3-track grid instead strands the fourth plate alone on a second row.
   auto-fit collapses the tracks it does not need, so four plates make one full
   row of four at 1440 and fire-safety's three make one full row of three, with
   no hole in either. Measured at 1440: 4 x 302px against 1268px of content. */
.gal-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(var(--space-s), 1.389vw, var(--space-m));
  align-items: start;
}
.gal-tile{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-m);
  aspect-ratio: 4 / 5;
}

/* the sources are all 4:5, so the ragged edge is imposed. The lightbox shows
   each photograph uncropped, which is where the cover crop is paid back. */
.gal-tile:nth-child(3n + 2){ aspect-ratio: 1 / 1; }
.gal-tile:nth-child(3n + 3){ aspect-ratio: 3 / 4; }

.gal-tile__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gal-tile:hover .gal-tile__img,
.gal-tile:focus-visible .gal-tile__img{ transform: scale(1.03); }

@media (prefers-reduced-motion: reduce){
  .gal-tile__img{ transition: none; }
  .gal-tile:hover .gal-tile__img,
  .gal-tile:focus-visible .gal-tile__img{ transform: none; }
}

/* ---- the tag pills take the white ground ----
   The pills were a 1px `#ffffff4d` outline on the navy band - which, now that
   the band behind them is navy rather than a photograph, composites to
   #4F6989 and 2.55:1 against it. They become solid white plates with navy
   type, the same pairing the `.info-case__item` cards and the closing band
   already use, and the label goes from 15:1 white-on-navy to 14.4:1
   navy-on-white without the outline having to carry anything.

   The alignment fault is `.tag-case{ margin-top: .2vw }` at :2206. SplitText
   wraps the label in a `.gsap_split_line-mask` whose `overflow` is `clip`, so
   that margin does not move the text down inside a roomy pill - it pushes the
   glyphs against the bottom of a mask sized to the line box, seating the label
   low and clipping the descenders. Measured at 1440 before: the label's box
   started 42.7px into a 63px pill and finished 2.7px past its bottom edge.
   The pill is already `align-items: center`, so removing the margin is the
   whole fix. */
.tag-block{
  background-color: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.tag-case{ margin-top: 0; }


/* ---- the lightbox ----
   Built by assets/js/shared/lightbox.js on first open and appended to <body>,
   which is also what puts it outside `.bg-white` - the gallery sits inside
   `.bg-white.offre-last`, and :4598 gives anything focused in there a navy
   ring, which on this scrim would be all but invisible. Out here the gold ring
   at :4590 applies, which is the treatment for a dark ground.

   Below the skip link's z-index of 10000 at :4571, the highest on the site. */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 24, 51, .95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

.lightbox__figure{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 68rem);
}

.lightbox__img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-s);
}

@supports (max-height: 78svh){
  .lightbox__img{ max-height: 78svh; }
}

.lightbox__btn{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s ease;
}

.lightbox__btn:hover{ color: var(--gold); }
.lightbox__btn svg{ display: block; }

.lightbox__close{ top: var(--space-m); right: var(--gutter); }
.lightbox__prev{ top: 50%; left: var(--gutter); transform: translateY(-50%); }
.lightbox__next{ top: 50%; right: var(--gutter); transform: translateY(-50%); }

.lightbox__count{
  position: absolute;
  bottom: var(--space-m);
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  font-family: 'General Sans', Arial, sans-serif;
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
}

/* the scrim is a dark ground wherever this ends up in the DOM */
.lightbox button:focus-visible{ outline-color: var(--gold); }

/* Below 768 the side arrows would sit on top of the photograph, so they move
   down beside the counter and the picture keeps the full width. */
@media screen and (max-width: 767.98px){
  .lightbox__prev{ top: auto; bottom: var(--space-m); left: var(--gutter); transform: none; }
  .lightbox__next{ top: auto; bottom: var(--space-m); right: var(--gutter); transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .lightbox{ transition: none; }
  .lightbox.is-open{ transition: none; }
  .lightbox__btn{ transition: none; }
}

/* ===========================================================================
   v12 - the responsive audit

   24 routes x 8 widths (320 / 375 / 480 / 768 / 991 / 1280 / 1440 / 1920) =
   192 page-audits, driven through a same-origin iframe with the scrollbar
   suppressed so the layout viewport equals the nominal width, plus fractional
   probes at 479.5 / 767.5 / 991.5.

   Most of it came back clean: zero horizontal pan, zero elements past the
   viewport, zero text clipped by its own overflow, zero zero-height text
   boxes, zero type under 12px, zero distorted images, and - once the backdrop
   was resolved by hit-testing rather than by walking DOM ancestors - zero
   contrast failures on a solid ground. Two measurement notes, because both
   changed the answer: parsing `clamp(1.5rem, 6vw, 8rem)` for --gutter yields
   NaN, and measuring a probe element instead cut 310 reported misalignments
   to 10 real ones; and a text element's backdrop is often a painted *sibling*
   rather than an ancestor - `p.abs` sits beside the hero plate, not inside it -
   which cut 57 reported contrast failures to one.

   What follows is what survived. Additive, like every block above it.
   ========================================================================= */

/* ---- the related-branch cards sat on the screen edge below 480 ----
   Measured at 320 and 375: `.use-case__list`'s first card at left: 0 against a
   --gutter of 24. Ten instances across the site.

   The cause is :4218. That rule zeroes the page edge on `.value-list` and
   `.use-case__list` together, and its comment gives the reasoning - "the
   gutter comes from the .container above them, once, as it does everywhere
   else." That holds for `.value-list`, whose chain is
   `div.container.color-black < div.section-values`, and it measures 24 = the
   gutter, correct. It has never held for `.use-case__list`, whose chain is
   `div.use-case__wrapper < div.last-section.bg-white` with no `.container`
   anywhere on any route. So the rule took a page edge away from the one list
   that had no other source for one.

   Restored on that list alone, and as the token rather than the 4.975vw it
   replaced - the donor value was 15.9px at 320 against a 24px gutter, which is
   the second-edge fault :4212 was written to remove. */
@media screen and (max-width: 479.98px){
  .use-case__list{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* ---- the touch targets the 44px rule never reached ----
   v7 gave the burger 44x44 at :4331 and the mobile menu rows 44px at :4343,
   citing WCAG 2.5.8's 24px as the standard and 44px as the practical minimum.
   The rest of the site was never brought along. Measured at 375:

     .link-block.ml-link      LEGAL NOTICE        106 x 17   24 routes
     .link-block.no-mobile    email               161 x 17   24 routes
     .expertise__link-block   DISCOVER             84 x 17   16 routes
     .link-plain              inline links        131 x 23   11 routes
     .nav--logo                                    96 x 29   23 routes
     .button-small                                111 x 40   24 routes
     .skip-link                                   174 x 43   24 routes

   The first four are under 24px and fail the standard outright. Padding and
   min-height rather than font-size, for the reason :4325 already gives: the
   type sizes are right, it is the hit area that is not.

   `.link-plain` is the exception and is handled differently. It sits in
   running copy, where 2.5.8 exempts a target "in a sentence or otherwise
   constrained by the line-height of non-target text" - and forcing 44px on it
   would push the lines of a paragraph apart. Vertical padding on an inline box
   enlarges the hit area without entering the line box, so the target grows and
   the paragraph does not move. */
@media screen and (max-width: 991px){
  .link-block,
  .expertise__link-block,
  .nav--logo,
  .skip-link{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .button-small__center{ height: 44px; }
  /* measured 41px at .62em; .8em clears 44 at every step of --step-body */
  .link-plain{ padding-top: .8em; padding-bottom: .8em; }
}

/* ---- the burger's breakpoint had a fractional gap ----
   v10 answered :4608's unmediated `display: flex` with a `min-width: 992px`
   block. At a viewport of 991.x neither that nor the `max-width: 991px` rules
   match, so :4608 - specificity (0,1,1) - wins and the burger returns beside
   the desktop nav. It is the same gap the project closed once already by
   moving 479px to 479.98px.

   `not all and (max-width: 991px)` is the exact complement of the rules it has
   to pair with, so no width can fall between them. The file already uses that
   spelling at :3758 and :4238. The v10 rule above is left in place and this
   one supersedes it: later, same specificity. */
@media not all and (max-width: 991px){
  button.nav-burger{ display: none; }
}

/* ---- two paddings that shrank as the screen grew ----
   `.tag-block{ padding: 4.975vw }` at :2971 measures 15.92 / 18.66 / 23.83 at
   320 / 375 / 479, and then drops to `var(--space-s)`'s 20px the moment 480
   applies. The pill therefore tightens by 3.8px as the screen gets bigger -
   the non-monotonic fault the v9 pass named in its own table. Flat at the
   token, which is what every width above the breakpoint already uses.

   The drawer has the same 4.975vw on its sides (:3060, :3120): 15.92px at 320
   against a 24px gutter, so the menu's content edge and the page's disagree by
   8px on the one screen where they are seen one after the other. */
@media screen and (max-width: 479.98px){
  .tag-block{ padding: var(--space-s); }
  .nav-mobile-panel{ padding: 17.91vw var(--gutter) 7.463vw; }
  .submenu__block{ padding: 17.91vw var(--gutter) 7.463vw; }
}

/* ---- the last two uncapped gaps the README still records as open ----
   `.center-text` (:2014) is 6.944vw with no cap: 100px at 1440 and 133px at
   1920, where every other gap on the site is a floored clamp. Capped at
   --space-2xl, which is where it already sits at 1728.

   `.div-block-2.no-mw` (:2061) is .625vw with no floor: 2.3px at 375 against
   9px at 1440, so the gold list mark closes onto its text as the screen
   narrows. Floored at --space-2xs.

   And the same block's `align-items: flex-start` (:2063) is flipped to
   `center` by the donor's phone block at :2905, so on a phone the mark sits
   against the middle of a three-line item rather than its first line. Equal
   specificity, donor wins on document order; this settles it. Shared with
   /en/nanotechnology and /en/advanced-materials, which is why v9 left it for a
   pass that could measure all three tiers - this is that pass. */
.center-text{
  grid-column-gap: clamp(var(--space-l), 6.944vw, var(--space-2xl));
  grid-row-gap: clamp(var(--space-l), 6.944vw, var(--space-2xl));
}

.div-block-2.no-mw{
  grid-column-gap: clamp(var(--space-2xs), .625vw, var(--space-xs));
  grid-row-gap: clamp(var(--space-2xs), .625vw, var(--space-xs));
}

@media screen and (max-width: 479.98px){
  .div-block-2.no-mw{ align-items: flex-start; }
}