/* ──────────────────────────────────────────────────────────────
   KANSEI — kansei.global one-pager
   Built strictly on Kansei Brand Book v1.0 · Celadon System
   ────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Assistant';
  src: url('fonts/Assistant-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Cognitive base ──────────────────────────────────────── */
  --alabaster: #F5F6F9;
  --charcoal:  #0F172A;
  --platinum:  #94A3B8;

  /* ── Celadon system ──────────────────────────────────────── */
  --mist:      #D4E8E6;
  --vapor:     #7FB8B3;
  --mineral:   #1F8B83;
  --accent:    #0E6E68;  /* Deep Celadon — primary mark */
  --abyss:     #0A5853;
  --void:      #063D3A;

  /* ── Semantic ────────────────────────────────────────────── */
  --success: #0F8C5C;
  --warning: #B8741A;
  --error:   #B23A2D;
  --info:    #3F4E7A;

  /* ── Working tokens (derived) ────────────────────────────── */
  --white:    #FFFFFF;
  --ink-2:    #475569;        /* secondary text on alabaster */
  --ink-3:    #64748B;        /* tertiary */
  --hairline: #E2E5EA;        /* hairlines on alabaster */
  --hairline-mist: rgba(14, 110, 104, 0.12);

  /* ── Glow & scrim ─────────────────────────────────────────── */
  --glow-soft:    rgba(14, 110, 104, 0.08);
  --glow-medium:  rgba(14, 110, 104, 0.18);
  --glow-strong:  rgba(14, 110, 104, 0.25);
  --scrim:        rgba(15, 23, 42, 0.55);

  /* ── Gradients (only 2 allowed per page, brand book) ───────
     Hero (Gradient 01) used in Hero direction A and Closing CTA
     Button used everywhere CTAs appear */
  --gradient-hero:   linear-gradient(135deg, #0A5853 0%, #0E6E68 55%, #1F8B83 100%);
  --gradient-button: linear-gradient(180deg, #0E6E68 0%, #0A5853 100%);
  --gradient-button-hover: linear-gradient(180deg, #0A5853 0%, #0E6E68 100%);
  --gradient-text:   linear-gradient(90deg, #0E6E68 0%, #1F8B83 100%);
  --gradient-card:   linear-gradient(160deg, #D4E8E6 0%, #F5F6F9 100%);
  --gradient-dark:   linear-gradient(180deg, #063D3A 0%, #0A5853 100%);

  /* ── Type scale (brand-book exact) ───────────────────────── */
  --fs-display: clamp(64px, 8vw, 120px);
  --fs-h1:      clamp(40px, 5.2vw, 80px);
  --fs-h1-md:   clamp(36px, 4.2vw, 64px);
  --fs-h2:      clamp(28px, 3.2vw, 44px);
  --fs-h3:      clamp(20px, 1.8vw, 24px);
  --fs-h4:      18px;
  --fs-lede:    clamp(18px, 1.45vw, 21px);
  --fs-body:    16px;
  --fs-sm:      15px;
  --fs-kicker:  12px;
  --fs-caption: 11px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:  120ms;
  --dur-base:  240ms;
  --dur-slow:  480ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container: 1320px;
  --container-narrow: 1080px;
  --nav-h: 134px;
}

/* ────────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Assistant', -apple-system, sans-serif !important;
}

html { scroll-behavior: smooth; }

body {
  background: var(--alabaster);
  color: var(--charcoal);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--mist); color: var(--void); }

/* ───── Typography utilities ───── */
.kicker {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: currentColor;
}
.kicker--mist { color: var(--mist); }
.kicker--platinum { color: var(--platinum); }
.kicker--charcoal { color: var(--charcoal); }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--charcoal);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.005em; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
  white-space: nowrap;
  text-decoration: none;
}
.btn svg {
  width: 14px; height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: var(--gradient-button);
  color: var(--white);
  box-shadow: 0 6px 20px var(--glow-medium);
}
.btn--primary:hover {
  background: var(--gradient-button-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--glow-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn--ghost:hover {
  background: var(--accent);
  color: var(--white);
}

.btn--invert {
  background: var(--white);
  color: var(--accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.btn--invert:hover {
  background: var(--mist);
  transform: translateY(-1px);
}

.btn--on-dark {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
}

/* ───── Container ───── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}
.container--narrow { max-width: var(--container-narrow); }

@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

/* ───── Section rhythm ───── */
section {
  position: relative;
  padding: 120px 0;
}
@media (max-width: 768px) {
  section { padding: 80px 0; }
}

.section-header {
  margin-bottom: 64px;
  max-width: 720px;
}
.section-header .kicker { margin-bottom: 24px; }
.section-header h2 { margin-bottom: 20px; }

/* ───── Reveal on scroll ───── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }