/* ═══════════════════════════════════════════════════════
   KŌKORO³ — GLOBAL CSS v6
   ═══════════════════════════════════════════════════════ */

/* ── LIGHT MODE ── */
:root {
  --bg:      #f5f4f0;
  --bg2:     #eeecea;
  --bg3:     #e2e0d8;
  --card:    #fafaf7;
  --fg:      #141414;
  --fg2:     #686866;
  --fg3:     #9a9896;
  --line:    #d4d2ca;
  --line2:   #c0beb6;
  --yellow:  #FFCE1A;
  --blue:    #5878a0;
  --brown:   #9e7d63;
  --red:     #c44040;
  --pink:    #c2697e;
  --overlay: rgba(245,244,240,0.86);
  --fh: 'Bebas Neue', sans-serif;
  --fh2: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  --fb: 'Epilogue', sans-serif;
  --ease:   cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-o: cubic-bezier(0.16,1,0.3,1);
  --ease-b: cubic-bezier(0.34,1.56,0.64,1);
  --pad:    clamp(20px,5vw,88px);
  --navh:   72px;
  --max:    1380px;
  --tt:     background 0.45s var(--ease),color 0.45s var(--ease),border-color 0.45s var(--ease);

}


/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--fb);background:var(--bg);color:var(--fg);
  overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;
  transition:var(--tt);
}
body.is-loading{overflow:hidden}
a{text-decoration:none;color:inherit;cursor:none}
img{display:block;max-width:100%}
button{cursor:none;border:none;background:transparent}



/* ── LOGO — force only one visible ── */

/* LIGHT THEME */
.logo-light-img {
  display: block !important;
}

.logo-dark-img {
  display: none !important;
}

/* DARK THEME */

/* ── LOADER — static symbol ── */
.loader{
  position:fixed;inset:0;z-index:9999;background:#0c0c0c;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transition:opacity 0.8s var(--ease),visibility 0.8s;
}
.loader.out{opacity:0;visibility:hidden;pointer-events:none}
.loader-symbol{width:64px;height:auto}
.loader-symbol img,.loader-symbol svg{width:100%;height:auto;display:block}
.loader-num{
  font-family:var(--fh);font-size:112px;line-height:1;
  color:#333;letter-spacing:-2px;transition:color 0.4s;
}
.loader-num.hot{color:var(--yellow)}
.loader-bar{width:260px;height:1.5px;background:rgba(255,255,255,0.07);overflow:hidden}
.loader-fill{height:100%;width:0%;background:var(--yellow);transition:width 0.08s linear}
.loader-word{font-size:10px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.18)}

/* ── CURSOR ── */
.c-dot{
  position:fixed;width:7px;height:7px;background:var(--fg);border-radius:50%;
  pointer-events:none;z-index:9990;transform:translate(-50%,-50%);
  mix-blend-mode:difference;transition:width 0.2s var(--ease),height 0.2s var(--ease);
}
.c-ring{
  position:fixed;width:32px;height:32px;
  border:1.5px solid rgba(26,26,26,0.2);
  border-radius:50%;pointer-events:none;z-index:9989;
  transform:translate(-50%,-50%);
  transition:width 0.35s var(--ease),height 0.35s var(--ease),opacity 0.3s;
}

body.c-on .c-dot{width:44px;height:44px;background:var(--fg);mix-blend-mode:difference}
body.c-on .c-ring{opacity:0}

/* ── PAGE CURTAIN ── */
.curtain{
  position:fixed;inset:0;background:#0c0c0c;z-index:9800;
  transform:scaleY(0);transform-origin:bottom;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.curtain-k{width:52px;opacity:0}
.curtain-k svg{width:100%}

/* ── NAV — always dark bg (nav itself is transparent, but logo/btn visible) ── */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--navh);
  display:flex;align-items:center;justify-content:space-between;
  z-index:800;pointer-events:none;
  transition:transform 0.4s var(--ease);
  padding: 0 var(--pad);
}
.nav>*{pointer-events:all}
.nav.hidden{transform:translateY(-100%)}

.nav-logo{display:flex;align-items:center}
.nav-logo-img{height:60px;width:auto;display:block;transition:opacity 0.3s}
.nav-logo:hover .nav-logo-img{opacity:0.72}

.nav-actions{display:flex;align-items:center;gap:12px}

/* Theme toggle */

.theme-toggle:hover{border-color:var(--fg)}
/* Menu button */
.menu-btn{
  width:44px;height:44px;background:var(--fg);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:transform 0.4s var(--ease-b),background 0.3s;
}
.menu-btn:hover{transform:scale(1.1)}
.menu-btn span{
  display:block;width:14px;height:1.5px;background:var(--bg);
  transition:transform 0.35s var(--ease),opacity 0.25s,background 0.3s;
}
.nav-open .menu-btn span:nth-child(1){transform:rotate(45deg) translate(3px,3px)}
.nav-open .menu-btn span:nth-child(2){transform:rotate(-45deg) translate(3px,-3px)}

/* ── NAV PANEL — ALWAYS DARK ── */
.nav-panel{position:fixed;inset:0;z-index:700;pointer-events:none}
.np-bg{
  position:absolute;inset:0;
  /* Light mode: light bg with dark text */
  background:#f5f4f0;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path 0.85s var(--ease-o), background 0.45s;
}
/* Dark mode: dark bg with white text */

.nav-open .nav-panel{pointer-events:all}
.nav-open .np-bg{clip-path:circle(160% at calc(100% - 44px) 44px)}

.np-inner{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1fr 360px;
  align-content:center;padding:var(--navh) var(--pad) 60px;gap:60px;
}
.np-links{display:flex;flex-direction:column;justify-content:center;gap:2px}
.np-link{
  display:flex;align-items:baseline;gap:18px;padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  transition:border-color 0.2s;
  opacity:0;transform:translateX(-24px);
  transition:opacity 0.5s var(--ease),transform 0.5s var(--ease),border-color 0.2s;
  text-decoration:none;
}
.nav-open .np-link{opacity:1;transform:translateX(0)}

.nav-open .np-link:nth-child(1){transition-delay:0.12s}
.nav-open .np-link:nth-child(2){transition-delay:0.17s}
.nav-open .np-link:nth-child(3){transition-delay:0.22s}
.nav-open .np-link:nth-child(4){transition-delay:0.27s}
.nav-open .np-link:nth-child(5){transition-delay:0.32s}
.np-link:hover{border-bottom-color:var(--yellow)}

.np-num{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:0.22em;
  color:rgba(0,0,0,0.3);min-width:24px;transition:color 0.45s;}

/* Nav links are ALWAYS white text (always dark bg) */
.np-label{font-family:var(--fh);font-size:clamp(42px,6vw,76px);
  color:#141414;line-height:1;transition:color 0.2s;}

.np-link:hover .np-label{color:var(--yellow)}
.np-sub{font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(0,0,0,0.3);margin-bottom:0.12em;transition:color 0.45s;}

.np-preview{display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s 0.38s}
.nav-open .np-preview{opacity:1}
.np-preview-art{border-radius:6px;overflow:hidden;width:100%;background:#1a1a1a;transition:transform 0.44s var(--ease-b)}
.np-preview-art svg{width:100%;height:auto;display:block}

.np-footer{
  position:absolute;bottom:36px;left:var(--pad);right:var(--pad);
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  font-size:11px;color:rgba(0,0,0,0.35);letter-spacing:0.05em;transition:color 0.45s;
  opacity:0;transition:opacity 0.4s 0.42s;
}
.nav-open .np-footer{opacity:1}

/* Theme toggle inside menu (always dark context) */

.np-theme-toggle:hover{border-color:var(--yellow);background:rgba(255,255,255,0.08)}
.np-t-sun,

.np-socials{margin-left:auto;display:flex;gap:14px}
.np-socials a{color:rgba(0,0,0,0.35);transition:color 0.2s;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase}

.np-socials a:hover{color:var(--yellow)}

/* ── BUTTONS — fixed text visibility ── */
.btn-fill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fb);font-size:12px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  background:var(--fg);color:var(--bg);
  padding:14px 28px;border-radius:2px;
  border:2px solid var(--fg);
  transition:background 0.3s,color 0.3s,border-color 0.3s,transform 0.3s var(--ease-b);
  text-align:center;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-fill:hover{background:transparent;color:var(--fg);transform:translateY(-2px);box-shadow:none;}

.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fb);font-size:12px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  background:transparent;color:var(--fg);
  padding:14px 28px;border-radius:2px;
  border:2px solid var(--fg);
  transition:all 0.3s,transform 0.3s var(--ease-b);
  text-align:center;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-line:hover{background:var(--fg);color:var(--bg);transform:translateY(-2px)}

/* Footer button — always yellow, visible in both light/dark footer */
.footer .btn-fill{
  background:var(--yellow) !important;
  color:#111 !important;
  border-color:var(--yellow) !important;
}
.footer .btn-fill:hover{
  background:transparent !important;
  color:var(--yellow) !important;
  border-color:var(--yellow) !important;
  /* border alone = single clean yellow outline, no double shadow */
  box-shadow:none !important;
  transform:translateY(-2px);
}

/* ── SECTION HELPERS ── */
.sec-eyebrow{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;color:var(--fg3);
  margin-bottom:16px;transition:color 0.45s;
}
.sec-title{
  font-family:var(--fh);font-size:clamp(48px,6vw,88px);
  line-height:0.95;text-transform:uppercase;margin-bottom:20px;
  color:var(--fg);transition:color 0.45s;
}

/* ── MARQUEE — seamless infinite loop, no visible gap ── */
.marquee-bar{
  background:var(--fg);overflow:hidden;padding:18px 0;
  transition:background 0.45s;
}
/* Wrap in outer div to handle overflow cleanly */
.marquee-bar-inner{
  display:flex;
  width:100%;
  overflow:hidden;
}
.mb-track {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  /* Content repeated 4x, animate exactly -25% (1 repetition) */
  animation: marqueeInfinite 40s linear infinite;
  will-change: transform;
  min-width: 100%;
}
/* Hide any extra tracks */
.mb-track+.mb-track,.mb-rev{display:none}
.mb-track span{
  font-family:var(--fh);
  font-size:clamp(18px,2.2vw,30px);
  color:var(--bg);
  letter-spacing:0.08em;
  white-space:nowrap;
  display:inline;
  transition:color 0.45s;
}
.mb-track em{font-style:normal;color:var(--yellow)}
/* !!KEY!! animate by exactly -25% (4 copies = -25% is one full copy) */
@keyframes marqueeInfinite {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* ── FOOTER ── */
.footer{overflow:hidden;transition:background 0.45s,color 0.45s}

/* Light mode: dark footer */
.footer{background:var(--fg);color:var(--bg)}

/* Dark mode: WHITE footer bg, dark text */

/* Dark mode footer is white — yellow button still works */

/* Footer border */

.ft-upper{padding:160px var(--pad) 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.ft-upper-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:50px;gap:40px;flex-wrap:wrap}
.ft-logo-img{height:140px;width:auto;display:block}
/* Footer uses symbol.svg — no theme switching needed, no filter */
.footer .ft-logo-img { display: block; filter: none; }

.ft-cta-text{font-family:var(--fh);font-size:clamp(18px,2.5vw,32px);text-transform:uppercase;color:rgba(255,255,255,0.55);line-height:1.2;margin-bottom:20px;text-align:right}

.ft-cta-right{text-align:right}
.ft-word-row {
  overflow: visible;
  width: 100%;
  display: block;
  padding-top: 24px; /* prevent Ō macron + ³ superscript from clipping */
}
.ft-word{font-family:var(--fh);font-size:clamp(130px,18vw,270px);line-height:0.9;text-transform:uppercase;color:rgba(255,255,255,0.06);letter-spacing:-5px;white-space:nowrap;display:block;margin-left: -10px;}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad) 24px;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,0.05); margin-left: 0px; /* 🔥 move left */}
.ft-links{display:flex;gap:22px}
.ft-links a{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.3);transition:color 0.2s}
.ft-links a:hover{color:var(--yellow)}
.ft-copy{font-size:11px;color:rgba(255,255,255,0.15);letter-spacing:0.04em}
.ft-soc{display:flex;gap:14px}
.ft-soc a{font-size:11px;font-weight:700;letter-spacing:0.15em;color:rgba(255,255,255,0.25);transition:color 0.2s}
.ft-soc a:hover{color:var(--yellow)}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:translateY(0);transition:opacity 0.75s var(--ease-o),transform 0.75s var(--ease-o)}
.reveal-left{opacity:0;transform:translateX(-22px)}
.reveal-left.in{opacity:1;transform:translateX(0);transition:opacity 0.7s var(--ease-o),transform 0.7s var(--ease-o)}
.wk-visible{animation:wkCardIn 0.55s var(--ease-o) both}
@keyframes wkCardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--blue)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .np-inner{grid-template-columns:1fr}
  .np-preview{display:none}
  .ft-upper-row{flex-direction:column}
  .ft-cta-text,.ft-cta-right{text-align:left}
}
@media(max-width:600px){
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Footer */
.footer {
  position: relative;
  z-index: 2;
  /* background already set by theme — this stacks it above the canvas */
}

/* ═══════════════════════════════════════════════════════
   FOOTER — 3-column info row  (matches screenshot)
   ═══════════════════════════════════════════════════════ */

.ft-cols {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.6fr;
  gap: 64px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 52px var(--pad) 44px;
  transition: border-color 0.45s;
}

.ft-col { padding: 0; }

.ft-col-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255,255,255,0.22);
  margin-bottom: 18px;
  transition: color 0.45s;
}

/* ── Pages nav col ── */
.ft-col-nav { display: flex; flex-direction: column; gap: 0; }
.ft-col-nav a {
  font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,0.42); transition: color 0.2s;
  line-height: 2.1; letter-spacing: 0.02em;
  display: block;
}

.ft-col-nav a:hover { color: var(--yellow); }

/* ── Contact col ── */
.ft-col-contact { display: flex; flex-direction: column; gap: 10px; }
.ft-contact-block {
  display: flex; flex-direction: column; gap: 1px;
}
.ft-ckey {
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.2);
  transition: color 0.45s; margin-bottom: 1px;
}

.ft-col-contact a {
  font-size: 12.5px; color: rgba(255,255,255,0.5); transition: color 0.2s;
  line-height: 1.5;
}

.ft-col-contact a:hover { color: var(--yellow); }
.ft-cval {
  font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.5;
  transition: color 0.45s; display: block;
}

/* ── Newsletter col ── */
.ft-col-newsletter { display: flex; flex-direction: column; }
.ft-nl-desc {
  font-size: 13px; color: rgba(255,255,255,0.38); line-height: 1.6;
  margin-bottom: 14px; transition: color 0.45s;
}

.ft-nl-form {
  display: flex; gap: 0; margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px; overflow: hidden;
  transition: border-color 0.3s;
}

.ft-nl-form:focus-within { border-color: var(--yellow); }
.ft-nl-input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 0 14px; height: 46px;
  font-family: var(--fb); font-size: 13px;
  color: var(--bg); transition: color 0.45s;
}

.ft-nl-input::placeholder { color: rgba(255,255,255,0.22); }

.ft-nl-btn {
  background: var(--yellow); color: #111; border: none;
  width: 48px; height: 46px;
  font-size: 18px; font-weight: 700; line-height: 1;
  cursor: none; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ft-nl-btn:hover { background: #e6b800; }
.ft-nl-note {
  font-size: 10px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.16); transition: color 0.45s;
}

/* ── Bottom bar ── */
.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--pad) 22px;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.45s;
}

.ft-bottom .ft-links { display: none !important; }
.ft-copy {
  font-size: 11px; color: rgba(255,255,255,0.18);
  letter-spacing: 0.04em; transition: color 0.45s;
}

.ft-soc { display: flex; gap: 16px; }
.ft-soc a {
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.28); transition: color 0.2s;
}

.ft-soc a:hover { color: var(--yellow); }

/* Responsive */
@media(max-width:900px){
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ft-col-newsletter { grid-column: 1/-1; margin-top: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); }
  
}
@media(max-width:560px){
  .ft-cols { grid-template-columns: 1fr; gap: 28px; }
  .ft-col-newsletter { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════
   LOGOS MARQUEE — adapts to light/dark
   ═══════════════════════════════════════════════════════ */
.logos-section {
  padding: 48px var(--pad) 52px;
  background: var(--bg2);
  overflow: hidden;
  transition: background 0.45s, border-color 0.45s;
  position: relative;
  z-index: 2;
}
.logos-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--fg3);
  text-align: center; margin-bottom: 36px;
  transition: color 0.45s;
}
.logos-track-wrap { overflow: hidden; width: 100%; }
.logos-track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  animation: logoScroll 28s linear infinite;
  will-change: transform;
  white-space: nowrap;
}
@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logos-track:hover { animation-play-state: paused; }
.logo-item {
  flex-shrink: 0;
  display: flex; align-items: center;
  opacity: 0.4; transition: opacity 0.3s;
}
.logo-item:hover { opacity: 0.85; }
.logo-svg {
  height: 40px; width: auto;
  color: var(--fg);  /* inherits light/dark fg color */
  display: block;
  transition: color 0.45s;
}

/* ═══════════════════════════════════════════════════════
   MILESTONES — lightbox
   ═══════════════════════════════════════════════════════ */
.ms-lightbox {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.ms-lightbox.is-open { opacity: 1; pointer-events: all; }
.ms-lb-close {
  position: absolute; top: 24px; right: 28px;
  font-size: 22px; color: rgba(255,255,255,0.6);
  background: none; border: none; cursor: none;
  transition: color 0.2s; line-height: 1;
}
.ms-lb-close:hover { color: #fff; }
.ms-lb-inner {
  max-width: min(90vw, 860px); width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  transform: scale(0.95);
  transition: transform 0.35s var(--ease-o);
}
.ms-lightbox.is-open .ms-lb-inner { transform: scale(1); }
.ms-lb-img {
  width: 100%; height: auto; display: block;
  border-radius: 4px; object-fit: contain;
  max-height: 80vh;
}
.ms-lb-meta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 4px;
}
.ms-lb-meta strong {
  font-family: var(--fh); font-size: 16px; letter-spacing: 0.08em;
  color: #fff; text-transform: uppercase;
}
.ms-lb-meta span {
  font-size: 12px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em;
}

/* Certs grid — 3 cols → 9 cards */
.ms-certs-grid { grid-template-columns: repeat(3, 1fr); }
@media(max-width:900px){ .ms-certs-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .ms-certs-grid { grid-template-columns: 1fr; } }

/* cert card cursor pointer appearance */
.ms-cert-card { cursor: none; }

/* ── Cleaner contact col emails ── */
.ft-col-contact .ft-contact-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-col-contact a {
  font-size: 13px;
  color: rgba(255,255,255,0.52);
  transition: color 0.2s;
  line-height: 1.5;
}

.ft-col-contact a:hover { color: var(--yellow); }
.ft-address {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  line-height: 1.7;
  transition: color 0.45s;
}

/* ── Newsletter alignment fix ── */
.ft-col-newsletter {
  display: flex;
  flex-direction: column;
}
.ft-nl-form {
  align-items: stretch;
}
.ft-nl-input {
  height: 46px;
  line-height: 46px;
}
.ft-nl-btn {
  height: 46px;
  min-width: 46px;
  flex-shrink: 0;
}