/* ===========================================================
   合同会社コモレビ・デジタル — design system
   Palette: ink navy structure + cool paper + komorebi warm light
   Type: Zen Kaku Gothic New (JP) / Archivo (Latin, labels & numerals)
   =========================================================== */

:root {
  --ink:        #16293a;   /* primary text / structure           */
  --ink-soft:   #46586a;   /* secondary text                     */
  --ink-faint:  #7c8a97;   /* captions                           */
  --paper:      #f4f5f2;   /* page background (cool off-white)    */
  --panel:      #ffffff;   /* cards / raised surfaces             */
  --panel-2:    #eceee9;   /* tinted panel                        */
  --line:       #d9ddd6;   /* hairlines                          */
  --amber:      #c6851f;   /* komorebi warm light — the accent   */
  --amber-deep: #a56a12;
  --amber-soft: #f0d9a6;
  --leaf:       #5f7d5a;   /* dappled leaf — tertiary tint       */
  --leaf-soft:  #dfe7dc;

  --shadow: 0 1px 2px rgba(22,41,58,.04), 0 12px 32px -18px rgba(22,41,58,.22);
  --radius: 14px;

  --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-lt: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}

/* ---- type ------------------------------------------------- */
h1,h2,h3,h4 { font-weight: 700; line-height: 1.4; letter-spacing: .02em; }

.eyebrow {
  font-family: var(--font-lt);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber-deep);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--amber);
  display: inline-block;
}

.section-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
  margin: 0 0 1rem;
}
.lead-sm { color: var(--ink-soft); max-width: 46ch; }

.num {
  font-family: var(--font-lt);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- layout rhythm ---------------------------------------- */
.section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; }
.section--tint { background: var(--panel-2); }
.container-tight { max-width: 1120px; }

/* ---- navbar ----------------------------------------------- */
.site-nav {
  background: rgba(244,245,242,.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: 0 0 auto; }
.brand__name {
  font-weight: 700; color: var(--ink); font-size: 1.02rem; letter-spacing: .03em;
  line-height: 1.1;
}
.brand__name small {
  display: block; font-family: var(--font-lt); font-weight: 600;
  font-size: .58rem; letter-spacing: .24em; color: var(--ink-faint);
  text-transform: uppercase;
}
.navbar .nav-link {
  color: var(--ink-soft); font-weight: 500; font-size: .95rem;
  padding: .4rem .9rem; border-radius: 8px;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--ink); }

/* ---- buttons ---------------------------------------------- */
.btn-solid {
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  border-radius: 999px; padding: .62rem 1.5rem; font-weight: 600;
  font-size: .95rem; transition: transform .15s ease, background .15s ease;
}
.btn-solid:hover { background: #0f1f2d; color: #fff; transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: .62rem 1.4rem; font-weight: 600; font-size: .95rem;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn-amber {
  background: var(--amber); color: #241703; border: 1px solid var(--amber);
  border-radius: 999px; padding: .62rem 1.5rem; font-weight: 700; font-size: .95rem;
  transition: transform .15s ease, background .15s ease;
}
.btn-amber:hover { background: var(--amber-deep); color: #fff; transform: translateY(-1px); }

/* ---- hero + komorebi light signature ---------------------- */
.hero { position: relative; overflow: hidden; padding: clamp(3.2rem,2rem+7vw,7rem) 0 clamp(3rem,2rem+5vw,5.5rem); }
.hero__light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(220px 200px at 78% 18%, rgba(198,133,31,.30), transparent 70%),
    radial-gradient(300px 260px at 92% 55%, rgba(95,125,90,.22), transparent 72%),
    radial-gradient(150px 150px at 66% 40%, rgba(240,217,166,.35), transparent 70%),
    radial-gradient(120px 120px at 88% 82%, rgba(198,133,31,.18), transparent 72%);
  filter: blur(2px);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.35rem);
  font-weight: 700; letter-spacing: .015em; margin: 0 0 1.3rem;
}
.hero h1 .hl { color: var(--amber-deep); }
.hero__sub { font-size: clamp(1rem,.94rem+.4vw,1.12rem); color: var(--ink-soft); max-width: 40ch; margin-bottom: 1.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.4rem; }
.chip {
  font-size: .82rem; color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: .32rem .95rem;
}
.chip b { color: var(--ink); font-weight: 600; }

/* ---- generic cards ---------------------------------------- */
.card-k {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.8rem; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-k:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c9cfc7; }
.card-k h3 { font-size: 1.16rem; margin: .2rem 0 .6rem; }
.card-k p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

.svc-index {
  font-family: var(--font-lt); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; color: var(--amber-deep);
}

/* problems list */
.pain {
  border-left: 2px solid var(--line); padding: .1rem 0 .1rem 1.2rem; margin-bottom: 1.5rem;
}
.pain h4 { font-size: 1.02rem; margin: 0 0 .3rem; }
.pain p { margin: 0; color: var(--ink-soft); font-size: .94rem; }

/* process steps */
.step { display: flex; gap: 1.2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: none; }
.step__n {
  font-family: var(--font-lt); font-weight: 700; font-size: 1.5rem;
  color: var(--amber); line-height: 1; min-width: 2.4rem;
}
.step h4 { font-size: 1.08rem; margin: 0 0 .35rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* stat / feature strip */
.metric { font-family: var(--font-lt); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.metric-label { color: var(--ink-faint); font-size: .85rem; margin-top: .45rem; }

/* voice / testimonial */
.voice { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; height: 100%; }
.voice p { color: var(--ink); font-size: .98rem; }
.voice cite { color: var(--ink-faint); font-size: .85rem; font-style: normal; display: block; margin-top: .9rem; }

/* ---- dark contact band ------------------------------------ */
.band {
  background: var(--ink); color: #eef1f4;
  border-radius: 20px; padding: clamp(2.2rem,1.4rem+3vw,3.4rem);
  position: relative; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px 240px at 88% 20%, rgba(198,133,31,.28), transparent 70%);
}
.band h2 { color: #fff; position: relative; z-index: 1; }
.band p { color: #bcc7d1; position: relative; z-index: 1; max-width: 44ch; }
.band .eyebrow { color: var(--amber-soft); }
.band .eyebrow::before { background: var(--amber-soft); }

/* ---- forms ------------------------------------------------ */
.form-k label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--ink); }
.form-k .form-control, .form-k .form-select {
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem;
  background: var(--panel); font-size: .96rem;
}
.form-k .form-control:focus, .form-k .form-select:focus {
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(198,133,31,.16);
}

/* company table */
.info-table th, .info-table td { padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.info-table th { width: 34%; color: var(--ink-soft); font-weight: 600; font-size: .93rem; background: var(--panel-2); }
.info-table td { font-size: .96rem; }

/* ---- footer ----------------------------------------------- */
.site-foot { background: var(--paper); border-top: 1px solid var(--line); padding: 2.6rem 0 2rem; }
.site-foot a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.site-foot a:hover { color: var(--ink); }
.foot-note { color: var(--ink-faint); font-size: .8rem; }
.testbadge {
  display: inline-block; font-family: var(--font-lt); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-deep); border: 1px dashed var(--amber);
  border-radius: 999px; padding: .18rem .7rem; background: rgba(198,133,31,.06);
}

/* ---- page header (subpages) ------------------------------- */
.pagehead { padding: clamp(3rem,2rem+4vw,5rem) 0 clamp(1.5rem,1rem+2vw,2.5rem); position: relative; overflow: hidden; }
.pagehead__light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(260px 200px at 85% 30%, rgba(198,133,31,.22), transparent 70%),
              radial-gradient(200px 180px at 95% 80%, rgba(95,125,90,.16), transparent 72%);
  filter: blur(2px);
}
.pagehead > .container { position: relative; z-index: 1; }
.pagehead h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin: 0 0 .6rem; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-k:hover, .btn-solid:hover, .btn-amber:hover { transform: none; }
}

a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}