/*
Theme Name: KAISAN Interim
Theme URI: https://www.kaisan.global
Author: Kaisan Limited
Author URI: https://www.kaisan.global
Description: Interim marketing site for KAISAN — the Continuous Leader Improvement platform. Built on the locked KAISAN Design System (v11): cream canvas, teal-navy reserved surfaces, vermilion spark accent, Literata + Figtree. Brand-mark is a deliberate drop-in placeholder until the official vector arrives.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary — © Kaisan Limited
Text Domain: kaisan-interim
*/

/* ===================== KAISAN Design System tokens (v11) ===================== */
:root{
  --cream:#F4F1E8; --cream-card:#FBFAF4; --cream-inset:#ECE7DA;
  --navy:#22414D; --navy-hi:#2C5A63; --navy-lo:#172E37;
  --slate:#5E7787; --slate-2:#8195A0;
  --orange:#E4531C; --orange-2:#F2703A;
  --ink:#22414D; --ink-2:#5E7787; --ink-3:#93A0A6;
  --on-navy:#F4F1E8; --on-navy-2:rgba(244,241,232,.66); --on-navy-3:rgba(244,241,232,.40);
  --grn:#2CAE83; --grn-soft:#D2ECE1;
  --amb:#E4A02F; --red:#E23A5E;
  --line:rgba(34,65,77,.12);
  --line-on-navy:rgba(244,241,232,.16);
  --r:14px; --r-lg:20px; --r-xl:28px;
  --wrap:1080px;
  --shadow-navy:0 22px 42px -24px rgba(23,46,55,.55);
  --shadow-card:0 1px 2px rgba(23,46,55,.05), 0 12px 28px -20px rgba(23,46,55,.35);
}

/* ===================== base ===================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--orange); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Literata",Georgia,"Times New Roman",serif; color:var(--navy); font-weight:500; letter-spacing:-.02em; line-height:1.18; margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem); line-height:1.08}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.24rem; letter-spacing:-.01em}
p{margin:0 0 1em}
.k-wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.k-eyebrow{font-family:"Figtree",sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1em}
.k-eyebrow.accent{color:var(--orange)}
.k-lede{font-size:1.3rem; line-height:1.5; color:var(--navy)}
.k-lede.big{font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.45}
.k-muted{color:var(--ink-2)}
.k-center{text-align:center}
.k-em{color:var(--orange); font-style:italic}

/* ===================== buttons ===================== */
.btn{display:inline-block; font-family:"Figtree",sans-serif; font-weight:600; font-size:.98rem; padding:.72em 1.4em; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:transform .14s ease, background .14s ease, box-shadow .14s ease; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 10px 22px -14px rgba(228,83,28,.9)}
.btn-primary:hover{background:var(--orange-2); color:#fff}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy); color:var(--navy)}
.on-dark .btn-ghost,.k-hero .btn-ghost,.k-cta-band .btn-ghost{color:var(--on-navy); border-color:var(--line-on-navy)}
.on-dark .btn-ghost:hover,.k-hero .btn-ghost:hover,.k-cta-band .btn-ghost:hover{border-color:var(--on-navy); color:var(--on-navy); background:rgba(244,241,232,.06)}

/* ===================== site header ===================== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(244,241,232,.86); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line)}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:26px; height:26px; border-radius:7px; background:linear-gradient(150deg,var(--orange),var(--orange-2)); position:relative; flex:0 0 auto; box-shadow:0 6px 14px -8px rgba(228,83,28,.8)}
.brand .mark::after{content:""; position:absolute; inset:8px; border-radius:3px; background:var(--cream); opacity:.92}
.brand .word{font-family:"Literata",serif; font-weight:600; font-size:1.28rem; letter-spacing:.16em; color:var(--navy)}
.nav-primary{display:flex; align-items:center; gap:6px; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.nav-primary li{list-style:none; margin:0; padding:0; display:inline-flex; align-items:center}
.nav-primary a{font-family:"Figtree",sans-serif; font-weight:500; font-size:.95rem; color:var(--navy); padding:.5em .8em; border-radius:9px; text-decoration:none}
.nav-primary a:hover{background:var(--cream-inset); text-decoration:none}
.nav-primary .current-menu-item a,.nav-primary .current_page_item a,.nav-primary a.active{color:var(--orange)}
.nav-cta{margin-left:6px}
.menu-toggle{display:none}

/* ===================== hero ===================== */
.k-hero{background:linear-gradient(158deg,var(--navy-hi),var(--navy) 55%,var(--navy-lo)); color:var(--on-navy); border-radius:0 0 var(--r-xl) var(--r-xl); box-shadow:var(--shadow-navy); overflow:hidden; position:relative}
.k-hero .k-wrap{padding-top:104px; padding-bottom:112px; position:relative; z-index:2}
.k-hero .k-eyebrow{color:var(--orange-2)}
.k-hero h1{color:#fff; max-width:17ch}
.k-hero .k-lede{color:var(--on-navy-2); max-width:52ch; margin-top:.6em; font-size:1.35rem}
.k-hero .cta-row{margin-top:2rem; display:flex; gap:12px; flex-wrap:wrap}
.hero-rings{position:absolute; right:-120px; top:-80px; width:520px; height:520px; opacity:.5; z-index:1; pointer-events:none}
.hero-rings circle,.hero-rings line{stroke:rgba(244,241,232,.22); fill:none}
.hero-rings .node{fill:rgba(244,241,232,.5); stroke:none}
.hero-rings .spark{fill:var(--orange)}

/* smaller hero for interior pages */
.k-hero.sm .k-wrap{padding-top:60px; padding-bottom:56px}
.k-hero.sm h1{max-width:20ch}

/* narrow prose container */
.narrow{max-width:760px; margin:0 auto}

/* ===================== sections ===================== */
.k-section{padding:92px 0}
.k-section.alt{background:var(--cream-inset)}
.k-section.tight{padding:60px 0}
.k-section.airy{padding:112px 0}
.section-head{max-width:64ch; margin-bottom:40px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* ===================== grids / cards ===================== */
.k-grid{display:grid; gap:22px}
.k-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.k-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.k-card{background:var(--cream-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--shadow-card)}
.k-card h3{margin-top:.1em}
.k-card .num{font-family:"Literata",serif; color:var(--orange); font-size:1.05rem; font-weight:600; letter-spacing:.02em}
.k-card p:last-child{margin-bottom:0}

/* framework chips */
.k-tags{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0}
.k-tag{display:inline-block; font-family:"Figtree",sans-serif; font-size:.86rem; font-weight:600; color:var(--navy); background:var(--cream-card); border:1px solid var(--line); border-radius:999px; padding:.42em .9em}

/* feature list */
.k-list{list-style:none; padding:0; margin:0}
.k-list li{position:relative; padding:.35em 0 .35em 1.6em; color:var(--ink)}
.k-list li::before{content:""; position:absolute; left:0; top:.95em; width:8px; height:8px; border-radius:2px; background:var(--orange)}
.k-list.on-dark li{color:var(--on-navy-2)}
.k-list.on-dark li::before{background:var(--grn)}

/* two-column prose block */
.k-split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.k-panel{background:var(--navy); color:var(--on-navy); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--shadow-navy)}
.k-panel h2,.k-panel h3{color:#fff}
.k-panel .k-lede{color:var(--on-navy-2)}

/* CTA band */
.k-cta-band{background:linear-gradient(158deg,var(--navy-hi),var(--navy) 55%,var(--navy-lo)); color:var(--on-navy); border-radius:var(--r-xl); padding:52px 40px; text-align:center; box-shadow:var(--shadow-navy)}
.k-cta-band h2{color:#fff}
.k-cta-band .k-lede{color:var(--on-navy-2); max-width:52ch; margin:0 auto 1.6em}

/* generic page body (prose) */
.page-body{padding:56px 0 72px}
.page-body .k-wrap{max-width:760px}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em; color:var(--navy)}
.prose ul{padding-left:1.2em; margin:0 0 1em}
.prose li{margin:.35em 0}
.prose .k-callout{background:var(--cream-inset); border-left:3px solid var(--orange); border-radius:0 var(--r) var(--r) 0; padding:16px 20px; margin:1.4em 0; color:var(--navy)}
.page-title{margin-bottom:8px}
.page-kicker{margin-bottom:1.4em}

/* dl for contact / facts */
.k-facts{display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:1.2em 0}
.k-facts dt{font-family:"Figtree",sans-serif; font-weight:700; color:var(--ink-2); font-size:.9rem; align-self:center}
.k-facts dd{margin:0; color:var(--navy)}

/* ===================== footer ===================== */
.site-footer{background:var(--navy-lo); color:var(--on-navy-2); margin-top:8px}
.site-footer .k-wrap{padding-top:52px; padding-bottom:40px}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.site-footer h4{font-family:"Figtree",sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-3); margin:0 0 1em}
.site-footer a{color:var(--on-navy-2)}
.site-footer a:hover{color:#fff}
.site-footer .brand .word{color:#fff}
.site-footer .fnav{display:flex; flex-direction:column; gap:.55em}
.site-footer .legal{margin-top:34px; padding-top:22px; border-top:1px solid var(--line-on-navy); font-size:.84rem; color:var(--on-navy-3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.site-footer .legal a{color:var(--on-navy-3)}

/* ===================== responsive ===================== */
@media (max-width:860px){
  .k-grid.cols-3{grid-template-columns:1fr}
  .k-grid.cols-2{grid-template-columns:1fr}
  .k-split{grid-template-columns:1fr; gap:28px}
  .site-footer .cols{grid-template-columns:1fr; gap:26px}
  .nav-primary{display:none}
  .nav-primary.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--cream); border-bottom:1px solid var(--line); padding:10px 16px 16px}
  .nav-primary.open a{padding:.7em .4em}
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:38px; border:1px solid var(--line); background:var(--cream-card); border-radius:10px; cursor:pointer}
  .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:""; display:block; width:18px; height:2px; background:var(--navy); position:relative}
  .menu-toggle span::before{position:absolute; top:-6px}
  .menu-toggle span::after{position:absolute; top:6px}
  .k-hero .k-wrap{padding-top:56px; padding-bottom:60px}
  .k-section{padding:52px 0}
  .k-cta-band{padding:40px 22px}
}

/* ============================================================
   v2 — inspiring layout components (lighter, bigger, human)
   ============================================================ */

/* Big statement band — a single striking line, lots of air */
.k-statement{padding:104px 0}
.k-statement.on-navy{background:linear-gradient(158deg,var(--navy-hi),var(--navy) 55%,var(--navy-lo)); color:var(--on-navy); border-radius:var(--r-xl); box-shadow:var(--shadow-navy)}
.k-statement .k-wrap{max-width:900px; text-align:center}
.k-statement .say{font-family:"Literata",serif; font-weight:500; letter-spacing:-.02em; line-height:1.2; font-size:clamp(1.7rem,3.8vw,2.9rem); color:var(--navy)}
.k-statement.on-navy .say{color:#fff}
.k-statement .say .fade{color:var(--ink-3)}
.k-statement.on-navy .say .fade{color:var(--on-navy-3)}
.k-statement .say .hit{color:var(--orange)}
.k-statement .say .hit-lite{color:var(--orange-2)}
.k-statement .sub{margin-top:1.1em; font-size:1.15rem; color:var(--ink-2)}
.k-statement.on-navy .sub{color:var(--on-navy-2)}

/* Airy feature trio — borderless, benefit-led */
.k-features{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.ic{width:44px; height:44px; border-radius:12px; background:var(--cream-inset); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.ic svg{width:24px; height:24px; stroke:var(--orange); fill:none; stroke-width:1.8}
.k-feature h3{font-size:1.4rem; margin-bottom:.4em}
.k-feature p{color:var(--ink-2); margin-bottom:0; font-size:1.02rem; line-height:1.6}
.on-navy .k-feature h3{color:#fff}
.on-navy .ic{background:rgba(244,241,232,.1)}
.on-navy .ic svg{stroke:var(--orange-2)}
.on-navy .k-feature p{color:var(--on-navy-2)}

/* Levels stepper — Individual -> Dyad -> Team -> Organisation */
.k-levels{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:8px}
.k-level{font-family:"Figtree",sans-serif; font-weight:600; font-size:1rem; color:var(--navy); background:var(--cream-card); border:1px solid var(--line); border-radius:999px; padding:.7em 1.3em; box-shadow:var(--shadow-card)}
.k-levels .arw{color:var(--orange); font-weight:700; font-size:1.1rem}
.on-navy .k-level{background:rgba(244,241,232,.08); border-color:var(--line-on-navy); color:#fff}
.on-navy .k-levels .arw{color:var(--orange-2)}

/* Lede row under a heading, wider */
.lead-row{max-width:60ch}
.lead-row.center{margin:0 auto; text-align:center}

/* Big impact numbers / value props inline */
.k-two{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center}
.k-two .visual{background:linear-gradient(158deg,var(--navy-hi),var(--navy) 55%,var(--navy-lo)); border-radius:var(--r-xl); box-shadow:var(--shadow-navy); padding:40px 34px; color:var(--on-navy); position:relative; overflow:hidden; min-height:280px; display:flex; align-items:center}
.k-two .visual .hero-rings{opacity:.4; right:-160px; top:-100px}
@media (max-width:860px){
  .k-features{grid-template-columns:1fr; gap:34px}
  .k-two{grid-template-columns:1fr; gap:32px}
  .k-statement{padding:72px 0}
}