/* ONE shared header stylesheet, loaded LAST on every page. */

/* From pyramid-brand.css */
/* Kian Computer pyramid identity */
.topbar .logo>img.kian-pyramid-mark{display:block;width:55px;height:53px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 1px 5px rgba(0,174,255,.25))}
.kian-footer-v2 .kian-footer-logo{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.kian-footer-v2 .kian-footer-logo .kian-pyramid-mark{width:44px;height:38px;object-fit:contain;vertical-align:middle}
@media(max-width:600px){.topbar .logo>img.kian-pyramid-mark{width:42px;height:42px}.kian-footer-v2 .kian-footer-logo .kian-pyramid-mark{width:36px;height:32px}}

/* Exact approved raster artwork, not a redrawn SVG. */
.kian-pyramid-mark{object-fit:contain;mix-blend-mode:screen;}


/* From header-brighter-logo.css */
/* Brighter header + larger exact approved logo (Nov 2026) */
.topbar{background:radial-gradient(ellipse at 24% 50%,#123d73 0%,#0a2b56 44%,#061b39 100%)!important;border-bottom:1px solid #2189ce!important;box-shadow:0 4px 22px rgba(0,140,255,.18)}
.topbar .nav-shell{max-width:1500px;min-height:110px;padding:12px 24px;gap:16px}
.topbar .logo{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.topbar .logo .kian-header-full-logo{display:block;width:clamp(290px,29vw,440px);height:auto;max-height:98px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 2px 9px rgba(0,165,255,.25))}
.topbar .location{display:none!important}
.topbar .nav-shell nav{gap:clamp(10px,1.35vw,22px);font-size:14px}
.topbar .nav-shell nav .book{padding:13px 15px}
@media(max-width:1100px){.topbar .nav-shell{min-height:94px}.topbar .logo .kian-header-full-logo{width:clamp(255px,29vw,340px)}}
@media(max-width:850px){.topbar .nav-shell{min-height:86px;padding:9px 15px}.topbar .logo .kian-header-full-logo{width:clamp(230px,56vw,350px)}.topbar .nav-shell nav{background:#09254b!important}}
@media(max-width:420px){.topbar .nav-shell{min-height:74px;padding:8px 10px;gap:8px}.topbar .logo .kian-header-full-logo{width:min(65vw,270px)}.topbar .mobile-menu{padding:5px 9px;font-size:22px}}

/* Full-width, softly illuminated navy-blue header — Nov 2026 */
html body .topbar{
  width:100%;
  background:linear-gradient(105deg,#173e6b 0%,#1c4c7b 34%,#194571 68%,#12355d 100%) !important;
  border-bottom:1px solid rgba(95,198,255,.56) !important;
  box-shadow:0 5px 24px rgba(9,79,145,.16) !important;
}
/* Keep the entire bar illuminated, not just the logo area */
html body .topbar::before,html body .topbar::after{pointer-events:none}
html body .topbar .nav-shell{background:transparent !important;max-width:1500px;margin-inline:auto}
html body .topbar .logo .kian-header-full-logo{filter:drop-shadow(0 2px 7px rgba(66,190,255,.17))}
@media(max-width:850px){html body .topbar{background:linear-gradient(110deg,#1b4774,#19446e 65%,#14385f)!important}}


/* From header-text-logo.css */
/* Logo mark only is an image; all text and effects are native HTML/CSS */
.topbar{background:linear-gradient(105deg,#194d80 0%,#225d91 48%,#194a7b 100%)!important;}
.topbar .logo{display:flex!important;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;min-width:0}
.topbar .logo .kian-header-pyramid{width:104px;height:100px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 5px 8px rgba(0,185,255,.26))}
.topbar .logo .kian-header-words{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.kian-header-words strong{font-family:Arial,Helvetica,sans-serif;font-size:clamp(23px,2.35vw,39px);font-weight:850;letter-spacing:-1.5px;line-height:1;}
.kian-word-white{color:#fff}.kian-word-blue{color:#10c9ff}
.kian-header-words small{display:flex;align-items:center;gap:8px;color:#f2f8ff;font-family:Arial,Helvetica,sans-serif;font-size:clamp(10px,1.06vw,17px);font-weight:400;letter-spacing:0;line-height:1.3}
.kian-header-words small i{display:block;width:27px;height:2px;background:#11d4ff;flex-shrink:0}
@media(max-width:1100px){.topbar .logo .kian-header-pyramid{width:77px;height:78px}.kian-header-words strong{font-size:clamp(20px,2.3vw,30px)}.kian-header-words small{font-size:11px}.kian-header-words small i{width:15px}}
@media(max-width:850px){.topbar .logo .kian-header-pyramid{width:70px;height:70px}.kian-header-words strong{font-size:clamp(20px,4vw,28px)}.kian-header-words small{font-size:clamp(9px,2vw,12px)}}
@media(max-width:430px){.topbar .logo{gap:5px}.topbar .logo .kian-header-pyramid{width:50px;height:56px}.kian-header-words strong{font-size:clamp(17px,5vw,22px);letter-spacing:-.7px}.kian-header-words small{font-size:8px;gap:3px}.kian-header-words small i{width:8px}}


/* From kian-header-animated.css */
/* Kian Computer | visible, subtle luminous wave header | 2026-11-06 */
html body header.topbar {position:sticky!important;top:0;z-index:100;isolation:isolate;overflow:visible;background:linear-gradient(110deg,#122e54 0%,#1c5985 42%,#206b94 62%,#14365d 100%)!important;border-bottom:1px solid rgba(65,206,255,.43)!important;box-shadow:0 4px 18px rgba(0,20,48,.22)!important}
/* Two light ribbons cross the entire bar; animation changes glow rather than moving text */
html body header.topbar::before {content:""!important;display:block!important;position:absolute!important;inset:0!important;pointer-events:none!important;z-index:0!important;background:radial-gradient(ellipse 32% 26% at 18% 85%,rgba(55,218,255,.42),transparent 85%),radial-gradient(ellipse 35% 32% at 73% 10%,rgba(28,193,255,.32),transparent 88%),linear-gradient(172deg,transparent 28%,rgba(48,201,255,.04) 35%,rgba(55,220,255,.28) 40%,rgba(18,148,255,.11) 44%,transparent 52%),linear-gradient(8deg,transparent 52%,rgba(56,208,255,.06) 58%,rgba(57,221,255,.22) 62%,transparent 69%)!important;filter:blur(8px)!important;opacity:.64!important;animation:kianLuminousBreath 12s ease-in-out infinite!important}
html body header.topbar::after {content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:15px!important;pointer-events:none!important;z-index:0!important;background:radial-gradient(ellipse 45% 45% at 28% 75%,rgba(64,229,255,.57),transparent 95%),linear-gradient(90deg,transparent,rgba(41,199,255,.24) 30%,rgba(40,216,255,.31) 62%,transparent)!important;filter:blur(7px)!important;opacity:.48!important;animation:kianLuminousEdge 12s ease-in-out infinite!important}
html body header.topbar>.nav-shell{position:relative!important;z-index:2!important;background:transparent!important}
html body header.topbar .logo{position:relative!important;isolation:isolate!important;background:transparent!important;box-shadow:none!important}
html body header.topbar .kian-header-pyramid{position:relative!important;z-index:2!important;filter:drop-shadow(0 3px 7px rgba(0,190,255,.33))!important}
html body header.topbar .logo::before{content:""!important;position:absolute!important;left:0!important;bottom:0!important;top:auto!important;width:clamp(80px,8vw,130px)!important;height:19px!important;z-index:1!important;pointer-events:none!important;border-radius:50%!important;background:radial-gradient(ellipse at center,rgba(189,253,255,.85),rgba(38,208,255,.55) 32%,rgba(0,139,255,.15) 68%,transparent 85%)!important;filter:blur(6px)!important;opacity:.58!important;animation:kianPyramidBreath 8s ease-in-out infinite!important}
html body header.topbar .kian-header-words{position:relative!important;z-index:2!important;background:transparent!important}
html body header.topbar .kian-word-white{color:#fff!important}
html body header.topbar .kian-word-blue{color:#38d8ff!important}
html body header.topbar .kian-header-words small{color:#eef8ff!important}
@keyframes kianLuminousBreath{0%,100%{opacity:.48;filter:blur(10px)}50%{opacity:.86;filter:blur(6px)}}
@keyframes kianLuminousEdge{0%,100%{opacity:.28}50%{opacity:.67}}
@keyframes kianPyramidBreath{0%,100%{opacity:.43;transform:scaleX(.88)}50%{opacity:.83;transform:scaleX(1.08)}}
@media(max-width:850px){html body header.topbar .logo::before{width:75px!important;height:14px!important}html body header.topbar::before{filter:blur(6px)!important}}
@media(prefers-reduced-motion:reduce){html body header.topbar::before,html body header.topbar::after,html body header.topbar .logo::before{animation:none!important}}


/* From kian-header-legacy-fade.css */
/* Kian Computer - adapted opacity slideshow from supplied legacy code. */
html body header.topbar{position:sticky!important;top:0;isolation:isolate;overflow:visible;background:#10335c!important}
html body header.topbar::before,html body header.topbar::after{animation:none!important;opacity:0!important}
html body header.topbar>.kian-fade-stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kian-fade-panel{position:absolute;inset:0;opacity:0;transition:opacity 3.5s ease-in-out;will-change:opacity;background-size:cover}
.kian-fade-panel.is-active{opacity:1}
.kian-fade-panel:nth-child(1){background:radial-gradient(ellipse 45% 95% at 30% 90%,rgba(36,171,234,.32),transparent 85%),linear-gradient(110deg,#132c52,#19547e 51%,#143b65)}
.kian-fade-panel:nth-child(2){background:radial-gradient(ellipse 55% 80% at 76% 12%,rgba(35,200,235,.25),transparent 80%),linear-gradient(110deg,#153459,#21638b 53%,#12385d)}
.kian-fade-panel:nth-child(3){background:radial-gradient(ellipse 55% 90% at 48% 85%,rgba(18,149,230,.30),transparent 80%),linear-gradient(110deg,#142f55,#1c537c 50%,#1b4970)}
.kian-fade-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(172deg,transparent 30%,rgba(71,214,255,.10) 48%,transparent 58%),radial-gradient(ellipse 40% 14% at 40% 100%,rgba(40,206,255,.18),transparent);opacity:.62;animation:kianStageBreath 9s ease-in-out infinite}
html body header.topbar>.nav-shell{position:relative!important;z-index:2!important;background:transparent!important}
html body header.topbar .logo::before{animation:kianPyramidBreath 8s ease-in-out infinite!important}
@keyframes kianStageBreath{0%,100%{opacity:.35}50%{opacity:.75}}
@media(prefers-reduced-motion:reduce){.kian-fade-panel{transition:none!important}.kian-fade-stage::after{animation:none!important}html body header.topbar .logo::before{animation:none!important}}


/* From kian-header-3d-enhanced.css */
/* Kian Computer: stronger cross-fade, gentle 3D pyramid, flat breathing glow */
html body header.topbar>.kian-fade-stage{perspective:none!important}
html body header.topbar .kian-fade-panel{transition:opacity 3.8s cubic-bezier(.4,0,.2,1)!important}
html body header.topbar .kian-fade-panel:nth-child(1){background:radial-gradient(ellipse 56% 110% at 18% 88%,rgba(27,209,255,.55),transparent 76%),linear-gradient(110deg,#0e2448,#12658e 50%,#11345e)!important}
html body header.topbar .kian-fade-panel:nth-child(2){background:radial-gradient(ellipse 52% 115% at 82% 12%,rgba(15,225,241,.52),transparent 78%),linear-gradient(110deg,#132e58,#277ca3 52%,#0d345c)!important}
html body header.topbar .kian-fade-panel:nth-child(3){background:radial-gradient(ellipse 55% 115% at 50% 93%,rgba(42,154,255,.60),transparent 78%),linear-gradient(110deg,#112c56,#195487 52%,#166b90)!important}
html body header.topbar .kian-fade-stage::after{opacity:.75!important;animation:kianStageBreathStrong 10s ease-in-out infinite!important;background:radial-gradient(ellipse 38% 30% at 32% 98%,rgba(35,211,255,.31),transparent 92%),linear-gradient(172deg,transparent 30%,rgba(59,221,255,.19) 46%,transparent 62%)!important}
/* 3D is ONLY on the pyramid image; never rotate the blue glow underneath. */
html body header.topbar .logo{perspective:680px!important;transform-style:preserve-3d!important}
html body header.topbar .kian-header-pyramid{transform-origin:50% 52%!important;backface-visibility:visible;animation:kianPyramid3D 9s ease-in-out infinite!important;filter:drop-shadow(4px 5px 3px rgba(0,11,42,.48)) drop-shadow(-2px 0 4px rgba(115,228,255,.38))!important}
html body header.topbar .logo::before{transform-style:flat!important;animation:kianFlatBlueGlow 8s ease-in-out infinite!important;filter:blur(7px)!important;transform-origin:center!important}
@keyframes kianPyramid3D{0%,100%{transform:rotateY(-8deg) rotateX(1deg) translateZ(0)}50%{transform:rotateY(8deg) rotateX(-1deg) translateZ(5px)}}
@keyframes kianFlatBlueGlow{0%,100%{opacity:.43;transform:scaleX(.91)}50%{opacity:.75;transform:scaleX(1.07)}}
@keyframes kianStageBreathStrong{0%,100%{opacity:.46}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){html body header.topbar .kian-header-pyramid,html body header.topbar .logo::before,html body header.topbar .kian-fade-stage::after{animation:none!important}html body header.topbar .kian-header-pyramid{transform:none!important}}


/* From kian-header-lighting-v2.css */
/* Kian Computer: more visible moving light and ocean-blue crossfades.
   Header text/navigation and existing pyramid 3D are intentionally untouched. */
html body header.topbar {background:#0c2850!important;border-bottom:1px solid rgba(90,225,255,.52)!important;box-shadow:0 5px 22px rgba(1,20,50,.27)!important}
html body header.topbar>.kian-fade-stage {overflow:hidden!important;isolation:isolate!important}
html body header.topbar .kian-fade-panel:nth-child(1) {background:radial-gradient(ellipse 48% 170% at 18% 95%,rgba(14,220,255,.74),transparent 79%),radial-gradient(ellipse 47% 120% at 78% 10%,rgba(28,126,255,.34),transparent 83%),linear-gradient(105deg,#091d42 0%,#12628f 44%,#137ba0 61%,#102a54 100%)!important}
html body header.topbar .kian-fade-panel:nth-child(2) {background:radial-gradient(ellipse 46% 170% at 80% 2%,rgba(17,222,245,.70),transparent 80%),radial-gradient(ellipse 40% 120% at 28% 100%,rgba(25,126,255,.45),transparent 82%),linear-gradient(110deg,#0c2d56 0%,#187da7 47%,#0c507d 67%,#091f47 100%)!important}
html body header.topbar .kian-fade-panel:nth-child(3) {background:radial-gradient(ellipse 50% 160% at 49% 95%,rgba(38,185,255,.75),transparent 80%),radial-gradient(ellipse 44% 140% at 90% 0%,rgba(14,232,236,.38),transparent 82%),linear-gradient(110deg,#091f49 0%,#155781 37%,#187da5 63%,#0a2c55 100%)!important}
/* Moving wide light ribbons: independent from the slideshow crossfade. */
html body header.topbar>.kian-fade-stage::before {content:"";position:absolute;inset:-85% -45%;z-index:2;pointer-events:none;background:linear-gradient(106deg,transparent 30%,rgba(95,231,255,.03) 38%,rgba(102,237,255,.28) 44%,rgba(25,167,255,.12) 49%,transparent 57%),linear-gradient(75deg,transparent 35%,rgba(22,155,255,.04) 43%,rgba(73,225,255,.18) 48%,transparent 57%);filter:blur(12px);mix-blend-mode:screen;animation:kianRibbonTravel 13s ease-in-out infinite alternate!important}
html body header.topbar>.kian-fade-stage::after {content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 42% 72% at 24% 105%,rgba(73,220,255,.34),transparent 88%),radial-gradient(ellipse 36% 70% at 77% -12%,rgba(73,216,255,.28),transparent 90%),linear-gradient(180deg,rgba(2,15,44,.13),transparent 50%,rgba(0,31,75,.15));opacity:.65!important;animation:kianAmbientPulse 8s ease-in-out infinite!important}
@keyframes kianRibbonTravel {0%{transform:translateX(-17%) skewX(-6deg);opacity:.55}50%{opacity:1}100%{transform:translateX(17%) skewX(6deg);opacity:.78}}
@keyframes kianAmbientPulse {0%,100%{opacity:.42}50%{opacity:.9}}
@media(max-width:700px){html body header.topbar>.kian-fade-stage::before{filter:blur(8px);animation-duration:16s!important}}
@media(prefers-reduced-motion:reduce){html body header.topbar>.kian-fade-stage::before,html body header.topbar>.kian-fade-stage::after{animation:none!important;transform:none!important;opacity:.6!important}}


/* From kian-sky-blue-header.css */
/* Kian Computer | Sky-blue luminous wave header | 2026-11-06
   This layer changes ONLY the header backdrop, never the pyramid or its flat glow. */
html body header.topbar {
  background:linear-gradient(100deg,#0751a9 0%,#087bcb 45%,#0866bb 75%,#03489c 100%)!important;
  border-bottom:2px solid rgba(65,230,255,.94)!important;
  box-shadow:0 3px 16px rgba(0,93,206,.30),inset 0 -1px 10px rgba(48,226,255,.25)!important;
}
html body header.topbar>.kian-fade-stage {overflow:hidden!important;}
html body header.topbar .kian-fade-panel:nth-child(1) {
  background:radial-gradient(ellipse 40% 120% at 45% 110%,rgba(17,236,255,.50),transparent 85%),radial-gradient(ellipse 35% 100% at 90% 0%,rgba(0,199,255,.42),transparent 85%),linear-gradient(100deg,#0750a7 0%,#0878c8 46%,#0866b7 76%,#034795 100%)!important;
}
html body header.topbar .kian-fade-panel:nth-child(2) {
  background:radial-gradient(ellipse 46% 130% at 68% 95%,rgba(54,228,255,.55),transparent 86%),radial-gradient(ellipse 35% 90% at 16% 0%,rgba(30,166,255,.48),transparent 85%),linear-gradient(103deg,#034b9c 0%,#078ad4 45%,#0757b1 82%,#0678c8 100%)!important;
}
html body header.topbar .kian-fade-panel:nth-child(3) {
  background:radial-gradient(ellipse 45% 115% at 25% 100%,rgba(27,228,255,.55),transparent 83%),radial-gradient(ellipse 40% 115% at 85% 5%,rgba(18,185,255,.55),transparent 87%),linear-gradient(98deg,#0659ad 0%,#0674c5 36%,#0588d0 62%,#064b9f 100%)!important;
}
/* Smooth sweeping curved cyan ribbons drawn as scalable SVG, rather than straight CSS gradients. */
html body header.topbar>.kian-fade-stage::before {
  content:""!important;position:absolute!important;inset:-15% -12%!important;z-index:2!important;
  pointer-events:none!important;
  background:url('../images/kian-sky-waves.svg') center center / 100% 100% no-repeat!important;
  filter:drop-shadow(0 0 10px rgba(71,239,255,.75))!important;
  mix-blend-mode:screen!important;
  opacity:.96!important;
  animation:kianSkyWaves 11s ease-in-out infinite alternate!important;
}
html body header.topbar>.kian-fade-stage::after {
  content:""!important;position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;
  background:radial-gradient(ellipse 38% 70% at 22% 110%,rgba(0,224,255,.29),transparent 85%),radial-gradient(ellipse 43% 105% at 78% -10%,rgba(33,218,255,.25),transparent 85%),linear-gradient(180deg,rgba(2,27,83,.16),transparent 52%,rgba(0,30,107,.13))!important;
  opacity:.78!important;
  animation:kianSkyPulse 8s ease-in-out infinite!important;
}
html body header.topbar>.nav-shell{position:relative!important;z-index:5!important;}
@keyframes kianSkyWaves{0%{transform:translate3d(-5%,3%,0) scale(1.06);opacity:.72}50%{opacity:1}100%{transform:translate3d(5%,-3%,0) scale(1.06);opacity:.95}}
@keyframes kianSkyPulse{0%,100%{opacity:.46}50%{opacity:.92}}
@media(max-width:850px){html body header.topbar>.kian-fade-stage::before{background-size:175% 100%!important;background-position:center!important;animation-duration:15s!important}}
@media(prefers-reduced-motion:reduce){html body header.topbar>.kian-fade-stage::before,html body header.topbar>.kian-fade-stage::after{animation:none!important;transform:none!important;opacity:.75!important}}


/* From kian-ocean-real.css */
/* STYLE 2: Real animated vector ocean waves — no wave image or video. */
html body header.topbar {background:#031c43!important;border-bottom:1px solid #12dafa!important;box-shadow:0 5px 18px rgba(0,18,56,.4)!important;}
html body header.topbar .kian-fade-panel:nth-child(1){background:radial-gradient(ellipse 60% 120% at 45% 110%,rgba(0,100,210,.34),transparent 85%),linear-gradient(105deg,#03152e 0%,#06356c 45%,#051a42 100%)!important}
html body header.topbar .kian-fade-panel:nth-child(2){background:radial-gradient(ellipse 55% 110% at 77% 10%,rgba(0,155,223,.30),transparent 85%),linear-gradient(110deg,#041f43,#074677 48%,#031735)!important}
html body header.topbar .kian-fade-panel:nth-child(3){background:radial-gradient(ellipse 65% 140% at 25% 105%,rgba(0,119,221,.35),transparent 85%),linear-gradient(110deg,#051832,#06345e 50%,#061e48)!important}
/* Disable prior SVG background image waves; actual waves below are SVG elements in DOM. */
html body header.topbar>.kian-fade-stage::before{content:none!important;background:none!important;animation:none!important}
html body header.topbar>.kian-fade-stage::after{content:none!important;background:none!important;animation:none!important}
html body header.topbar>.kian-fade-stage{overflow:hidden!important;isolation:isolate!important}
.kian-ocean{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:.96}
.kian-ocean svg{width:100%;height:100%;display:block;overflow:visible;position:absolute;inset:0}
.kian-ocean .ocean-upper{animation:oceanUpper 13s ease-in-out infinite alternate;transform-origin:center}
.kian-ocean .ocean-lower{animation:oceanLower 15s ease-in-out infinite alternate;transform-origin:center}
.kian-ocean .ocean-trace{animation:oceanShimmer 7s ease-in-out infinite}
.kian-ocean .ocean-spark{animation:oceanSpark 5s ease-in-out infinite alternate}
.kian-ocean .ocean-spark:nth-of-type(2n){animation-delay:-2.4s}
@keyframes oceanUpper{0%{transform:translate(-5%,3%) scaleX(1.10);opacity:.68}50%{opacity:1}100%{transform:translate(4%,-3%) scaleX(1.1);opacity:.88}}
@keyframes oceanLower{0%{transform:translate(4%,3%) scaleX(1.10);opacity:.75}50%{opacity:1}100%{transform:translate(-5%,-3%) scaleX(1.10);opacity:.83}}
@keyframes oceanShimmer{0%,100%{opacity:.38}50%{opacity:1}}
@keyframes oceanSpark{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.35)}}
html body header.topbar>.nav-shell{z-index:10!important}
@media(max-width:800px){.kian-ocean svg{width:170%;left:-35%}.kian-ocean{opacity:.65}}
@media(prefers-reduced-motion:reduce){.kian-ocean *{animation:none!important}.kian-ocean{opacity:.8}}


/* From header-uniform-layout.css */
/* Kian Computer: consistent header layout across Home and internal pages.
   This file deliberately does not alter the animated ocean-wave background. */
@media (min-width: 851px) {
  html body header.topbar > .nav-shell,
  html body.modern-site header.topbar > .nav-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1920px !important;
    min-height: 110px !important;
    padding: 12px clamp(20px, 2.2vw, 42px) !important;
    margin-inline: auto !important;
    gap: 16px !important;
    display: flex !important;
    align-items: center !important;
  }
  html body header.topbar .nav-shell > .logo,
  html body.modern-site header.topbar .nav-shell > .logo {
    flex: 0 0 auto !important;
    gap: 12px !important;
  }
  html body header.topbar .nav-shell nav#main-nav,
  html body.modern-site header.topbar .nav-shell nav#main-nav {
    margin-left: auto !important;
    gap: clamp(12px, 1.45vw, 28px) !important;
    align-items: center !important;
    font-size: 15px !important;
  }
}
/* Match mobile container dimensions without overriding the dropdown behavior. */
@media (max-width: 850px) {
  html body header.topbar > .nav-shell,
  html body.modern-site header.topbar > .nav-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 15px !important;
  }
}

/* 2026-11-06: normalize the actual typography and navigation cascade.
   Home loads reference-home.css, while inner pages load style.css and
   unified-pages.css. Their inherited font/line-height and link rules differ. */
html body header.topbar,
html body.modern-site header.topbar {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
html body header.topbar .nav-shell,
html body.modern-site header.topbar .nav-shell {
  font-family: inherit !important;
  line-height: inherit !important;
}
html body header.topbar .nav-shell .logo,
html body.modern-site header.topbar .nav-shell .logo {
  text-decoration: none !important;
  line-height: 1.1 !important;
}
html body header.topbar .nav-shell #main-nav,
html body.modern-site header.topbar .nav-shell #main-nav {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
html body header.topbar .nav-shell #main-nav a,
html body.modern-site header.topbar .nav-shell #main-nav a {
  text-decoration: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
@media (min-width: 851px) {
  html body header.topbar > .nav-shell,
  html body.modern-site header.topbar > .nav-shell {
    width: 100% !important;
    max-width: 1360px !important;
    min-height: 110px !important;
    padding: 12px 20px !important;
    gap: 18px !important;
  }
  html body header.topbar .nav-shell #main-nav,
  html body.modern-site header.topbar .nav-shell #main-nav {
    gap: clamp(12px, 1.4vw, 24px) !important;
  }
}
@media (max-width: 850px) {
  html body header.topbar .nav-shell #main-nav,
  html body.modern-site header.topbar .nav-shell #main-nav {
    font-size: 15px !important;
  }
}


/* FINAL AUTHORITATIVE LAYOUT - same on Home and internal pages */
html body header.topbar {box-sizing:border-box!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;position:relative!important;}
html body header.topbar > .nav-shell {box-sizing:border-box!important;width:100%!important;max-width:1440px!important;min-height:126px!important;margin:0 auto!important;padding:14px 28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;}
html body header.topbar > .nav-shell > a.logo {box-sizing:border-box!important;display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;margin:0!important;gap:14px!important;}
html body header.topbar > .nav-shell > nav#main-nav {box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(10px,1.15vw,23px)!important;margin:0 0 0 auto!important;padding:0!important;flex:0 1 auto!important;width:auto!important;max-width:none!important;}
html body header.topbar > .nav-shell > .location {display:none!important;}
html body header.topbar .nav-shell nav#main-nav > a,html body header.topbar .nav-shell nav#main-nav .services-main-link {white-space:nowrap!important;}
@media (max-width:1100px) and (min-width:851px){html body header.topbar > .nav-shell{padding:12px 18px!important;gap:10px!important}html body header.topbar > .nav-shell > nav#main-nav{gap:10px!important;font-size:13px!important}}
@media(max-width:850px){html body header.topbar > .nav-shell{width:100%!important;max-width:100%!important;min-height:88px!important;padding:10px 16px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important}html body header.topbar > .nav-shell > nav#main-nav{width:100%!important;max-width:100%!important;flex:0 0 100%!important;display:none!important;flex-direction:column!important;align-items:stretch!important;margin:0!important;padding:12px!important;gap:8px!important}html body header.topbar > .nav-shell > nav#main-nav.open,html body header.topbar > .nav-shell > nav#main-nav.active,html body header.topbar > .nav-shell > nav#main-nav.show{display:flex!important}html body header.topbar > .nav-shell > .mobile-menu{display:block!important;margin-left:auto!important}}


/* Single owner of Services dropdown styles */

/* Accessible Services dropdown shared across pages */
#main-nav .services-dropdown{position:relative;display:flex;align-items:center;gap:0}#main-nav .services-main-link{padding-right:3px}#main-nav .services-drop-toggle{border:0;background:transparent;color:inherit;cursor:pointer;padding:9px 10px;font:inherit;font-size:20px;line-height:1}#main-nav .services-drop-toggle:hover,#main-nav .services-drop-toggle:focus-visible{color:#50c7ff}#main-nav .services-submenu{display:none;position:absolute;top:100%;left:0;min-width:270px;max-height:min(70vh,540px);overflow-y:auto;background:#071c38;border:1px solid #3977b0;border-radius:12px;box-shadow:0 15px 38px #0008;padding:8px;z-index:9999}#main-nav .services-dropdown.open .services-submenu,#main-nav .services-dropdown:focus-within .services-submenu{display:grid}#main-nav .services-submenu a{display:block;padding:10px 13px;color:#eef7ff;text-decoration:none;border-radius:6px;white-space:normal;font-size:14px}#main-nav .services-submenu a:hover,#main-nav .services-submenu a:focus-visible{background:#194b7b;color:#fff}@media(max-width:800px){#main-nav .services-dropdown{flex-wrap:wrap;width:100%}#main-nav .services-dropdown .services-submenu{position:static;flex:0 0 100%;width:100%;min-width:0;max-height:50vh;box-shadow:none}}


/* FINAL CANONICAL HEADER LAYOUT - identical for body and body.modern-site. */
html body header.topbar,html body.modern-site header.topbar{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0!important;padding:0!important;position:sticky!important;top:0!important;z-index:100!important;font-family:Arial,Helvetica,sans-serif!important;font-size:15px!important;line-height:1.35!important;color:#fff!important}
@media(min-width:851px){
html body header.topbar>.nav-shell,html body.modern-site header.topbar>.nav-shell{box-sizing:border-box!important;width:100%!important;max-width:1440px!important;min-height:126px!important;margin:0 auto!important;padding:14px 28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important}
html body header.topbar>.nav-shell>a.logo,html body.modern-site header.topbar>.nav-shell>a.logo{display:flex!important;align-items:center!important;flex:0 0 auto!important;margin:0!important;gap:14px!important}
html body header.topbar>.nav-shell>nav#main-nav,html body.modern-site header.topbar>.nav-shell>nav#main-nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(10px,1.15vw,23px)!important;margin:0 0 0 auto!important;padding:0!important;width:auto!important;max-width:none!important;flex:0 1 auto!important;font-family:Arial,Helvetica,sans-serif!important;font-size:15px!important;line-height:1.35!important;font-weight:700!important}
}
html body header.topbar>.nav-shell>.location,html body.modern-site header.topbar>.nav-shell>.location{display:none!important}
html body header.topbar nav#main-nav a,html body.modern-site header.topbar nav#main-nav a{font-family:Arial,Helvetica,sans-serif!important;text-decoration:none!important;line-height:1.35!important}
@media(max-width:1100px) and (min-width:851px){html body header.topbar>.nav-shell,html body.modern-site header.topbar>.nav-shell{padding:12px 18px!important;gap:10px!important}html body header.topbar>.nav-shell>nav#main-nav,html body.modern-site header.topbar>.nav-shell>nav#main-nav{gap:10px!important;font-size:13px!important}}
@media(max-width:850px){html body header.topbar>.nav-shell,html body.modern-site header.topbar>.nav-shell{box-sizing:border-box!important;width:100%!important;max-width:none!important;min-height:88px!important;padding:10px 16px!important;margin:0 auto!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important}html body header.topbar>.nav-shell>nav#main-nav,html body.modern-site header.topbar>.nav-shell>nav#main-nav{width:100%!important;max-width:100%!important;flex:0 0 100%!important;display:none!important;flex-direction:column!important;align-items:stretch!important;margin:0!important;padding:12px!important;gap:8px!important}html body header.topbar>.nav-shell>nav#main-nav.open,html body.modern-site header.topbar>.nav-shell>nav#main-nav.open,html body header.topbar>.nav-shell>nav#main-nav.active,html body.modern-site header.topbar>.nav-shell>nav#main-nav.active,html body header.topbar>.nav-shell>nav#main-nav.show,html body.modern-site header.topbar>.nav-shell>nav#main-nav.show{display:flex!important}html body header.topbar>.nav-shell>.mobile-menu,html body.modern-site header.topbar>.nav-shell>.mobile-menu{display:block!important;margin-left:auto!important}}

/* Desktop: hide the white three-line mobile navigation button beside the Kian Computer logo. Keep it available on smaller screens. */
@media (min-width: 851px) { html body header.topbar .nav-shell > button.mobile-menu { display: none !important; visibility: hidden !important; } }
@media (max-width: 850px) { html body header.topbar .nav-shell > button.mobile-menu { display: block !important; visibility: visible !important; } }