/* =========================================================
   KLARX home hero — full-screen dawn scene
   Layout is drawn on a 1280×800 reference frame; every size is
   a multiple of --u (1px at 1280×800, scales with the screen).
   ========================================================= */
.kx-hero{
  --u:min(100vh/800,max(100vw/1280,min(100vw/640,.75px)));
  --ink:#ffffff;
  --nav:rgba(236,246,238,.9);
  --sub:rgba(226,240,230,.76);
  --link:rgba(255,222,186,.86);
  --hair:rgba(255,255,255,.19);
  --btn:#ffffff;
  --btn-ink:#0b5a33;
  position:relative;isolation:isolate;overflow:hidden;
  height:100vh;min-height:0;
  display:flex;flex-direction:column;align-items:center;
  color:var(--ink);
  background:#04140d linear-gradient(90deg,#03110b 0%,#04140d 22%,#05170f 45%,#05160e 62%,#04130c 80%,#03100a 100%);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;font-kerning:normal;
  text-align:center;
}
@supports (height:100dvh){.kx-hero{--u:min(100dvh/800,max(100vw/1280,min(100vw/640,.75px)));height:100dvh}}
.kx-hero a{color:inherit;text-decoration:none}
.kx-hero a:focus{outline:none}
.kx-hero a:focus-visible{outline:2px solid #ffc77a;outline-offset:4px;border-radius:2px}

/* Masthead */
.kx-mast{padding-top:calc(env(safe-area-inset-top,0px) + 40.5 * var(--u));display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.kx-logo{display:inline-flex;align-items:center;gap:calc(10 * var(--u))}
.kx-logo img{height:max(calc(34 * var(--u)),26px);width:auto}
.kx-logo span{font-weight:700;font-size:max(calc(21 * var(--u)),16px);letter-spacing:.2em;line-height:1;margin-right:-.2em}
.kx-hair{width:max(calc(284 * var(--u)),252px);height:1px;background:var(--hair);margin-top:calc(22 * var(--u));transform-origin:50% 50%}
.kx-nav{width:max(calc(284 * var(--u)),252px);display:flex;justify-content:space-between;margin-top:calc(17.4 * var(--u));padding:0 calc(8.9 * var(--u));list-style:none}
.kx-nav li{display:block}
.kx-nav a{display:block;font-size:max(calc(15 * var(--u)),13px);letter-spacing:-.02em;color:var(--nav);line-height:1.2;transition:color .2s}
.kx-nav a:hover{color:#fff}

/* Copy */
.kx-gap{flex:82.98 1 0;min-height:calc(24 * var(--u))}
.kx-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:0 24px}
.kx-h1{margin:0;font-weight:500;color:var(--ink);font-size:max(calc(66 * var(--u)),34px);line-height:1.02;letter-spacing:-.034em;white-space:nowrap}
.kx-h1 .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.kx-h1 .li{display:block}
.kx-h1 .l2{letter-spacing:-.036em}
.kx-h1 .l2 .li{color:#ffd29a}
.kx-sub{margin:calc(20 * var(--u)) 0 0;font-size:max(calc(20 * var(--u)),15px);line-height:1.4;letter-spacing:-.005em;color:var(--sub);text-wrap:balance;max-width:none}
.kx-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:max(calc(84 * var(--u)),64px);width:max(calc(232 * var(--u)),204px);height:max(calc(48 * var(--u)),44px);border-radius:max(calc(999 * var(--u)),999px);background:var(--btn);color:var(--btn-ink)!important;font-weight:600;font-size:max(calc(16.5 * var(--u)),15px);letter-spacing:-.02em;transition:background .2s,box-shadow .2s,transform .2s}
.kx-btn:hover{background:#fff6ea;box-shadow:0 0 0 calc(4 * var(--u)) rgba(247,147,30,.22)}
.kx-btn:focus-visible{outline-offset:3px!important}
.kx-more{display:inline-flex;align-items:center;gap:.4em;margin-top:calc(20.5 * var(--u));font-size:max(calc(14.8 * var(--u)),13px);letter-spacing:-.02em;color:var(--link)!important;transition:color .2s}
.kx-more:hover{color:#ffe7c9!important}
.kx-more svg{width:.68em;height:.85em;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.kx-more:hover svg{transform:translateY(.12em)}

/* Dawn field */
.kx-field{position:relative;flex:318.68 1 0;min-height:calc(160 * var(--u));width:100%;container-type:size;z-index:1;pointer-events:none}
.kx-scene{position:absolute;left:50%;top:max(calc(84 * var(--u)),64px);transform:translate(-50%,-50.463%);
  height:max(60vw,90vh);aspect-ratio:1619/971;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%);mask-image:linear-gradient(180deg,transparent 0,#000 4%)}
@supports (height:1cqh){.kx-scene{height:max(calc(100cqw * 971 / 1619),calc((100cqh - max(calc(84 * var(--u)),64px)) / .49537 + 1px))}}
.kx-scene .sun{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .kx-scene .glow{animation:kxGlow 7s ease-in-out infinite}
  .kx-scene .drift{animation:kxDrift 9s linear infinite}
}
@keyframes kxGlow{50%{opacity:.78}}
@keyframes kxSpark{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.82) rotate(12deg);opacity:.75}}
@keyframes kxDrift{to{stroke-dashoffset:-40}}

/* Tablet */
@media (min-width:600px) and (max-width:1099.98px) and (min-height:541px){
  .kx-hero{--u:min(100vh/800,1px,max(100vw/1280,100vh/1190,.86px))}
  @supports (height:100dvh){.kx-hero{--u:min(100dvh/800,1px,max(100vw/1280,100dvh/1190,.86px))}}
  .kx-field{max-height:48%}
  .kx-nav a{padding:14px 8px;margin:-14px -8px}
  .kx-more{padding:12px 10px;margin-left:-10px;margin-right:-10px;margin-bottom:-12px}
}
/* Phone portrait */
@media (max-width:599.98px) and (orientation:portrait){
  .kx-hero{--u:min(100vh/800,max(100vw/1280,min(100vw/640,.75px)))}
  @supports (height:100svh){.kx-hero{--u:min(100svh/800,max(100vw/1280,min(100vw/640,.75px)));height:100svh}}
  .kx-copy{padding:0 24px}
  .kx-h1{font-size:max(28px,min(calc(66 * var(--u)),calc((100vw - 48px) / 11.4)))}
  .kx-sub{font-size:max(16px,min(calc(20 * var(--u)),3.6vw));line-height:1.3;overflow-wrap:break-word}
  .kx-hair,.kx-nav{width:min(max(calc(284 * var(--u)),252px),calc(100vw - 32px))}
  .kx-field{max-height:46%}
  .kx-nav a{padding:14px 8px;margin:-14px -8px}
  .kx-more{padding:12px 10px;margin-left:-10px;margin-right:-10px;margin-bottom:-12px}
}
/* Short landscape */
@media (max-height:540px) and (orientation:landscape){
  .kx-logo img{height:max(calc(34 * var(--u)),20px)}
  .kx-logo span{font-size:max(calc(21 * var(--u)),12px)}
  .kx-hair,.kx-nav{width:max(calc(284 * var(--u)),210px)}
  .kx-nav a{font-size:max(calc(15 * var(--u)),11px)}
  .kx-h1{font-size:max(calc(66 * var(--u)),28px)}
  .kx-sub{font-size:max(calc(20 * var(--u)),12px)}
  .kx-btn{width:max(calc(232 * var(--u)),160px);height:max(calc(48 * var(--u)),34px);font-size:max(calc(16.5 * var(--u)),12.5px)}
  .kx-more{font-size:max(calc(14.8 * var(--u)),11px)}
  .kx-gap{min-height:calc(14 * var(--u))}
  .kx-field{min-height:calc(120 * var(--u))}
}
@media (max-height:540px) and (orientation:landscape) and (pointer:coarse){
  .kx-nav a{padding:12px 8px;margin:-12px -8px}
  .kx-more{padding:10px;margin:0 -10px -10px}
}
@media (max-width:359.98px) and (orientation:landscape),(max-width:359.98px) and (min-aspect-ratio:1/1){.kx-h1{white-space:normal;font-size:30px}}

/* Entrance: hidden states while .intro is on */
.intro .kx-logo,.intro .kx-nav li,.intro .kx-sub,.intro .kx-btn,.intro .kx-more{opacity:0}
.intro .kx-hair{transform:scaleX(0)}
.intro .kx-h1 .li{transform:translateY(104%)}
.intro .kx-scene .sun{transform:translateY(55%)}
@media (prefers-reduced-motion:reduce){.kx-hero *{transition:none!important;animation:none!important}}