/* The navigation sits above every section and changes tone once the hero leaves view. */
.header{position:fixed;z-index:1000;top:7px;left:7px;right:7px;min-height:102px;padding:16px 3%;border-radius:17px;color:#fff;transition:background .35s,color .35s,box-shadow .35s,min-height .35s,padding .35s;isolation:isolate}
.header.is-scrolled{min-height:74px;padding-top:9px;padding-bottom:9px;background:rgba(242,240,233,.96);color:#292d29;box-shadow:0 12px 36px #292d2924;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;justify-content:center;width:76px;height:70px;text-indent:0;letter-spacing:0}
.brand-logo{display:block;width:auto;height:69px;object-fit:contain}
.brand-logo-dark{display:none}
.header.is-scrolled .brand-logo-white{display:none}
.header.is-scrolled .brand-logo-dark{display:block;height:55px}
.header.is-scrolled .brand{height:55px}
.header.is-scrolled .pill{border-color:#292d2950;color:#292d29}
.header.is-scrolled .pill.solid{background:#292d29;border-color:#292d29;color:#f7f5ef}
.header.is-scrolled .pill:hover{background:#474e45;color:#fff;border-color:#474e45}
.header.is-scrolled .language{color:#292d29}
.header.is-scrolled .language.selected{background:#292d29;color:#fff}
.header.is-scrolled a:focus-visible,.header.is-scrolled button:focus-visible{outline-color:#292d29}
.menu-dialog{position:fixed;max-height:min(760px,calc(100svh - 30px));overflow:auto;box-shadow:0 25px 90px #1118}
.menu-dialog .menu-logo{display:flex;align-items:center;height:64px;letter-spacing:0}
.menu-dialog .menu-logo img{display:block;width:auto;height:62px}
.menu-dialog nav{margin:22px 0 36px}
.menu-dialog nav a{font-family:HidenDisplay,Arial,sans-serif;font-weight:300;text-transform:uppercase;font-size:clamp(24px,3vw,36px);transition:padding-left .25s,color .25s}
.menu-dialog nav a:hover{padding-left:8px;color:#73796f}
.menu-dialog nav a small{width:24px;flex:none}
.menu-dialog nav a span:last-child{font-family:Arial,sans-serif;font-size:22px}
.hero,.solutions,.services-section,.partnership{scroll-margin-top:96px}
.slide-button{position:relative;min-width:43px;justify-content:center;padding-bottom:13px}
.slide-button::after{content:'';position:absolute;left:3px;right:3px;bottom:2px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left}
.slide-button.current::after{animation:slide-progress 6.8s linear forwards}
@keyframes slide-progress{to{transform:scaleX(1)}}
.scene.active{animation:scene-breathe 6.8s ease-out both}
@keyframes scene-breathe{from{transform:scale(1.055)}to{transform:scale(1)}}
@media(min-width:1800px){.header{min-height:110px}.brand,.brand-logo{height:80px}.header.is-scrolled .brand,.header.is-scrolled .brand-logo-dark{height:64px}}
@media(max-width:1100px){.header{min-height:86px;padding-top:13px;padding-bottom:13px}.brand,.brand-logo{height:62px}.header.is-scrolled .brand,.header.is-scrolled .brand-logo-dark{height:50px}}
@media(max-width:700px){.header{padding:16px 22px;min-height:125px;align-items:flex-start}.brand,.brand-logo{height:48px}.brand{width:36px}.header-right{margin-top:3px}.header.is-scrolled{min-height:66px;padding:9px 17px;align-items:center}.header.is-scrolled .products{display:none}.header.is-scrolled .brand,.header.is-scrolled .brand-logo-dark{height:45px}.header.is-scrolled .header-right{margin-top:0}.menu-dialog .menu-logo{height:53px}.menu-dialog .menu-logo img{height:50px}.menu-dialog nav{margin:22px 0 28px}.menu-dialog nav a{font-size:24px;padding:14px 0}.hero,.solutions,.services-section,.partnership{scroll-margin-top:70px}}
@media(prefers-reduced-motion:reduce){.header{transition:none}.scene.active,.slide-button.current::after{animation:none}.slide-button.current::after{transform:scaleX(1)}}
/* Primary navigation mirrors the five sections on the existing HIDEN site. */
.products{gap:6px;min-width:0}
.products .pill{padding:0 16px;font-size:11px;min-height:40px}
@media(max-width:1000px){.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 18px;min-height:115px}.brand{order:0;margin-left:auto}.header-right{order:1}.products{order:2;flex-basis:100%;justify-content:center}.products .pill{padding:0 15px}.header.is-scrolled{min-height:104px}.header.is-scrolled .products{display:flex}}
@media(max-width:700px){.header{align-items:flex-start;min-height:125px;gap:13px}.brand{margin-left:0}.header-right{margin-left:auto}.products{justify-content:flex-start;flex-wrap:wrap;gap:6px}.products .pill{min-height:32px;padding:0 10px;font-size:9px}.header.is-scrolled{min-height:66px;align-items:center;gap:0}.header.is-scrolled .products{display:none}}
@media(min-width:701px) and (max-width:1000px){.header{position:fixed}.header .brand{position:absolute;left:50%;top:12px;transform:translateX(-50%);margin:0}.header.is-scrolled .brand{top:9px}.header .header-right{margin-left:auto}.header .products{margin-top:30px}}
@media(max-width:700px){.products .pill{min-height:36px;padding:0 12px;font-size:10px}.products{gap:7px}}
/* Tablet header: one clear utility row, then a restrained section rail. */
@media(min-width:701px) and (max-width:1100px){
  .header{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand controls" "nav nav";align-items:center;gap:12px 18px;min-height:0;padding:16px 3% 17px}
  .header .brand{position:static;grid-area:brand;transform:none;justify-self:start;order:unset;margin:0;width:56px;height:60px}
  .header .brand-logo{height:60px}
  .header .header-right{grid-area:controls;justify-self:end;order:unset;margin:0}
  .header .products{grid-area:nav;display:flex;flex-basis:auto;width:100%;justify-content:space-between;gap:0;order:unset;margin:0;padding-top:9px;border-top:1px solid #ffffff75}
  .header .products .pill{flex:1;min-height:30px;border:0;border-radius:0;padding:0 8px;background:transparent;color:#fff;font-size:11px;letter-spacing:.045em;text-transform:uppercase}
  .header .products .pill:not(:last-child){border-right:1px solid #ffffff66}
  .header .products .pill:hover{background:#ffffff25;color:#fff}
  .header.is-scrolled{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand controls";min-height:70px;padding:8px 3%;gap:0}
  .header.is-scrolled .brand{position:static;transform:none;height:52px;margin:0}
  .header.is-scrolled .brand-logo-dark{height:52px}
  .header.is-scrolled .products{display:none}
}
/* Phone navigation: consistent widths instead of uneven wrapped pills. */
@media(max-width:700px){
  .header{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand controls" "nav nav";align-items:start;gap:12px 10px;min-height:0;padding:16px 20px}
  .header .brand{grid-area:brand;order:unset;margin:0}
  .header .header-right{grid-area:controls;order:unset;justify-self:end;margin:0}
  .header .products{grid-area:nav;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;flex-basis:auto;margin:0;padding-top:9px;border-top:1px solid #ffffff70}
  .header .products .pill{grid-column:span 2;min-width:0;min-height:35px;border:1px solid #ffffffb8;border-radius:25px;background:#fffffff0;color:#292d29;padding:0 5px;font-size:10px;letter-spacing:0;text-transform:none}
  .header .products .pill:nth-child(n+4){grid-column:span 3}
  .header.is-scrolled{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand controls";min-height:65px;padding:8px 17px;gap:0}
  .header.is-scrolled .products{display:none}
}
/* Phones keep the navigation inside the menu dialog, leaving the hero open and calm. */
@media(max-width:700px){
  .header,.header.is-scrolled{grid-template-areas:"brand controls";min-height:66px;padding:9px 17px;align-items:center;gap:0}
  .header .products,.header.is-scrolled .products{display:none}
  .header .brand{height:48px;width:36px}
  .header .brand-logo{height:48px}
  .header .header-right{margin:0}
}