/* ============================================================================
   ZIHEN — 2026 sections (credentials-aligned)
   Shared section primitives + per-section visual moves.
   Sections alternate Bone Soft (#E8E3DB) ↔ Ink (#0E0E0E) to keep rhythm.
============================================================================ */

.sec-26 {
  position:relative;
  padding:clamp(96px, 12vh, 160px) clamp(40px, 8vw, 120px);
  background:var(--ink);
  color:var(--bone);
  overflow:hidden;
}
.sec-26-inner{
  max-width:1280px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.sec-26-head{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:64px;
}
.sec-26-head .section-label{
  font-size:10px !important;
  letter-spacing:.45em !important;
  text-transform:uppercase !important;
  color:var(--stone) !important;
}
.sec-26-title{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:clamp(40px, 4.6vw, 72px) !important;
  line-height:1.05 !important;
  letter-spacing:.005em !important;
  color:var(--bone) !important;
  margin:0;
}
.sec-26-sub{
  font-family:var(--serif) !important;
  font-style:italic;
  font-weight:300;
  font-size:clamp(16px, 1.4vw, 20px) !important;
  letter-spacing:.04em;
  color:var(--stone-light) !important;
  margin:0;
}
.sec-26-outro{
  margin-top:64px;
  text-align:center;
  font-family:var(--sans) !important;
  font-size:clamp(15px, 1.2vw, 18px) !important;
  font-weight:300 !important;
  letter-spacing:.18em !important;
  line-height:1.6;
  color:var(--stone-light) !important;
}
.sec-26-outro em{
  font-family:var(--serif) !important;
  font-style:italic;
  font-weight:400;
  font-size:1.05em;
  color:var(--bone) !important;
  letter-spacing:.04em;
  margin:0 4px;
}
.sec-26 .dim{
  color:var(--stone) !important;
  opacity:.85;
}

/* ── 02 POSITION (Bone Soft) ─────────────────────────────────── */
.sec-position{ background:var(--bone-soft); color:var(--ink); }
.sec-position .sec-26-title{ color:var(--ink) !important; }
.sec-position .sec-26-sub{ color:var(--earth) !important; }
.sec-position .sec-26-head .section-label{ color:var(--earth) !important; }
.sec-position .sec-26-outro{ color:var(--earth) !important; }
.sec-position .sec-26-outro em{ color:var(--ink) !important; }

.position-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(14,14,14,.18);
  border:1px solid rgba(14,14,14,.18);
}
.pos-card{
  background:var(--bone-soft);
  padding:48px clamp(28px, 3vw, 44px) 56px;
  display:flex;flex-direction:column;gap:18px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s ease var(--d), transform .9s cubic-bezier(.19,1,.22,1) var(--d);
}
.sec-position.is-vis .pos-card{ opacity:1; transform:none; }
.pos-card-us{ background:var(--ink); color:var(--bone); position:relative; }
.pos-card-head{ display:flex;align-items:center;justify-content:space-between; }
.pos-card-num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:32px;line-height:1;color:var(--earth);
}
.pos-card-us .pos-card-num{ color:var(--vermillion); }
.pos-card-pin{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--vermillion);
}
.pos-card-body{ display:flex;flex-direction:column;gap:8px; }
.pos-card-en{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(22px, 1.8vw, 26px);
  color:var(--ink);letter-spacing:.02em;line-height:1.2;
}
.pos-card-us .pos-card-en{ color:var(--bone); }
.pos-card-jp{
  font-family:var(--sans);font-size:13px;font-weight:300;
  letter-spacing:.18em;color:var(--stone);
}
.pos-card-us .pos-card-jp{
  color:var(--vermillion) !important;
  font-weight:400;letter-spacing:.30em;
}
.pos-card-rule{ width:32px;height:1px;background:rgba(14,14,14,.32);margin:8px 0; }
.pos-card-us .pos-card-rule{ background:rgba(255,255,255,.22); }
.pos-card-lead{
  font-family:var(--sans);font-size:15px;font-weight:400;
  color:var(--ink);line-height:1.6;letter-spacing:.04em;
}
.pos-card-us .pos-card-lead{ color:var(--bone); }
.pos-card-text{
  font-family:var(--sans);font-size:13px;font-weight:300;
  color:var(--earth);line-height:1.9;letter-spacing:.04em;
}
.pos-card-us .pos-card-text{ color:var(--stone-light); }

/* ── 03 DISTILLING® (Ink) ────────────────────────────────────── */
.sec-distilling{
  padding-top:clamp(120px, 16vh, 200px);
  padding-bottom:clamp(120px, 16vh, 200px);
}
.distill-stage{ position:relative;margin:48px 0 80px;padding:80px 0; }
.distill-frame{ position:absolute;inset:0;pointer-events:none; }
.distill-frame .distill-bar{ position:absolute;left:0;right:0;height:1px;background:rgba(181,175,163,.22); }
.distill-frame .distill-bar-t{top:0}
.distill-frame .distill-bar-b{bottom:0}
.distill-frame .distill-corner{ position:absolute;width:14px;height:14px;border-style:solid;border-color:var(--vermillion);border-width:0; }
.distill-corner-tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.distill-corner-tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.distill-corner-bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.distill-corner-br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

.distill-title{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  font-size:clamp(96px, 16vw, 240px) !important;
  line-height:.95 !important;
  letter-spacing:-.01em !important;
  color:var(--bone) !important;
  margin:0;text-align:center;
  opacity:0;transform:translateY(20px);
  transition:opacity 1.5s ease, transform 1.5s cubic-bezier(.19,1,.22,1);
}
.sec-distilling.is-vis .distill-title{ opacity:1; transform:none; }
.distill-r{
  font-family:var(--serif);font-style:italic;
  font-size:.20em;vertical-align:0.8em;
  color:var(--vermillion) !important;
  letter-spacing:0;margin-left:.08em;
}
.distill-jp{
  font-family:var(--sans);font-size:clamp(18px, 1.6vw, 24px);font-weight:300;
  letter-spacing:.30em;color:var(--bone) !important;
  text-align:center;margin:32px 0 16px;
}
.distill-tag{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:14px;letter-spacing:.06em;
  color:var(--stone-light) !important;
  text-align:center;margin:0;
}
.distill-essay{
  max-width:680px;margin:0 auto;
  display:flex;flex-direction:column;gap:24px;
  font-family:var(--sans);font-size:15px;font-weight:300;
  line-height:2.1;letter-spacing:.06em;
  color:var(--stone-light) !important;
  text-align:center;
}
.distill-eyebrow{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:18px;letter-spacing:.06em;
  color:var(--stone) !important;margin:0;
}

/* ── 04 SUBTRACTIVE (Bone Soft) ──────────────────────────────── */
.sec-subtractive{ background:var(--bone-soft); color:var(--ink); }
.sec-subtractive .sec-26-title{ color:var(--ink) !important; }
.sec-subtractive .sec-26-sub{ color:var(--earth) !important; }
.sec-subtractive .sec-26-head .section-label{ color:var(--earth) !important; }
.sec-subtractive .sec-26-outro{ color:var(--earth) !important; }
.sec-subtractive .sec-26-outro em{ color:var(--ink) !important; font-size:1.2em; }

.sub-versus{
  display:grid;grid-template-columns:1fr 80px 1fr;
  gap:24px;align-items:stretch;margin-bottom:32px;
}
.sub-side{
  padding:48px clamp(28px, 3vw, 44px);
  display:flex;flex-direction:column;gap:18px;
  border:1px solid rgba(14,14,14,.14);
  background:var(--bone-soft);
}
.sub-side-sub{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.sub-side-tag{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.40em;text-transform:uppercase;
  color:var(--stone);
}
.sub-side-sub .sub-side-tag{ color:var(--stone-light) !important; }
.sub-side-h{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:clamp(28px, 2.6vw, 38px) !important;
  color:var(--earth) !important;
  letter-spacing:.02em;margin:0;
}
.sub-side-sub .sub-side-h{ color:var(--bone) !important; }
.sub-side-list{ list-style:none;margin:8px 0;display:flex;flex-direction:column;gap:8px; }
.sub-side-list li{
  font-family:var(--sans);
  font-size:clamp(18px, 1.5vw, 22px);font-weight:300;
  letter-spacing:.04em;line-height:1.7;color:var(--earth);
  padding-left:22px;position:relative;
}
.sub-side-list li::before{
  content:"";position:absolute;left:0;top:1em;
  width:12px;height:1px;background:var(--stone);
}
.sub-side-sub .sub-side-list li{ color:var(--bone); }
.sub-side-sub .sub-side-list li::before{ background:var(--vermillion); }
.sub-side-foot{
  margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(14,14,14,.14);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14px;color:var(--stone);letter-spacing:.04em;
}
.sub-side-sub .sub-side-foot{
  border-color:rgba(255,255,255,.14);color:var(--stone-light);
}
.sub-versus-pivot{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; }
.sub-versus-pivot .vs-line{ display:block;width:1px;flex:1;min-height:32px;background:rgba(14,14,14,.22); }
.sub-versus-pivot .vs-mark{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:38px;color:var(--vermillion);letter-spacing:.02em;line-height:1;
}

/* ── 05 THREE STEPS (Ink) ────────────────────────────────────── */
.ts-flow{ display:flex;align-items:stretch;gap:0;margin-bottom:48px; }
.ts-card{
  flex:1;padding:36px clamp(24px, 2.5vw, 36px) 44px;
  border:1px solid rgba(181,175,163,.18);
  background:var(--ink-soft);
  display:flex;flex-direction:column;gap:12px;position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s ease var(--d), transform .9s cubic-bezier(.19,1,.22,1) var(--d), border-color .25s ease;
}
.sec-three-steps.is-vis .ts-card{ opacity:1; transform:none; }
.ts-card.is-active{ border-color:var(--vermillion); }
.ts-card-top{ display:flex;align-items:center;justify-content:space-between; }
.ts-card-num{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.35em;text-transform:uppercase;color:var(--vermillion);
}
.ts-card-tick{ width:6px;height:6px;background:var(--vermillion);display:inline-block; }
.ts-card-en{
  font-family:var(--serif) !important;
  font-weight:400 !important;font-style:normal !important;
  font-size:clamp(36px, 3.6vw, 52px) !important;
  line-height:1 !important;letter-spacing:0 !important;
  color:var(--bone) !important;margin:8px 0 0;
}
.ts-card-jp{
  font-family:var(--sans);font-size:15px;font-weight:300;
  letter-spacing:.18em;color:var(--stone-light) !important;
}
.ts-card-rule{ width:48px;height:1px;background:rgba(217,81,44,.55);margin:8px 0; }
.ts-card-body{
  font-family:var(--sans);font-size:13px;font-weight:300;
  line-height:1.95;letter-spacing:.04em;
  color:var(--stone-light) !important;
}
.ts-arrow{ width:80px;display:flex;align-items:center;justify-content:center;color:var(--vermillion);flex-shrink:0; }
.ts-arrow svg{ width:48px;height:18px;display:block; }


/* ── 06 CAPABILITY (Bone Soft) ───────────────────────────────── */
.sec-capability{ background:var(--bone-soft); color:var(--ink); }
.sec-capability .sec-26-title{ color:var(--ink) !important; }
.sec-capability .sec-26-sub{ color:var(--earth) !important; }
.sec-capability .sec-26-head .section-label{ color:var(--earth) !important; }
.sec-capability .sec-26-outro{ color:var(--earth) !important; }
.sec-capability .sec-26-outro em{ color:var(--ink) !important; }
.cap-lead{
  font-family:var(--sans);font-size:clamp(16px, 1.25vw, 19px);font-weight:300;
  line-height:2.1;letter-spacing:.06em;color:var(--earth);
  max-width:64ch;margin:0 0 56px;
}
.cap-lead em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--ink);font-size:1.05em;
}
.cap-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:1px;background:rgba(14,14,14,.18);
  border:1px solid rgba(14,14,14,.18);
}
.cap-cell{
  background:var(--bone-soft);
  padding:36px clamp(20px, 2.2vw, 32px) 40px;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease var(--d), transform .9s cubic-bezier(.19,1,.22,1) var(--d);
}
.sec-capability.is-vis .cap-cell{ opacity:1; transform:none; }
.cap-cell-num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;color:var(--earth);line-height:1;
}
.cap-cell-signal .cap-cell-num{ color:var(--vermillion); }
.cap-cell-en{
  font-family:var(--serif) !important;
  font-weight:400 !important;font-style:normal !important;
  font-size:clamp(24px, 2.2vw, 32px) !important;
  line-height:1.05 !important;color:var(--ink) !important;
  margin:6px 0 0;
}
.cap-cell-jp{
  font-family:var(--sans);font-size:12px;font-weight:300;
  letter-spacing:.30em;color:var(--stone);
}
.cap-cell-items{
  list-style:none;display:flex;flex-direction:column;gap:6px;margin:14px 0 0;
}
.cap-cell-items li{
  font-family:var(--sans);font-size:13px;font-weight:300;
  letter-spacing:.04em;color:var(--earth);
  padding-left:18px;position:relative;
}
.cap-cell-items li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:10px;height:1px;background:rgba(14,14,14,.42);
}
.cap-cell-rule{ width:32px;height:1px;background:rgba(14,14,14,.18);margin:18px 0 8px; }
.cap-cell-body{
  font-family:var(--sans);font-size:12px;font-weight:300;
  line-height:1.85;letter-spacing:.04em;
  color:var(--stone) !important;
}

/* ── 07 TWO PILLARS (Ink) ────────────────────────────────────── */
.sec-two-pillars{ background:var(--ink); color:var(--bone); }
.tp-lead{
  font-family:var(--sans);font-size:clamp(15px, 1.2vw, 18px);font-weight:300;
  line-height:2.1;letter-spacing:.05em;
  color:var(--stone-light);max-width:none;margin:0 0 64px;
  text-align:left;
}
.tp-lead br{ display:block; }
.tp-lead em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--bone);font-size:1.05em;
}
.tp-cycle{
  display:grid;grid-template-columns:1fr 160px 1fr;
  gap:32px;align-items:stretch;margin-bottom:64px;
}
.tp-pillar{
  background:var(--ink-soft);
  border:1px solid rgba(181,175,163,.16);
  padding:44px clamp(28px, 3vw, 44px);
  display:flex;flex-direction:column;gap:14px;
}
.tp-pillar-tag{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.40em;text-transform:uppercase;color:var(--stone);
}
.tp-pillar-en{
  font-family:var(--serif) !important;
  font-weight:400 !important;font-style:normal !important;
  font-size:clamp(36px, 3.6vw, 52px) !important;
  line-height:1.05 !important;color:var(--bone) !important;
  margin:6px 0 0;
}
.tp-pillar-en .tp-dot{ color:var(--vermillion); }
.tp-pillar-jp{
  font-family:var(--sans);font-size:13px;font-weight:300;
  letter-spacing:.30em;color:var(--stone-light) !important;
}
.tp-pillar-rule{ width:48px;height:1px;background:rgba(217,81,44,.55);margin:14px 0 6px; }
.tp-pillar-body{
  font-family:var(--sans);font-size:14px;font-weight:300;
  line-height:1.85;letter-spacing:.05em;
  color:var(--stone-light) !important;
}

/* Pillar body + rule hidden until hover — only the title pair shows at rest */
.tp-cycle-magnet .tp-pillar-rule,
.tp-cycle-magnet .tp-pillar-body{
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: opacity .4s ease, max-height .5s cubic-bezier(.19,1,.22,1), transform .45s cubic-bezier(.19,1,.22,1), margin .4s ease;
}
.tp-cycle-magnet .tp-pillar:hover .tp-pillar-rule,
.tp-cycle-magnet .tp-pillar.is-rippling .tp-pillar-rule{
  opacity: 1; max-height: 4px; margin: 16px 0 8px; transform: none;
}
.tp-cycle-magnet .tp-pillar:hover .tp-pillar-body,
.tp-cycle-magnet .tp-pillar.is-rippling .tp-pillar-body{
  opacity: 1; max-height: 12em; transform: none;
}
@media (prefers-reduced-motion: reduce){
  .tp-cycle-magnet .tp-pillar-rule,
  .tp-cycle-magnet .tp-pillar-body{ transition: opacity .2s ease; }
}
.tp-cycle-mid{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; }
.tp-cycle-svg{ width:120px;height:120px;animation:tp-rotate 22s linear infinite; }
@keyframes tp-rotate { to { transform:rotate(360deg); } }
.tp-cycle-label{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.45em;text-transform:uppercase;color:var(--vermillion);
}
.tp-coda{ text-align:center;display:flex;flex-direction:column;gap:6px;margin:0; }
.tp-coda-en{
  font-family:var(--serif) !important;
  font-style:italic;font-weight:400;
  font-size:clamp(28px, 2.8vw, 42px);
  letter-spacing:.02em;color:var(--bone) !important;
}
.tp-coda-jp{
  font-family:var(--sans);font-size:14px;font-weight:300;
  letter-spacing:.30em;color:var(--stone) !important;
}

/* ── 08 BRAND CONTENT OVERVIEW (Bone Soft) ───────────────────── */
.sec-bc-overview{ background:var(--bone-soft); color:var(--ink); }
.sec-bc-overview .sec-26-title{ color:var(--ink) !important; }
.sec-bc-overview .sec-26-sub{ color:var(--earth) !important; }
.sec-bc-overview .sec-26-head .section-label{ color:var(--earth) !important; }
.bc-lead{
  font-family:var(--sans);font-size:clamp(16px, 1.25vw, 19px);font-weight:300;
  line-height:2.1;letter-spacing:.06em;color:var(--earth);
  max-width:60ch;margin:0 0 56px;
}
@media (min-width: 861px){
  .bc-lead{ max-width: none; white-space: nowrap; }
}
.bc-lead em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--ink);font-size:1.05em;
}
.bc-overview-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:1px;background:rgba(14,14,14,.18);
  border:1px solid rgba(14,14,14,.18);margin-bottom:48px;
}
.bc-overview-cell{
  background:var(--bone-soft);
  padding:36px clamp(20px, 2.2vw, 32px) 40px;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease var(--d), transform .9s cubic-bezier(.19,1,.22,1) var(--d);
}
.sec-bc-overview.is-vis .bc-overview-cell{ opacity:1; transform:none; }
.bc-overview-code{
  font-family:var(--serif) !important;
  font-weight:400 !important;font-style:normal !important;
  font-size:clamp(40px, 4vw, 60px) !important;
  line-height:1 !important;color:var(--ink) !important;
  letter-spacing:0;margin:0;
}
.bc-overview-code-dot{ color:var(--vermillion); }
.bc-overview-en{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:14px;letter-spacing:.04em;color:var(--earth);
}
.bc-overview-rule{ width:32px;height:1px;background:rgba(14,14,14,.18);margin:12px 0 6px; }
.bc-overview-body{
  font-family:var(--sans);font-size:12px;font-weight:300;
  line-height:1.9;letter-spacing:.04em;
  color:var(--stone) !important;
}
.bc-next{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.40em;text-transform:uppercase;
  color:var(--stone);margin:0;
}
.bc-next-line{ display:block;width:32px;height:1px;background:rgba(14,14,14,.32); }

/* ── 09-12 BRAND SLIDE (Ink) ─────────────────────────────────── */
.sec-bc-slide{
  padding:clamp(96px, 14vh, 160px) clamp(40px, 8vw, 120px);
  background:var(--ink);color:var(--bone);
}
.bc-slide-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;
}
.bc-slide-l{
  display:flex;flex-direction:column;gap:14px;
  justify-content:space-between;padding-right:0;
  opacity:0;transform:translateY(14px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.19,1,.22,1);
}
.sec-bc-slide.is-vis .bc-slide-l{ opacity:1; transform:none; }
.bc-slide-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.30em;text-transform:uppercase;
}
.bc-slide-pill{ color:var(--vermillion);padding:6px 10px;border:1px solid var(--vermillion); }
.bc-slide-counter{ color:var(--stone); }
.bc-slide-code{
  font-family:var(--serif) !important;
  font-style:italic !important;font-weight:300 !important;
  font-size:clamp(120px, 16vw, 220px) !important;
  line-height:.95 !important;letter-spacing:-.005em !important;
  color:var(--bone) !important;margin:24px 0 0;
}
.bc-slide-code-dot{ color:var(--vermillion); font-style:normal; }
.bc-slide-en{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(22px, 1.8vw, 28px);letter-spacing:.04em;
  color:var(--stone-light);
}
.bc-slide-jp{
  font-family:var(--sans);font-size:14px;font-weight:300;
  letter-spacing:.30em;color:var(--stone);
}
.bc-slide-rule{ width:64px;height:1px;background:rgba(217,81,44,.6);margin:14px 0 0; }
.bc-slide-body{
  font-family:var(--sans);font-size:14px;font-weight:300;
  line-height:1.95;letter-spacing:.05em;
  color:var(--stone-light);max-width:42ch;margin:0;
}
.bc-slide-foot{ margin-top:12px; }
.bc-slide-foot-tag{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.45em;text-transform:uppercase;
  color:var(--vermillion);
}
.bc-slide-r{ display:flex;align-items:stretch; }
.bc-slide-frame{
  flex:1;background:var(--ink-soft);
  border:1px solid rgba(181,175,163,.16);
  position:relative;min-height:480px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bc-slide-frame-corner{ position:absolute;width:18px;height:18px;border:0 solid var(--vermillion); }
.bc-slide-frame-corner.tl{top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.bc-slide-frame-corner.tr{top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.bc-slide-frame-corner.bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.bc-slide-frame-corner.br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}
.bc-slide-frame [class^="bc-slide-frame-hud"]{
  position:absolute;
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.30em;text-transform:uppercase;color:var(--stone-light);
}
.bc-slide-frame-hud-tl{top:32px;left:32px}
.bc-slide-frame-hud-tr{top:32px;right:32px;color:var(--vermillion)}
.bc-slide-frame-hud-br{bottom:32px;right:32px;color:var(--stone)}
.bc-slide-frame-label{
  position:absolute;bottom:32px;left:32px;
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.20em;color:var(--stone);
}
.bc-slide-frame-shapes{ position:relative;width:60%;height:60%; }
.bcs-shape{ position:absolute;border:1px solid rgba(181,175,163,.22); }
.bcs-shape-a{ top:0;left:10%;width:60%;height:60%;background:rgba(217,81,44,.06); }
.bcs-shape-b{ bottom:0;right:10%;width:50%;height:50%;background:rgba(181,175,163,.06); }
.bcs-shape-c{ top:30%;left:30%;width:30%;height:30%;border-color:var(--vermillion); }

/* ── 13 SNS MANAGEMENT — section label support ─────────────── */
.sns-management-section .reveal{ display:flex;flex-direction:column;gap:14px; }
.sns-management-section .reveal .section-label{ display:inline-flex !important; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .position-grid{ grid-template-columns:1fr; }
  .sub-versus{ grid-template-columns:1fr; }
  .sub-versus-pivot{ flex-direction:row; }
  .sub-versus-pivot .vs-line{ height:1px; width:32px; min-height:0; }
  .cap-grid{ grid-template-columns:1fr 1fr; }
  .bc-overview-grid{ grid-template-columns:1fr 1fr; }
  .tp-cycle{ grid-template-columns:1fr; gap:24px; }
  .tp-cycle-mid{ flex-direction:row; gap:14px; }
  .tp-cycle-svg{ width:80px;height:80px; }
  .bc-slide-inner{ grid-template-columns:1fr; gap:32px; }
  .ts-flow{ flex-direction:column; }
  .ts-arrow{ width:auto;height:48px;transform:rotate(90deg); }
}
@media (max-width:680px){
  .cap-grid{ grid-template-columns:1fr; }
  .bc-overview-grid{ grid-template-columns:1fr; }
  .hero-claim{ font-size:48px !important; }
}


/* ============================================================================
   WORKS — SNS cases (after SNS Management)
   3-col grid on desktop, snap carousel on mobile.
============================================================================ */
.sec-works{
  background:var(--bone-soft);
  color:var(--ink);
}
.sec-works .sec-26-title{ color:var(--ink) !important; }
.sec-works .sec-26-sub{ color:var(--earth) !important; }
.sec-works .sec-26-head .section-label{ color:var(--earth) !important; }
.sec-works .sec-26-outro{ color:var(--earth) !important; }
.sec-works .sec-26-outro em{ color:var(--ink) !important; }

.sec-works-head{
  flex-direction:row !important;
  justify-content:space-between;
  align-items:flex-end !important;
  gap:32px;
  margin-bottom:48px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(14,14,14,.14);
}
.sec-works-head-l{ display:flex;flex-direction:column;gap:14px;flex:1; }
.sec-works-head-r{ display:flex;align-items:center;gap:18px; }
.works-count-num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(48px, 5vw, 72px);
  color:var(--ink);letter-spacing:.02em;line-height:1;
}
.works-count-bar{ display:block;width:1px;height:54px;background:rgba(14,14,14,.22); }
.works-count-lbl{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.40em;text-transform:uppercase;color:var(--earth);
}

/* Desktop: 3-col grid */
.works-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(14,14,14,.18);
  border:1px solid rgba(14,14,14,.18);
}

.work-tile{
  background:var(--bone);
  padding:36px clamp(24px, 2.6vw, 36px) 32px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  min-height:280px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease var(--d), transform .9s cubic-bezier(.19,1,.22,1) var(--d), background .25s ease;
}
.sec-works.is-vis .work-tile{ opacity:1; transform:none; }
.work-tile:hover{ background:var(--bone-soft); }

.work-tile-top{
  display:flex;justify-content:space-between;align-items:center;
}
.work-tile-num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;color:var(--vermillion);line-height:1;
}
.work-tile-platform{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.30em;text-transform:uppercase;color:var(--stone);
}

.work-tile-kpi{
  margin-top:8px;
}
.work-tile-kpi-num{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:clamp(38px, 4.2vw, 56px) !important;
  line-height:1 !important;
  letter-spacing:.005em !important;
  color:var(--ink) !important;
}
.work-tile-kpi-sub{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.20em;text-transform:uppercase;color:var(--stone);
  margin-top:6px;
}

.work-tile-headline{
  font-family:var(--sans) !important;
  font-weight:400 !important;
  font-size:clamp(16px, 1.4vw, 20px) !important;
  line-height:1.55 !important;
  letter-spacing:.02em !important;
  color:var(--ink) !important;
  white-space:pre-line;
  margin:auto 0 0;
}

.work-tile-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;
  border-top:1px solid rgba(14,14,14,.14);
}
.work-tile-cat{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.20em;text-transform:uppercase;color:var(--earth);
}
.work-tile-arrow{
  font-family:var(--serif);font-style:italic;
  color:var(--vermillion);font-size:18px;
  transition:transform .25s ease;
}
.work-tile:hover .work-tile-arrow{ transform:translateX(4px); }

/* Mobile: horizontal snap carousel */
@media (max-width:720px){
  .sec-works-head{ flex-direction:column !important; align-items:flex-start !important; }
  .sec-works-head-r{ align-self:flex-end; }
  .works-grid{
    display:flex;
    grid-template-columns:none;
    gap:0;
    background:transparent;
    border:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:24px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0 24px 16px;
    scrollbar-width:none;
  }
  .works-grid::-webkit-scrollbar{ display:none; }
  .work-tile{
    flex:0 0 80%;
    min-width:280px;
    scroll-snap-align:start;
    border:1px solid rgba(14,14,14,.18);
    background:var(--bone) !important;
    margin-right:12px;
  }
}
@media (min-width:721px) and (max-width:1024px){
  .works-grid{ grid-template-columns:repeat(2, 1fr); }
}


/* ============================================================================
   PRTY-INSPIRED TYPOGRAPHY OVERHAUL
   - Section titles → editorial-display scale (clamp 64–140px)
   - Section labels → tiny mono with vermillion bar
   - Body leads → set narrower with more line-height
   - Vertical rhythm: bigger air between sections, no PowerPoint feel
============================================================================ */

/* All section padding — increase air */
.sec-26{
  padding-top: clamp(140px, 18vh, 240px) !important;
  padding-bottom: clamp(140px, 18vh, 240px) !important;
}

/* Section heads — much bigger, with stronger hierarchy */
.sec-26-head{
  display:grid !important;
  grid-template-columns:1fr;
  gap:8px !important;
  margin-bottom: clamp(80px, 12vh, 160px) !important;
  position:relative;
}
.sec-26-head .section-label{
  font-family:var(--mono) !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.45em !important;
  margin-bottom:24px !important;
  display:inline-flex !important;
}
.sec-26-head .section-label::before{
  width:36px !important;
  background:var(--vermillion) !important;
}

/* Massive titles */
.sec-26-title{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:clamp(56px, 9vw, 144px) !important;
  line-height:.95 !important;
  letter-spacing:-.015em !important;
  margin:0 !important;
  text-wrap:balance;
}
.sec-26-sub{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-size:clamp(20px, 1.8vw, 28px) !important;
  letter-spacing:.04em !important;
  margin-top:18px !important;
}

/* Outros — bigger air, more pull */
.sec-26-outro{
  margin-top: clamp(80px, 10vh, 140px) !important;
  font-size:clamp(18px, 1.6vw, 24px) !important;
  letter-spacing:.16em !important;
  line-height:1.7 !important;
}
.sec-26-outro em{
  font-size:1.15em !important;
}



/* ── 02 POSITION — make ZIHEN column dominate ──────────────── */
.sec-position .position-grid{
  grid-template-columns: 1fr 1.4fr 1fr !important;
}
.pos-card-us{
  padding: clamp(56px, 6vw, 96px) clamp(36px, 3.6vw, 56px) !important;
}
.pos-card-en{
  font-size: clamp(28px, 2.8vw, 42px) !important;
  font-style: italic !important;
}
.pos-card-us .pos-card-en{
  font-size: clamp(36px, 3.8vw, 56px) !important;
}
.pos-card-num{
  font-size: clamp(36px, 3.6vw, 52px) !important;
}
.pos-card-lead{
  font-size: clamp(17px, 1.4vw, 21px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.pos-card-us .pos-card-lead{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 400 !important;
}

/* ── 03 DISTILLING — even more massive ────────────────────── */
.distill-title{
  font-size: clamp(120px, 22vw, 320px) !important;
  letter-spacing: -.025em !important;
}
.distill-jp{
  font-size: clamp(22px, 2vw, 30px) !important;
  letter-spacing: .25em !important;
}
.distill-essay{
  font-size: clamp(17px, 1.4vw, 21px) !important;
  line-height: 2.2 !important;
  max-width: 720px !important;
}

/* ── 04 SUBTRACTIVE — heavier presence ────────────────────── */
.sub-side{
  padding: clamp(56px, 6vw, 96px) clamp(36px, 3.6vw, 56px) !important;
}
.sub-side-tag{ font-size: 11px !important; }
.sub-side-h{
  font-size: clamp(40px, 4.6vw, 72px) !important;
  margin-top: 18px !important;
}
.sub-side-list li{
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.8 !important;
  padding-left: 32px !important;
}
.sub-side-list li::before{ width: 18px !important; }
.sub-versus-pivot .vs-mark{
  font-size: clamp(48px, 5vw, 80px) !important;
}

/* ── 05 THREE STEPS — let names breathe ───────────────────── */
.ts-card{
  padding: clamp(48px, 4.5vw, 72px) clamp(32px, 3vw, 48px) !important;
}
.ts-card-en{
  font-size: clamp(52px, 5.8vw, 88px) !important;
}
.ts-card-jp{
  font-size: clamp(17px, 1.4vw, 20px) !important;
  letter-spacing: .25em !important;
  margin-top: 4px;
}
.ts-card-body{
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 2 !important;
}

/* ── 06 CAPABILITY — make pillar names dominant ───────────── */
.cap-grid{
  grid-template-columns: 1fr !important;
  gap: 1px !important;
}
.cap-cell{
  padding: clamp(48px, 5vw, 80px) clamp(36px, 4vw, 64px) !important;
  display: grid !important;
  grid-template-columns: 80px 1.2fr 1.5fr !important;
  grid-template-rows: auto auto !important;
  gap: 0 32px !important;
  align-items: baseline;
}
.cap-cell-num{
  grid-row: 1 / 3;
  font-size: clamp(40px, 4vw, 60px) !important;
  align-self: start;
}
.cap-cell-en{
  font-size: clamp(48px, 5.5vw, 84px) !important;
  margin: 0 !important;
}
.cap-cell-jp{
  grid-column: 2;
  font-size: 13px !important;
  margin-top: 8px;
}
.cap-cell-items{
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0 !important;
}
.cap-cell-items li{
  font-size: clamp(14px, 1.1vw, 16px) !important;
}
.cap-cell-rule,
.cap-cell-body{
  grid-column: 3;
  margin-top: 18px !important;
}
.cap-cell-body{
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.95 !important;
}

/* ── 07 TWO PILLARS — massive pillar names ────────────────── */
.tp-pillar-en{
  font-size: clamp(48px, 5.6vw, 92px) !important;
}
.tp-pillar{
  padding: clamp(56px, 6vw, 96px) clamp(36px, 3.6vw, 56px) !important;
}
.tp-coda-en{
  font-size: clamp(40px, 4.2vw, 64px) !important;
}
.tp-cycle-svg{ width: 140px !important; height: 140px !important; }

/* ── 08 BRAND CONTENT OVERVIEW — code dominates ──────────── */
.bc-overview-grid{
  grid-template-columns: 1fr 1fr !important;
}
.bc-overview-cell{
  padding: clamp(48px, 5vw, 80px) clamp(36px, 3.6vw, 56px) !important;
  min-height: 280px;
}
.bc-overview-code{
  font-size: clamp(72px, 9vw, 144px) !important;
  letter-spacing: -.015em !important;
}
.bc-overview-en{
  font-size: clamp(20px, 1.6vw, 26px) !important;
}
.bc-overview-body{
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 2 !important;
}

/* ── 09-12 BRAND SLIDE — even more dramatic ──────────────── */
.bc-slide-code{
  font-size: clamp(160px, 22vw, 320px) !important;
  letter-spacing: -.025em !important;
  margin-top: 0 !important;
}
.bc-slide-en{
  font-size: clamp(28px, 2.4vw, 38px) !important;
}
.bc-slide-jp{
  font-size: clamp(15px, 1.2vw, 18px) !important;
  letter-spacing: .30em !important;
}
.bc-slide-body{
  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 2.05 !important;
  max-width: 44ch !important;
}
.bc-slide-frame{ min-height: 560px !important; }

/* ── 14 WORKS — editorial vertical list (prty.jp inspired) ── */
.sec-works-head{ margin-bottom: clamp(64px, 8vh, 100px) !important; }
.works-count-num{
  font-size: clamp(72px, 9vw, 128px) !important;
}
.works-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
}
.work-tile{
  min-height: 380px !important;
  padding: clamp(36px, 3.6vw, 56px) clamp(28px, 2.8vw, 40px) clamp(28px, 2.4vw, 36px) !important;
}
.work-tile-platform{
  font-size: 11px !important;
}
.work-tile-num{
  font-size: clamp(22px, 1.8vw, 28px) !important;
}
.work-tile-kpi-num{
  font-size: clamp(64px, 7vw, 108px) !important;
  letter-spacing: -.005em !important;
  margin-top: 14px;
}
.work-tile-headline{
  font-size: clamp(20px, 1.9vw, 28px) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* ── Reduce extreme sizes on small screens ──────────────── */
@media (max-width: 720px){
  .sec-26{
    padding-top: clamp(80px, 12vh, 120px) !important;
    padding-bottom: clamp(80px, 12vh, 120px) !important;
  }
  .sec-26-head{ margin-bottom: 56px !important; }
  .sec-26-title{ font-size: clamp(40px, 12vw, 72px) !important; }
  
  .distill-title{ font-size: clamp(72px, 24vw, 140px) !important; }
  .bc-slide-code{ font-size: clamp(96px, 28vw, 160px) !important; }
  .bc-overview-grid{ grid-template-columns: 1fr !important; }
  .ts-card-en{ font-size: clamp(40px, 12vw, 64px) !important; }
  .cap-cell{
    grid-template-columns: 64px 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .cap-cell-num{ grid-row: 1; align-self: end; }
  .cap-cell-en{ font-size: clamp(32px, 10vw, 56px) !important; }
  .cap-cell-items,
  .cap-cell-rule,
  .cap-cell-body{ grid-column: 1 / 3 !important; grid-row: auto !important; }
  .position-grid,
  .sub-versus{ grid-template-columns: 1fr !important; }
  .sub-versus-pivot{ flex-direction: row !important; }
  .pos-card{ padding: 40px 24px !important; }
}


/* ============================================================================
   SNS MANAGEMENT — Dark-mode rebuild
   Section now lives on Ink Black; flip all text/hairline colors for legibility.
   Overrides win over the brand-system block because this stylesheet loads after.
============================================================================ */

#services-sns,
#services-sns .services,
.sns-management-section{
  background: var(--ink) !important;
  color: var(--bone) !important;
}
#services-sns .services{
  padding: clamp(140px, 18vh, 240px) clamp(40px, 8vw, 120px) !important;
}
#services-sns .sub-section.sns-management-section{
  background: var(--ink) !important;
  color: var(--bone) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
#services-sns .sub-section.sns-management-section::before,
#services-sns .sub-section.sns-management-section::after{ content: none !important; }

/* Section heading area — match other dark sections */
.sns-management-section .reveal{
  margin-bottom: clamp(64px, 9vh, 120px) !important;
}
.sns-management-section .reveal .section-label{
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .45em !important;
  text-transform: uppercase !important;
  color: var(--stone) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}
.sns-management-section .reveal .section-label::before{
  content: "";
  width: 36px; height: 1px;
  background: var(--vermillion) !important;
  display: inline-block;
}
.sns-management-section .reveal .sub-h.tw-heading{
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(56px, 9vw, 144px) !important;
  line-height: .95 !important;
  letter-spacing: -.015em !important;
  color: var(--bone) !important;
  margin: 0 !important;
}
.sns-management-section .reveal .sub-jp{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  letter-spacing: .04em !important;
  color: var(--stone-light) !important;
  margin-top: 18px !important;
}
.sns-management-section .sns-intro{
  font-family: var(--sans) !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  font-weight: 300 !important;
  line-height: 2.1 !important;
  letter-spacing: .06em !important;
  color: var(--stone-light) !important;
  max-width: 60ch !important;
  margin-top: 28px !important;
}

/* Stock matrix wrapper */
.stk-matrix-wrap{ padding-top: clamp(28px, 3.5vh, 52px) !important; }

/* Lead intro — reduce big gap above/below */
.sns-management-section .reveal{ margin-bottom: 28px !important; }
.sns-management-section .sns-intro{ margin-top: 18px !important; }

/* Cap row — concept heading + side number */
.stk-cap{
  border-bottom-color: rgba(181,175,163,.18) !important;
}
.stk-eyebrow{
  color: var(--stone) !important;
}
.stk-eyebrow-mark{ background: var(--vermillion) !important; }
.stk-head-en{
  color: var(--bone) !important;
  font-size: clamp(48px, 6vw, 96px) !important;
}
.stk-head-jp{ color: var(--stone-light) !important; }
.stk-cap-num{ color: var(--bone) !important; }
.stk-cap-bar{ background: rgba(181,175,163,.30) !important; }
.stk-cap-label{ color: var(--stone) !important; }

/* The 2×2 grid — hairlines visible on dark */
.stk-matrix{
  border-top-color: rgba(181,175,163,.25) !important;
  border-left-color: rgba(181,175,163,.25) !important;
}
.stk-axis-corner,
.stk-axis-col,
.stk-axis-row,
.stk-cell{
  border-right-color: rgba(181,175,163,.25) !important;
  border-bottom-color: rgba(181,175,163,.25) !important;
}

.stk-axis-corner-y,
.stk-axis-corner-x{ color: var(--stone) !important; }

.stk-axis-col-en{
  color: var(--bone) !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
}
.stk-axis-col-jp{ color: var(--stone-light) !important; }
.stk-axis-row-en{
  color: var(--bone) !important;
  font-size: clamp(24px, 2.2vw, 36px) !important;
}
.stk-axis-row-jp{ color: var(--stone-light) !important; }

/* Cell content — readable hierarchy */
.stk-cell{
  background: transparent !important;
  padding: clamp(48px, 5vw, 80px) clamp(32px, 3vw, 56px) !important;
}
.stk-cell-head{ margin-bottom: 8px; }
.stk-cell-num{ color: var(--vermillion) !important; }
.stk-cell-tag{ color: var(--stone) !important; }
.stk-cell-tag::before{ background: rgba(181,175,163,.30) !important; }
.stk-cell-jp{
  color: var(--bone) !important;
  font-size: clamp(28px, 2.6vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.stk-cell-en{
  color: var(--stone-light) !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
}
.stk-cell-divider{ background: rgba(217,81,44,.55) !important; width: 64px !important; }
.stk-cell-body{
  color: var(--stone-light) !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 2 !important;
  max-width: 36ch !important;
}
/* Background giant numerals — tone down even more so they don't fight text */
.stk-cell-bignum{
  color: var(--bone) !important;
  opacity: .055 !important;
}

/* Outro line below grid */
.stk-outro{
  margin-top: clamp(64px, 8vh, 120px) !important;
}
.stk-outro-mark{ background: var(--vermillion) !important; }
.stk-outro p{
  color: var(--bone) !important;
  font-size: clamp(18px, 1.5vw, 24px) !important;
}
.stk-outro em{
  color: var(--vermillion) !important;
}

/* Tick accents on axis labels */
.stk-axis-tick{ background: var(--vermillion) !important; }


/* ============================================================================
   SCROLL-DRIVEN TITLE REVEAL  (modern browsers — falls back gracefully)
   Each section's massive title animates in as it scrolls into view.
   Uses CSS animation-timeline: view() — Chrome 115+/Edge/Safari 17.4+/Firefox 132+
============================================================================ */

@supports (animation-timeline: view()){
  .sec-26-title{
    animation: zi-title-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .sec-26-sub,
  .sec-26-head .section-label{
    animation: zi-sub-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  /* Section outro lines bloom in when they leave the bottom of viewport */
  .sec-26-outro{
    animation: zi-outro-rise linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 75%;
  }
  /* Distilling® mega title gets a bigger zoom + clip reveal */
  .distill-title{
    animation: zi-mega-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 75%;
  }
  /* Brand slide CODE letters scale + slide in */
  .bc-slide-code{
    animation: zi-mega-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  /* Capability cells stagger into view */
  .cap-cell-en,
  .tp-pillar-en,
  .ts-card-en,
  .work-tile-kpi-num{
    animation: zi-display-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes zi-title-rise{
  from{
    transform:translateY(48px);
    opacity:0;
    clip-path:inset(0 100% 0 0);
    letter-spacing:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
    clip-path:inset(0 0 0 0);
  }
}
@keyframes zi-sub-fade{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes zi-outro-rise{
  from{ opacity:0; transform:translateY(20px); letter-spacing:.30em; }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes zi-mega-rise{
  from{
    transform:translateY(60px) scale(0.96);
    opacity:0;
    clip-path:inset(0 100% 0 0);
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
    clip-path:inset(0 0 0 0);
  }
}
@keyframes zi-display-rise{
  from{ opacity:0; transform:translateY(36px); }
  to{ opacity:1; transform:translateY(0); }
}

/* For browsers without animation-timeline support, keep current static look.
   The original section reveal-on-IntersectionObserver still fires for cards. */

/* Smooth scroll across the doc */
html{ scroll-behavior: smooth; }


/* ============================================================================
   HERO — Line-art, mark-as-magnet edition.
============================================================================ */
.hero.hero-line{
  position:relative;
  min-height: 100vh;
  background:
    radial-gradient(145% 105% at 50% 36%, #2B241E 0%, #1C1713 34%, #120E0B 72%, #0B0908 100%),
    #100C0A;
  color: var(--bone);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top" "stage" "bottom";
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Page connector thread that descends from the mark */
.hero-thread{
  position: absolute;
  left: 50%;
  top: calc(50% + min(28vh, 280px));
  bottom: 0;
  width: 1px;
  pointer-events: none;
  z-index: 4;
  transform: translateX(-0.5px);
  display: none; /* superseded by the global page connector centered line */
}
.hero-thread-rule{
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--vermillion) 0%,
    rgba(217,81,44,.65) 30%,
    rgba(217,81,44,.18) 70%,
    transparent 100%);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.6s cubic-bezier(.22,1,.36,1) .8s;
}
.hero.is-vis .hero-thread-rule{ transform: scaleY(1); }

/* Corner meta */
.hero.hero-line .hero-meta{
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 1.1s ease 1.0s;
}
.hero.hero-line.is-vis .hero-meta{ opacity: 1; }
.hero-meta-tl{ top: clamp(28px, 4vh, 56px); left: clamp(28px, 4vw, 56px); align-items: flex-start; }
.hero-meta-tr{ top: clamp(28px, 4vh, 56px); right: clamp(28px, 4vw, 56px); align-items: flex-end; }
.hero-meta-bl{ bottom: clamp(28px, 4vh, 56px); left: clamp(28px, 4vw, 56px); }
.hero-meta-br{ bottom: clamp(28px, 4vh, 56px); right: clamp(28px, 4vw, 56px); align-items: flex-end; }
.hero-meta-text{
  font-family: var(--mono) !important;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--stone-light);
  line-height: 1.4;
}
.hero-meta-text.dim{ color: var(--stone); }
.hero-meta-dot{
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vermillion);
  margin-bottom: 6px;
}

/* Stage centered */
.hero-stage{
  grid-area: stage;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vh, 160px) 0;
}

/* Orbit ring */
.hero-orbit{
  position: absolute;
  width: clamp(420px, 56vmin, 720px);
  height: clamp(420px, 56vmin, 720px);
  pointer-events: none;
  z-index: 2;
  animation: hero-orbit-spin 100s linear infinite;
  opacity: 0;
  transition: opacity 1.5s ease .6s;
}
.hero.is-vis .hero-orbit{ opacity: 1; }
.hero-orbit-svg{ width: 100%; height: 100%; overflow: visible; }
.hero-orbit-text{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .45em;
  text-transform: uppercase;
  fill: var(--stone);
}
@keyframes hero-orbit-spin{ to { transform: rotate(360deg); } }

/* The main mark */
.hero-mark{
  position: relative;
  z-index: 3;
  width: clamp(280px, 38vmin, 480px);
  aspect-ratio: 1;
  color: var(--stone-light);
  transform: translate3d(0,0,0);
  will-change: transform;
}
.hero-mark-svg{ width: 100%; height: 100%; overflow: visible; }

.hero-mark .hm-ring-a{
  transform-origin: 200px 200px;
  animation: hero-mark-spin 60s linear infinite;
}
.hero-mark .hm-ring-b{
  transform-origin: 200px 200px;
  animation: hero-mark-spin 80s linear infinite reverse;
}
.hero-mark .hm-ring-c{
  transform-origin: 200px 200px;
  animation: hero-mark-spin 36s linear infinite;
}
@keyframes hero-mark-spin{ to { transform: rotate(360deg); } }

.hero-mark .hm-axis{
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: hero-axis-draw 1.6s cubic-bezier(.22,1,.36,1) 1.1s forwards;
}
.hero-mark .hm-axis:nth-of-type(2){ animation-delay: 1.25s; }
@keyframes hero-axis-draw{ to { stroke-dashoffset: 0; } }

.hero-mark .hm-core{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: hero-core-in 1s cubic-bezier(.22,1,.36,1) 1.5s forwards,
             hero-core-pulse 2.6s ease-in-out 2.6s infinite;
}
@keyframes hero-core-in{
  from{ opacity: 0; transform: scale(0); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes hero-core-pulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(217,81,44,0)); }
  50%{ filter: drop-shadow(0 0 6px rgba(217,81,44,.6)); }
}

.hero-mark .hm-dash{
  transform-origin: 200px 200px;
  opacity: 0;
  animation: hero-dash-in 1.2s ease 1.7s forwards;
}
@keyframes hero-dash-in{
  from{ opacity: 0; transform: scale(.85); }
  to{ opacity: 1; transform: scale(1); }
}

/* Claim — single-line below mark */
.hero-claim-line{
  grid-area: bottom;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .12em;
  padding: 0 24px clamp(80px, 12vh, 140px);
  position: relative;
  z-index: 3;
}
.hero-claim-line > *{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--bone);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.hero.is-vis .hero-claim-line .hcl-word:nth-child(1){ transition-delay: 1.45s; }
.hero.is-vis .hero-claim-line .hcl-em       { transition-delay: 1.55s; }
.hero.is-vis .hero-claim-line .hcl-word:nth-child(3){ transition-delay: 1.65s; }
.hero.is-vis .hero-claim-line .hcl-word:nth-child(4){ transition-delay: 1.75s; }
.hero.is-vis .hero-claim-line .hcl-word:nth-child(5){ transition-delay: 1.85s; }
.hero.is-vis .hero-claim-line > *{ opacity: 1; transform: none; }

.hcl-em{
  font-style: italic;
  color: var(--vermillion) !important;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce){
  .hero-orbit, .hero-mark .hm-ring-a, .hero-mark .hm-ring-b, .hero-mark .hm-ring-c,
  .hero-mark .hm-dash, .hero-mark .hm-core{ animation: none !important; }
}

/* ============================================================================
   PAGE CONNECTOR — vermillion thread along left edge, ring at each section.
============================================================================ */
.zi-connector{
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  pointer-events: none;
  z-index: 6;
  transform: translateX(-0.5px);
}
.zic-svg{
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  overflow: visible;
}
.zic-track{
  stroke: rgba(181,175,163,.18);
  stroke-width: 1;
}
.zic-fill{
  stroke: var(--vermillion);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(217,81,44,.35));
  transition: y2 .4s cubic-bezier(.22,1,.36,1);
}
.zic-nodes{ position: relative; }
.zic-node{
  position: absolute;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0;
}
.zic-node-label{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .30em;
  color: var(--stone);
  padding-left: 4px;
  display: none; /* hide label by default when centered, can re-enable per-section */
}
.zic-node-ring{
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--vermillion);
  box-shadow: 0 0 0 4px var(--ink);
}
/* Drop the duplicated label rule that the broader rebuild added later */
.zic-node .zic-node-label{ display: none; }

@media (max-width: 720px){
  .zi-connector{ display: none; }
}


/* ── Logo mark image (replaces SVG mark) ─────────────────────────────── */
.hero-mark{
  position: relative;
  z-index: 3;
  width: clamp(280px, 38vmin, 460px);
  aspect-ratio: 1;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.hero-mark-img-wrap{
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
}
.hero-mark-img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 1.2s cubic-bezier(.22,1,.36,1) .3s,
              transform 1.4s cubic-bezier(.22,1,.36,1) .3s;
  /* Subtle continuous breathing animation once revealed */
  animation: hero-mark-breathe 8s ease-in-out 2s infinite;
}
.hero.is-vis .hero-mark-img{ opacity: 1; transform: scale(1); }
@keyframes hero-mark-breathe{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(217,81,44,0)); }
  50%{ filter: drop-shadow(0 0 18px rgba(217,81,44,.18)); }
}
.hero-mark-core{
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--vermillion);
  box-shadow: 0 0 18px rgba(217,81,44,.6);
  opacity: 0;
  transform: scale(0);
  animation: hero-mark-core-in 1s cubic-bezier(.22,1,.36,1) 1.4s forwards,
             hero-mark-core-pulse 2.4s ease-in-out 2.6s infinite;
}
@keyframes hero-mark-core-in{
  from{ opacity: 0; transform: scale(0); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes hero-mark-core-pulse{
  0%,100%{ box-shadow: 0 0 18px rgba(217,81,44,.55); transform: scale(1); }
  50%{ box-shadow: 0 0 28px rgba(217,81,44,.85); transform: scale(1.08); }
}


/* ── Nav wordmark replaces text logo ─────────────────────────────────── */
header.nav a.logo,
.logo{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  letter-spacing: 0 !important;
}
header.nav a.logo::after,
.logo::after{ content: none !important; }
.logo-img{
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
}


/* ── Geometric SVG mark — replaces PNG; supports wave filter ─────────── */
.hero-mark-svg{
  width: 100%; height: 100%; overflow: visible;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 1.2s cubic-bezier(.22,1,.36,1) .3s, transform 1.4s cubic-bezier(.22,1,.36,1) .3s;
}
.hero.is-vis .hero-mark-svg{ opacity: 1; transform: scale(1); }
.hero-mark-svg .zm-rings{
  transform-origin: 200px 200px;
  animation: zm-rings-spin 60s linear infinite;
}
@keyframes zm-rings-spin{ to { transform: rotate(360deg); } }
.hero-mark-svg .hm-core{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: hero-core-in 1s cubic-bezier(.22,1,.36,1) 1.5s forwards,
             hero-core-pulse-svg 2.6s ease-in-out 2.6s infinite;
}
@keyframes hero-core-pulse-svg{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(217,81,44,0)); transform: scale(1); }
  50%{ filter: drop-shadow(0 0 8px rgba(217,81,44,.85)); transform: scale(1.12); }
}
/* hide the old PNG wrap if still present in any cache */
.hero-mark-img-wrap{ display: none !important; }




/* ── Hero stage — mark is the background, BCA overlays centered ─────── */
.hero-stage{
  grid-area: stage;
  position: relative;
  display: grid;
  place-items: center;
  z-index: 2;
  padding: clamp(60px, 8vh, 120px) 24px clamp(80px, 12vh, 140px);
}
/* Stack everything in the same grid cell so they overlap */
.hero-stage > *{
  grid-area: 1 / 1;
}

/* ── Grainy gradient orb (monopo-inspired, ZIHEN vermillion) ───────── */
.hero-orb{
  position: relative;
  z-index: 0;
  width: clamp(440px, 72vmin, 880px);
  aspect-ratio: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.hero-orb-core,
.hero-orb-grain{
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/* The glow: vermillion core → deep wine → a cool slate edge (a quiet nod to
   "borderless / global"), dissolving into the sumi background. */
.hero-orb-core{
  background:
    radial-gradient(circle at 50% 42%,
      rgba(232,108,72,.95) 0%,
      rgba(201,71,42,.82) 18%,
      rgba(122,38,30,.72) 42%,
      rgba(58,34,46,.55) 64%,
      rgba(40,40,56,.30) 80%,
      rgba(20,17,15,0) 100%);
  filter: blur(2px) saturate(1.05);
  animation: heroOrbBreath 12s cubic-bezier(.45,0,.2,1) infinite;
}
/* Film grain layer, masked to the circle, blended over the glow */
.hero-orb-grain{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: .42;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 78%);
  mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 78%);
  animation: heroOrbGrain 7s steps(6) infinite;
}
@keyframes heroOrbBreath{
  0%,100%{ transform: scale(1); opacity: .92; }
  50%{ transform: scale(1.045); opacity: 1; }
}
@keyframes heroOrbGrain{
  0%{ background-position: 0 0; }
  100%{ background-position: 180px 90px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-orb-core{ animation: none; }
  .hero-orb-grain{ animation: none; }
}
@media (max-aspect-ratio: 1/1){
  .hero-orb{ width: clamp(360px, 92vw, 620px); }
}

/* Mark: more transparent so BCA reads through */
.hero-mark{
  position: relative;
  z-index: 1;
  width: clamp(360px, 56vmin, 720px);
  aspect-ratio: 1;
  transform: translate3d(0,0,0);
  will-change: transform;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero-mark-svg{
  width: 100%; height: 100%; overflow: visible;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 1.4s cubic-bezier(.22,1,.36,1) .3s, transform 1.6s cubic-bezier(.22,1,.36,1) .3s;
}
.hero.is-vis .hero-mark-svg{
  /* Final: mostly transparent so BCA text reads as the hero subject */
  opacity: 0.22;
  transform: scale(1);
}
/* Slight breath glow on the entire mark */
.hero-mark-svg{ animation: hero-mark-breathe 9s ease-in-out 2s infinite; }
@keyframes hero-mark-breathe{
  0%, 100% { filter: drop-shadow(0 0 0 rgba(217,81,44,0)); }
  50% { filter: drop-shadow(0 0 22px rgba(217,81,44,.20)); }
}

/* The Vermillion core stays at full opacity even though the mark is dim */
.hero-mark-svg .hm-core{
  /* override container opacity by re-asserting opacity 1 via animation */
}

/* Orbit: keep behind everything but above mark for clarity */
.hero-orbit{
  z-index: 0;
  position: relative;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease .6s;
}
.hero.is-vis .hero-orbit{ opacity: .8; }

/* ── BCA centered overlay ─────────────────────────────────────────── */
.hero-bca{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(28px, 4.5vw, 72px);
  line-height: .82;
  letter-spacing: -.025em;
  color: var(--bone);
  text-align: center;
  pointer-events: none;
  max-width: 100%;
}
.hbca-line{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}
.hbca-line > span{
  display: inline-block;
  opacity: 0;
  transform: scale(.9);
  filter: blur(12px);
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1), filter 1.1s cubic-bezier(.22,1,.36,1);
}
/* Stagger reveal across all letters in document order */
.hero.is-vis .hbca-line:nth-child(1) > span:nth-child(1){ transition-delay: 1.95s; }
.hero.is-vis .hbca-line:nth-child(1) > span:nth-child(2){ transition-delay: 2.00s; }
.hero.is-vis .hbca-line:nth-child(1) > span:nth-child(3){ transition-delay: 2.05s; }
.hero.is-vis .hbca-line:nth-child(1) > span:nth-child(4){ transition-delay: 2.10s; }
.hero.is-vis .hbca-line:nth-child(1) > span:nth-child(5){ transition-delay: 2.15s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(1){ transition-delay: 2.20s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(2){ transition-delay: 2.25s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(3){ transition-delay: 2.30s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(4){ transition-delay: 2.35s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(5){ transition-delay: 2.40s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(6){ transition-delay: 2.45s; }
.hero.is-vis .hbca-line:nth-child(2) > span:nth-child(7){ transition-delay: 2.50s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(1){ transition-delay: 2.55s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(2){ transition-delay: 2.60s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(3){ transition-delay: 2.65s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(4){ transition-delay: 2.70s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(5){ transition-delay: 2.75s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(6){ transition-delay: 2.80s; }
.hero.is-vis .hbca-line:nth-child(3) > span:nth-child(7){ transition-delay: 2.85s; }
.hero.is-vis .hbca-line > span{ opacity: 1; transform: none; filter: blur(0); }

.hbca-dot{ color: var(--vermillion) !important; font-style: italic; }

/* ── Japanese claim — sits below the stacked group, still centered ──── */
.hero-stage .hero-claim-line{
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(48px, 8vh, 96px);
  margin: 0 auto;
  padding: 0 24px;
  z-index: 3;
  justify-content: center;
}

@media (max-width: 720px){
  .hero-bca{ font-size: clamp(22px, 7vw, 42px); }
  .hero-mark{ width: clamp(260px, 80vmin, 380px); }
}


/* Distilling® title — wave on cursor proximity */
.distill-title{
  filter: url(#zi-distill-wave);
  transform-origin: center center;
  display: inline-block;
}


/* Distilling® title — center the headline */
.distill-stage{ text-align: center; }
.distill-title{ display: block !important; text-align: center; margin-left: auto; margin-right: auto; }


/* ── Feedback batch: orbit, two pillars, capability, hero claim move ── */

/* Hero orbit: smaller, denser text so it actually wraps full circle */
.hero-orbit-text{
  font-size: 14px !important;
  letter-spacing: .28em !important;
  fill: var(--stone-light) !important;
}
.hero-orbit{
  width: clamp(380px, 50vmin, 640px) !important;
  height: clamp(380px, 50vmin, 640px) !important;
  animation-duration: 50s !important; /* visibly rotating */
}

/* Japanese claim line — push further down so it doesn't overlap the BCA stack */
.hero-stage .hero-claim-line{
  bottom: clamp(28px, 5vh, 60px) !important;
  font-size: clamp(20px, 2.2vw, 32px) !important;
}
.hero-stage .hero-claim-line > *{
  font-size: inherit !important;
}

/* ── Two Pillars — equal-sized pillars, narrower cycle column ─── */
.tp-cycle{
  grid-template-columns: 1fr 120px 1fr !important;
  align-items: stretch !important;
}
@media (max-width: 720px){
  .tp-cycle{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .tp-pillar{ min-height: 0; }
  .tp-link{ order: 1; }
  /* horizontal connector between stacked cards */
  .tp-link-line{ width: 1px !important; height: 36px !important; }
}
.tp-pillar{
  min-height: 320px;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  padding: clamp(40px, 4vw, 60px) clamp(28px, 3vw, 44px) !important;
}
.tp-pillar-en{
  font-size: clamp(36px, 3.8vw, 56px) !important;
}
.tp-cycle-svg{
  width: 100px !important; height: 100px !important;
  animation: tp-rotate 22s linear infinite;
}
@keyframes tp-rotate { to { transform: rotate(360deg); } }

/* ── Capability — compact 4 cells in one row ─────────────────── */
.cap-grid{
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
}
.cap-cell{
  padding: clamp(28px, 2.8vw, 40px) clamp(22px, 2.2vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.cap-cell-num{
  font-size: clamp(20px, 1.8vw, 26px) !important;
}
.cap-cell-en{
  font-size: clamp(24px, 2.2vw, 36px) !important;
  margin: 4px 0 0 !important;
}
.cap-cell-jp{
  font-size: 11px !important;
  letter-spacing: .26em !important;
}
.cap-cell-items{
  margin: 12px 0 0 !important;
  gap: 4px !important;
}
.cap-cell-items li{
  font-size: 12px !important;
  line-height: 1.7 !important;
}
.cap-cell-rule{ margin: 12px 0 6px !important; }
.cap-cell-body{
  font-size: 11px !important;
  line-height: 1.7 !important;
}
@media (max-width: 900px){
  .cap-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px){
  .cap-grid{ grid-template-columns: 1fr !important; }
}


/* Unified header wordmark — show the horizontal logo (consistent with other pages) */
header.nav a.logo .logo-img{ display: block !important; height: 28px !important; }
/* Footer logo image — match bumped size */
.footer .logo .logo-img{ display: block !important; width: auto !important; height: 36px !important; }
.footer .logo{ width: auto !important; height: auto !important; }
header.nav a.logo{ visibility: visible; transition: opacity .4s ease; }
/* While the home hero is in view, hide the nav wordmark so it doesn't duplicate
   the large hero mark; tail.js reveals it after scrolling past the hero. */
body.at-hero header.nav a.logo{ opacity: 0; pointer-events: none; }


/* ── Brand slides: support both 16:9 and 9:16 video frames ─────────── */
.bc-slide-r{ display: flex; align-items: center; justify-content: center; }
.bc-slide-frame{
  width: 100%;
  min-height: 0 !important;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-soft);
  border: 1px solid rgba(181,175,163,.16);
  overflow: hidden;
}
.bc-slide-frame[data-aspect="16x9"]{
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
.bc-slide-frame[data-aspect="9x16"]{
  aspect-ratio: 9 / 16;
  max-width: min(56%, 360px);
  margin: 0 auto;
}

/* On portrait slides, give the text column a touch more breathing room */
.bc-slide-9x16 .bc-slide-inner{
  grid-template-columns: 1.2fr 1fr !important;
}
.bc-slide-16x9 .bc-slide-inner{
  grid-template-columns: 1fr 1.2fr !important;
}

@media (max-width: 720px){
  .bc-slide-inner{ grid-template-columns: 1fr !important; }
  .bc-slide-frame[data-aspect="9x16"]{ max-width: min(72%, 320px); }
}


/* ============================================================================
   SWAP: SNS Management → LIGHT (Bone Soft), Works → DARK (Ink)
   Appended last so it wins the cascade.
============================================================================ */

/* ── SNS Management now on Bone Soft ──────────────────────────────────── */
#services-sns,
#services-sns .services,
#services-sns .sub-section.sns-management-section{
  background: var(--bone-soft) !important;
  color: var(--ink) !important;
}
.sns-management-section .reveal .sub-h.tw-heading{ color: var(--ink) !important; }
.sns-management-section .reveal .sub-jp{ color: var(--earth) !important; }
.sns-management-section .sns-intro{ color: var(--earth) !important; }

.stk-matrix{
  border-top-color: rgba(14,14,14,.20) !important;
  border-left-color: rgba(14,14,14,.20) !important;
}
.stk-axis-corner,
.stk-axis-col,
.stk-axis-row,
.stk-cell{
  border-right-color: rgba(14,14,14,.20) !important;
  border-bottom-color: rgba(14,14,14,.20) !important;
}
.stk-axis-corner-y,
.stk-axis-corner-x{ color: var(--stone) !important; }
.stk-axis-col-en{ color: var(--ink) !important; }
.stk-axis-col-jp{ color: var(--earth) !important; }
.stk-axis-row-en{ color: var(--ink) !important; }
.stk-axis-row-jp{ color: var(--earth) !important; }

.stk-cell-num{ color: var(--vermillion) !important; }
.stk-cell-tag{ color: var(--stone) !important; }
.stk-cell-tag::before{ background: rgba(14,14,14,.30) !important; }
.stk-cell-jp{ color: var(--ink) !important; }
.stk-cell-en{ color: var(--earth) !important; }
.stk-cell-divider{ background: rgba(217,81,44,.55) !important; }
.stk-cell-body{ color: var(--earth) !important; }
.stk-cell-bignum{ color: var(--ink) !important; opacity: .05 !important; }

.stk-outro p{ color: var(--ink) !important; }
.stk-outro em{ color: var(--vermillion) !important; }

/* ── Works now on Ink Black ───────────────────────────────────────────── */
.sec-works{
  background: var(--ink) !important;
  color: var(--bone) !important;
}
.sec-works .sec-26-title{ color: var(--bone) !important; }
.sec-works .sec-26-sub{ color: var(--stone-light) !important; }
.sec-works .sec-26-outro{ color: var(--stone-light) !important; }
.sec-works .sec-26-outro em{ color: var(--bone) !important; }
.sec-works-head{ border-bottom-color: rgba(181,175,163,.20) !important; }

.works-grid{
  background: rgba(181,175,163,.20) !important;
  border-color: rgba(181,175,163,.20) !important;
}
.work-tile{
  background: var(--ink-soft) !important;
  border-color: rgba(181,175,163,.20) !important;
}
.work-tile:hover{ background: #211f1c !important; }
.work-tile-platform{ color: var(--stone) !important; }
.work-tile-num{ color: var(--vermillion) !important; }
.work-tile-kpi-num{ color: var(--bone) !important; }
.work-tile-kpi-sub{ color: var(--stone) !important; }
.work-tile-headline{ color: var(--bone) !important; }
.work-tile-foot{ border-top-color: rgba(181,175,163,.18) !important; }
.work-tile-cat{ color: var(--stone-light) !important; }

@media (max-width:720px){
  .work-tile{ background: var(--ink-soft) !important; }
}


/* ── Brand Content — compact row layout (overview + forms merged) ────── */
.bc-rows{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(14,14,14,.16);
  border: 1px solid rgba(14,14,14,.16);
  margin-top: clamp(40px, 5vh, 64px);
}
.bc-row{
  background: var(--bone-soft);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2vw, 32px);
  padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.2vw, 36px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease var(--d), transform .8s cubic-bezier(.19,1,.22,1) var(--d);
}
.sec-bc-overview.is-vis .bc-row{ opacity: 1; transform: none; }

.bc-row-frame{
  flex-shrink: 0;
  position: relative;
  background: var(--ink);
  border: 1px solid rgba(14,14,14,.20);
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.bc-row-frame[data-aspect="16x9"]{ width: 152px; aspect-ratio: 16/9; }
.bc-row-frame[data-aspect="9x16"]{ width: 86px; aspect-ratio: 9/16; }
.bc-row-frame-tag{
  position: absolute; top: 8px; left: 8px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .20em;
  color: var(--vermillion);
}
.bc-row-frame-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .20em;
  color: var(--stone);
}

.bc-row-text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bc-row-code{
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: var(--ink);
  letter-spacing: -.01em;
}
.bc-row-code-dot{ color: var(--vermillion); }
.bc-row-en{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 13px; letter-spacing: .04em; color: var(--earth);
  margin-top: 2px;
}
.bc-row-jp{
  font-family: var(--sans); font-size: 11px; font-weight: 300;
  letter-spacing: .24em; color: var(--stone);
}
.bc-row-body{
  font-family: var(--sans); font-size: 12px; font-weight: 300;
  line-height: 1.8; letter-spacing: .04em; color: var(--earth);
  margin-top: 8px;
}

@media (max-width: 860px){
  .bc-rows{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .bc-row{ flex-direction: column; align-items: flex-start; }
  .bc-row-frame[data-aspect="16x9"],
  .bc-row-frame[data-aspect="9x16"]{ width: 120px; }
}


/* ============================================================================
   WORKS — goinc-style big slide carousel (one case at a time on PC)
============================================================================ */
.sec-works-head{ position: relative; }
.works-counter{
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--serif); font-style: italic;
  color: var(--bone);
}
.works-counter-cur{ font-size: clamp(40px, 4vw, 64px); color: var(--vermillion); line-height: 1; }
.works-counter-sep{ font-size: 24px; color: var(--stone); }
.works-counter-total{ font-size: 24px; color: var(--stone); }

.works-slider{ margin-top: clamp(32px, 4vh, 56px); overflow: hidden; }
.works-track{
  display: flex;
  transition: transform .8s cubic-bezier(.7,0,.2,1);
  transform: translateX(calc(var(--active) * -100%));
}

/* ── Horizontal strip — mobile: scroll row; desktop: tile grid ──────── */
.works-strip{
  margin-top: clamp(32px, 4vh, 56px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 18px;
}
.works-strip::-webkit-scrollbar{ height: 4px; }
.works-strip::-webkit-scrollbar-thumb{ background: rgba(181,175,163,.3); border-radius: 4px; }
.works-strip-track{
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
  width: max-content;
  padding: 4px clamp(4px, 1vw, 12px);
}
.work-card{
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 420px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.work-card .work-slide-media{ width: 100%; flex-shrink: 0; }
.work-card .work-slide-info{ margin-top: 18px; }

/* Desktop: lay all cards out as a tile grid (no horizontal scroll) */
@media (min-width: 861px){
  .works-strip{ overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .works-strip-track{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(28px, 2.6vw, 48px) clamp(24px, 2.2vw, 40px);
    width: auto;
    padding: 4px 0;
    align-items: start;
  }
  .work-card{ width: auto; }
  /* keep portrait media from towering over landscape neighbours */
  .work-card .work-slide-media{ max-height: 360px; margin: 0 auto; }
}

/* ── Works lightbox (fullscreen / modal playback) ───────────────────── */
.works-lightbox{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,7,6,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(20px, 5vw, 64px);
  animation: works-lb-in .3s ease;
}
@keyframes works-lb-in{ from{ opacity: 0; } to{ opacity: 1; } }
.works-lightbox-close{
  position: absolute; top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(242,238,232,.08); color: var(--bone);
  border: 1px solid rgba(242,238,232,.4); cursor: pointer;
  transition: background .25s ease, transform .25s ease; z-index: 2;
}
.works-lightbox-close:hover{ background: var(--vermillion); border-color: var(--vermillion); transform: rotate(90deg); }
.works-lightbox-inner{
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 100%; max-height: 100%;
}
.works-lightbox-media{
  display: block; background: #000;
  max-width: min(92vw, 1400px);
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.works-lightbox-inner[data-aspect="9x16"] .works-lightbox-media{ max-width: min(92vw, 460px); }
.works-lightbox-cap{ display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
@media (max-width: 600px){
  .works-lightbox{ padding: 0; }
  .works-lightbox-media{ max-width: 100vw; max-height: 78vh; }
}
.work-slide{
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas: "media head" "media info";
  align-content: center;
  gap: clamp(14px, 1.6vw, 22px) clamp(32px, 4vw, 72px);
  align-items: center;
  opacity: .25;
  transition: opacity .7s ease;
  padding: 8px 2px;
}
.work-slide.is-active{ opacity: 1; }
.work-slide-head{ grid-area: head; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.work-slide-media{ grid-area: media; }
.work-slide-info{ grid-area: info; align-self: start; }

/* Media frame — adapts to 16:9 or 9:16 */
.work-slide-media{
  position: relative;
  background: var(--ink-soft);
  border: 1px solid rgba(181,175,163,.20);
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
  width: 100%;
  overflow: hidden;
}
.work-slide-media[data-aspect="9x16"]{ max-height: 70vh; }
.wsm-frame-tag{ display: none !important; }
.work-slide-media[data-aspect="16x9"]{ aspect-ratio: 16/9; max-width: 100%; }
.work-slide-media[data-aspect="9x16"]{ aspect-ratio: 9/16; max-width: 62%; }
.wsm-frame-tag{
  position: absolute; top: 16px; left: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  color: var(--vermillion);
}
.wsm-platform{
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--stone-light);
}
.wsm-label{
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  color: var(--stone);
}

.work-slide-info{ display: flex; flex-direction: column; gap: 10px; }
.work-slide-num{
  font-family: var(--mono); font-size: 12px; letter-spacing: .26em;
  color: var(--vermillion);
}
.work-slide-num span{ color: var(--stone); }
/* image-slot fills the media frame */
.wsm-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* video / image media fill the frame */
.wsm-video, .wsm-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #000;
}
.work-slide-media{ position: relative; cursor: pointer; }
/* Play button overlay — clicks pass through to the wrapper toggle */
.wsm-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,14,14,.42); color: var(--bone);
  border: 1px solid rgba(242,238,232,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
  z-index: 3;
}
.wsm-play svg{ margin-left: 3px; }
/* While playing the button hides; reappears on hover of the media */
.work-slide-media.is-playing .wsm-play,
.bc-big-media.is-playing .wsm-play{ opacity: 0; }
.work-slide-media.is-playing:hover .wsm-play,
.bc-big-media.is-playing:hover .wsm-play{ opacity: 1; }
@media (max-width: 900px){
  .work-slide-media.is-playing .wsm-play,
  .bc-big-media.is-playing .wsm-play{ opacity: 0 !important; pointer-events: none; }
  .work-slide-media.is-playing:hover .wsm-play,
  .bc-big-media.is-playing:hover .wsm-play{ opacity: 0 !important; }
}
.work-slide-media:hover .wsm-play,
.bc-big-media:hover .wsm-play{ background: var(--vermillion); border-color: var(--vermillion); transform: translate(-50%, -50%) scale(1.06); }
.bc-big-media{ cursor: pointer; }
.work-slide-client{ display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.wsc-en{
  font-family: Georgia, 'Times New Roman', serif; font-size: clamp(20px, 1.9vw, 30px);
  color: var(--bone); letter-spacing: .01em; line-height: 1.2;
}
.wsc-jp{
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif; font-size: 14px;
  color: var(--stone-light); letter-spacing: .04em;
}
.work-slide-what{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone); margin-top: 12px;
}
.work-slide-kpi{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(64px, 8vw, 128px); line-height: .92;
  color: var(--bone); letter-spacing: -.01em;
  margin-top: 4px;
}
.work-slide-kpi-sub{
  font-family: var(--mono); font-size: 11px; letter-spacing: .20em;
  text-transform: uppercase; color: var(--stone);
}
.work-slide-headline{
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif; font-weight: 500;
  font-size: clamp(24px, 2.6vw, 40px); line-height: 1.5;
  color: var(--bone);
  margin-top: 14px; letter-spacing: .02em;
  text-wrap: pretty;
}
.work-slide-cat{
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--stone-light);
  margin-top: 8px;
  padding-top: 14px; border-top: 1px solid rgba(181,175,163,.18);
}

/* Navigation */
.works-nav{
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: clamp(40px, 5vh, 64px);
}
.works-arrow{
  width: 64px; height: 32px;
  background: transparent; border: 1px solid rgba(181,175,163,.30);
  color: var(--bone); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, background .25s, opacity .25s;
}
.works-arrow svg{ width: 32px; height: 13px; }
.works-arrow:hover:not(:disabled){ border-color: var(--vermillion); background: rgba(217,81,44,.08); }
.works-arrow:disabled{ opacity: .25; cursor: default; }
.works-dots{ display: flex; gap: 10px; }
.works-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(181,175,163,.30); border: 0; cursor: pointer; padding: 0;
  transition: background .25s, transform .25s;
}
.works-dot.is-on{ background: var(--vermillion); transform: scale(1.3); }

@media (max-width: 860px){
  .work-slide{
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "info";
    gap: 16px;
  }
  .work-slide-head{ align-self: stretch; gap: 7px; }
  .work-slide-headline{ font-size: clamp(19px, 5.4vw, 24px); line-height: 1.5; text-wrap: balance; }
  .work-slide-media[data-aspect="9x16"]{ max-width: 70%; margin: 0 auto; }
  .work-slide-info{ gap: 8px; }
  .work-slide-kpi{ font-size: clamp(56px, 16vw, 88px); }
  /* swipe hint */
  .works-slider{ touch-action: pan-y; }
}

/* ── SNS Management — 4 continuous slides (replaces 2×2 grid) ────────── */
.stk-slides{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(14,14,14,.20);
  border: 1px solid rgba(14,14,14,.20);
  margin-top: clamp(40px, 5vh, 64px);
}
.stk-slides .stk-cell{
  border: none !important;
  background: var(--bone-soft);
}
@media (max-width: 900px){
  .stk-slides{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .stk-slides{ grid-template-columns: 1fr; }
}


/* ============================================================================
   CAPABILITY — pillar structure: 01+02 parallel on top, 03+04 as base.
   Big EN/JP by default; hover/focus reveals the detail copy.
============================================================================ */
.cap-stack{
  display: flex;
  flex-direction: column;
  margin-top: clamp(40px, 5vh, 72px);
}
.cap-tier{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(14,14,14,.18);
  border: 1px solid rgba(14,14,14,.18);
}
.cap-tier-base{ border-top: none; }
.cap-tier-bridge{
  height: clamp(40px, 6vh, 72px);
  position: relative;
}
.cap-tier-bridge::before{
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(14,14,14,.22);
  transform: translateX(-50%);
}
.cap-tier-bridge::after{
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vermillion);
  transform: translate(-50%, 50%);
}

.cap-pillar{
  position: relative;
  background: var(--bone-soft);
  min-height: clamp(180px, 26vh, 280px);
  padding: clamp(32px, 3.4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  cursor: default;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease var(--d), transform .9s cubic-bezier(.19,1,.22,1) var(--d), background .3s ease;
}
.sec-capability.is-vis .cap-pillar{ opacity: 1; transform: none; }
.cap-pillar:hover,
.cap-pillar:focus-visible{ background: var(--ink); outline: none; }

.cap-pillar-num{
  font-family: var(--mono); font-size: 11px; letter-spacing: .30em;
  color: var(--stone);
  position: absolute; top: clamp(20px,2vw,28px); left: clamp(24px,2.4vw,36px);
  transition: color .3s ease;
}
.cap-pillar-signal .cap-pillar-num{ color: var(--vermillion); }
.cap-pillar:hover .cap-pillar-num,
.cap-pillar:focus-visible .cap-pillar-num{ color: var(--stone-light); }

/* Default: big EN + JP, centered */
.cap-pillar-main{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity .4s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.cap-pillar:hover .cap-pillar-main,
.cap-pillar:focus-visible .cap-pillar-main{
  opacity: 0; transform: translateY(-10px);
}
.cap-pillar-en{
  font-family: var(--serif) !important;
  font-weight: 400 !important; font-style: normal !important;
  font-size: clamp(40px, 5vw, 80px) !important;
  line-height: .95 !important; letter-spacing: -.01em !important;
  color: var(--ink) !important;
  margin: 0;
  transition: color .3s ease;
}
.cap-pillar-jp{
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .30em;
  color: var(--earth);
  transition: color .3s ease;
}

/* Detail: hidden by default, fades in on hover */
.cap-pillar-detail{
  position: absolute;
  left: 0; right: 0;
  padding: 0 clamp(32px, 3.4vw, 64px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease .05s, transform .55s cubic-bezier(.19,1,.22,1) .05s;
  pointer-events: none;
}
.cap-pillar-detail p{
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.9; letter-spacing: .04em;
  color: var(--stone-light);
  margin: 0;
}
.cap-pillar:hover .cap-pillar-detail,
.cap-pillar:focus-visible .cap-pillar-detail{
  opacity: 1; transform: translateY(0);
}
/* Small "詳細" hint that shows EN label persists on hover as a tiny eyebrow */
.cap-pillar:hover .cap-pillar-detail::before,
.cap-pillar:focus-visible .cap-pillar-detail::before{
  content: attr(data-label);
}

@media (max-width: 720px){
  .cap-tier{ grid-template-columns: 1fr; }
  .cap-pillar{ min-height: 150px; }
  .cap-pillar-en{ font-size: clamp(36px, 12vw, 56px) !important; }
}


/* ============================================================================
   Section title accent — vermillion vertical bar before each heading
============================================================================ */
.sec-26-head .sec-26-title{
  position: relative;
  padding-left: clamp(20px, 1.8vw, 32px);
}
.sec-26-head .sec-26-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 3px;
  background: var(--vermillion);
  border-radius: 1px;
}
/* SNS Management heading (rendered via app.jsx .sub-h) gets the same bar */
.sns-management-section .reveal .sub-h.tw-heading{
  position: relative;
  padding-left: clamp(20px, 1.8vw, 32px);
}
.sns-management-section .reveal .sub-h.tw-heading::before{
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 3px;
  background: var(--vermillion);
  border-radius: 1px;
}


/* ============================================================================
   Section headings — smaller / more compact (override earlier huge scale)
============================================================================ */
.sec-26-title{
  font-size: clamp(32px, 3.4vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
}
.sec-26-sub{
  font-size: clamp(14px, 1.1vw, 17px) !important;
}
.sec-26-head{
  margin-bottom: clamp(48px, 7vh, 88px) !important;
}
.sns-management-section .reveal .sub-h.tw-heading{
  font-size: clamp(32px, 3.4vw, 56px) !important;
  line-height: 1.05 !important;
}
.sns-management-section .reveal .sub-jp{
  font-size: clamp(14px, 1.1vw, 17px) !important;
}
.sec-26-head .sec-26-title::before,
.sns-management-section .reveal .sub-h.tw-heading::before{
  width: 2px;
}
@media (max-width: 720px){
  .sec-26-title{ font-size: clamp(28px, 8vw, 44px) !important; }
}


/* ============================================================================
   BRAND CONTENT — large independent slides, stacked vertically
   Each form is a full-width slide; media frame alternates side; 16:9 / 9:16.
============================================================================ */
.bc-bigslides{
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vh, 44px);
  margin-top: clamp(36px, 4.5vh, 64px);
  margin-bottom: 0;
}
.bc-big{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease var(--d), transform 1s cubic-bezier(.19,1,.22,1) var(--d);
}
.sec-bc-overview.is-vis .bc-big{ opacity: 1; transform: none; }
/* Small gap between Brand Content (beige) and SNS Management, filled with the
   SNS section's own dark tone so the seam reads as part of SNS */
.sec-bc-overview{ padding-bottom: clamp(72px, 9vh, 130px) !important; padding-top: clamp(80px, 10vh, 130px) !important; }
#services-sns{ padding-top: clamp(120px, 16vh, 200px) !important; background: var(--ink-soft) !important; }
#services-sns .services{ padding-top: 0 !important; }
#services-sns{ border-top: 0; }
.bc-big:nth-child(even){ grid-template-columns: .85fr 1.15fr !important; }
.bc-big:nth-child(even) .bc-big-media{ order: 2; }
.bc-big:nth-child(even) .bc-big-text{ order: 1; }

/* Giant faint index numeral */
.bc-big-index{
  display: none;
}

/* Media frame — aspect-aware, large */
.bc-big-media{
  position: relative;
  background: transparent;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  justify-self: center; width: 100%;
  margin-inline: auto;
}
  z-index: 1;
  overflow: hidden;
}
.bc-big-media[data-aspect="16x9"]{ aspect-ratio: 16/9; max-width: 88%; }
.bc-big-media[data-aspect="9x16"]{ aspect-ratio: 9/16; max-width: 42%; }
/* TVCM (contain, mixed-orientation) — match the compact footprint of the others */
.bc-big-media[data-aspect="16x9"][data-fit="contain"]{ max-width: 82%; }
/* TVCM dual-portrait — frame hugs the two side-by-side vertical clips (less side gap) */
.bc-big-media[data-aspect="16x9"]:has(.bc-big-stack){
  aspect-ratio: 10 / 9;
  max-width: 62.5% !important;
}
.bc-big-video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: transparent;
}
.bc-big-video.is-contain{ object-fit: contain; background: var(--bone-soft); }
/* Stacked playlist — two clips side by side, each keeping its native ratio */
.bc-big-stack{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: #000; padding: 10px;
}
.bc-big-stack-video{ width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.bc-big-media-tag{
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  color: var(--vermillion);
}
.bc-big-media-plat{
  position: absolute; top: 18px; right: 18px;
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--stone-light);
}
.bc-big-media-label{
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  color: var(--stone);
}

/* Text block */
.bc-big-text{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.bc-big-code{
  font-family: var(--serif) !important; font-weight: 400; font-style: normal;
  font-size: clamp(56px, 7vw, 120px); line-height: .9; letter-spacing: -.02em;
  color: var(--ink);
}
.bc-big-code-dot{ color: var(--vermillion); }
.bc-big-en{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px); letter-spacing: .04em; color: var(--earth);
  margin-top: 8px;
}
.bc-big-jp{
  font-family: var(--sans); font-weight: 300;
  font-size: 13px; letter-spacing: .26em; color: var(--stone);
}
.bc-big-rule{ width: 56px; height: 1px; background: rgba(217,81,44,.6); margin: 18px 0 4px; }
.bc-big-body{
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(14px, 1.2vw, 17px); line-height: 1.95; letter-spacing: .04em;
  color: var(--earth); max-width: 40ch;
}

@media (max-width: 900px){
  .bc-big{ grid-template-columns: 1fr !important; gap: 24px; }
  .bc-big:nth-child(even){ grid-template-columns: 1fr !important; }
  .bc-big .bc-big-text{ order: 1; }
  .bc-big .bc-big-media{ order: 2; }
  .bc-big:nth-child(even) .bc-big-media{ order: 2; }
  .bc-big:nth-child(even) .bc-big-text{ order: 1; }
  .bc-big-media[data-aspect="9x16"]{ max-width: 64%; }
  .bc-big-code{ font-size: clamp(48px, 16vw, 88px); }
}


/* ============================================================================
   OUR SCOPE — clean editorial list (replaces messy 2×2)
   Each row: number · big EN · JP · (detail expands on hover/focus) · arrow.
============================================================================ */
.cap-list{
  margin-top: clamp(40px, 5vh, 72px);
  border-top: 1px solid rgba(14,14,14,.16);
}
.cap-item{
  display: grid;
  grid-template-columns: 64px minmax(220px, 1.1fr) auto;
  grid-template-areas: "num en jp";
  align-items: center;
  column-gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(28px, 3vw, 44px) clamp(8px, 1vw, 16px);
  border-bottom: 1px solid rgba(14,14,14,.16);
  position: relative;
  cursor: default;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease var(--d), transform .8s cubic-bezier(.19,1,.22,1) var(--d), background .35s ease, padding .35s ease;
}
.sec-capability.is-vis .cap-item{ opacity: 1; transform: none; }
.cap-item:hover,
.cap-item:focus-visible{
  background: var(--ink);
  outline: none;
  padding-left: clamp(20px, 2vw, 32px);
}

.cap-item-num{
  grid-area: num;
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  color: var(--stone);
  transition: color .35s ease;
}
.cap-item-signal .cap-item-num{ color: var(--vermillion); }
.cap-item:hover .cap-item-num,
.cap-item:focus-visible .cap-item-num{ color: var(--vermillion); }

.cap-item-en{
  grid-area: en;
  font-family: var(--serif) !important; font-weight: 400; font-style: normal;
  font-size: clamp(34px, 4vw, 60px); line-height: 1; letter-spacing: -.01em;
  color: var(--ink);
  transition: color .35s ease;
}
.cap-item:hover .cap-item-en,
.cap-item:focus-visible .cap-item-en{ color: var(--bone); }

.cap-item-jp{
  grid-area: jp;
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .28em;
  color: var(--earth);
  text-align: right;
  transition: color .35s ease, opacity .35s ease;
}
.cap-item:hover .cap-item-jp,
.cap-item:focus-visible .cap-item-jp{ color: var(--stone-light); }

/* Detail body — hidden, expands into its own row on hover */
.cap-item-body{
  grid-area: body;
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(14px, 1.15vw, 17px); line-height: 1.85; letter-spacing: .04em;
  color: var(--stone-light);
  max-width: 70ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.19,1,.22,1), opacity .4s ease, margin .4s ease;
}
.cap-item:hover .cap-item-body,
.cap-item:focus-visible .cap-item-body{
  max-height: 120px;
  opacity: 1;
  margin-top: 18px;
}

/* Arrow */
.cap-item-arrow{
  position: absolute;
  right: clamp(8px, 1vw, 16px);
  top: clamp(28px, 3vw, 44px);
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--vermillion);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s ease, transform .35s ease;
}
.cap-item:hover .cap-item-arrow,
.cap-item:focus-visible .cap-item-arrow{ opacity: 1; transform: translateX(0); }

/* Make the body span the full width below the en/jp row */
.cap-item{ grid-template-areas: "num en jp" "body body body"; }

@media (max-width: 720px){
  .cap-item{
    grid-template-columns: 48px 1fr auto;
    column-gap: 16px;
  }
  .cap-item-en{ font-size: clamp(30px, 9vw, 48px); }
  .cap-item-jp{ font-size: 13px; letter-spacing: .2em; }
  .cap-item:hover .cap-item-body,
  .cap-item:focus-visible .cap-item-body{ max-height: 200px; }
}


/* ── SNS Management cells — tighten padding to match site density ───── */
.stk-slides .stk-cell{
  padding: clamp(28px, 2.6vw, 40px) clamp(22px, 2vw, 32px) !important;
  gap: 10px !important;
}
.stk-slides .stk-cell-jp{
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.4 !important;
}
.stk-slides .stk-cell-en{ font-size: clamp(14px, 1.2vw, 17px) !important; }
.stk-slides .stk-cell-divider{ margin: 14px 0 !important; }
.stk-slides .stk-cell-body{
  font-size: clamp(13px, 1.05vw, 15px) !important;
  line-height: 1.8 !important;
}
.stk-slides .stk-cell-bignum{ font-size: clamp(80px, 8vw, 130px) !important; }
.stk-matrix-wrap{ padding-top: clamp(40px, 5vh, 72px) !important; }


/* ── Distilling section JP copy → Mincho (Noto Serif JP) ───────────── */
.distill-jp,
.distill-essay,
.distill-essay p{
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif !important;
}
.distill-tag{
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif !important;
  font-style: normal !important;
}


/* ── Distilling — showreel placeholder between tag and essay ────────── */
.distill-reel{
  margin: clamp(40px, 6vh, 80px) auto clamp(48px, 7vh, 96px);
  max-width: 920px;
}
.distill-reel-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(181,175,163,.20);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.distill-reel-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
/* Placeholder shows when no video source is loaded */
.distill-reel-ph{
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
  color: var(--stone);
}
.drf-rec{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vermillion);
  animation: drf-blink 1.6s steps(1) infinite;
}
@keyframes drf-blink{ 50%{ opacity: .2; } }
.drf-corner{
  position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--vermillion); z-index: 2;
}
.drf-corner.tl{ top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.drf-corner.tr{ top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.drf-corner.bl{ bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.drf-corner.br{ bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }

@media (max-width: 720px){
  .distill-reel{ margin: 40px auto 48px; }
}


/* ── Distilling — reduce title + JP one size step ──────────────────── */
.distill-title{
  font-size: clamp(88px, 16vw, 240px) !important;
}
.distill-jp{
  font-size: clamp(18px, 1.6vw, 24px) !important;
}
@media (max-width: 720px){
  .distill-title{ font-size: clamp(60px, 20vw, 120px) !important; }
}


/* ── Section headings — force English to uppercase (JP unaffected) ──── */
.sec-26-title,
.sub-h,
.tp-pillar-jp,
.bc-overview-title{
  text-transform: uppercase !important;
}

/* ── English headings → Georgia ─────────────────────────────────────── */
.sec-26-title,
.distill-title,
.hero-bca,
.sub-h,
.bc-overview-title{
  font-family: Georgia, 'Times New Roman', serif !important;
}

/* ── Distilling title — give descender room so "g" isn't clipped ───── */
.distill-title{
  line-height: 1.18 !important;
  padding-bottom: .12em !important;
  overflow: visible !important;
}
.distill-stage{ overflow: visible !important; }


/* ── Distilling — "削ぎ落として、本質を残す。" one more size down ──── */
.distill-jp{
  font-size: clamp(15px, 1.25vw, 19px) !important;
  letter-spacing: .22em !important;
}


/* ── Brand Content slides — float up one-by-one on scroll ──────────── */
.bc-big{
  opacity: 0;
  transform: translateY(64px);
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
.bc-big.is-float{
  opacity: 1;
  transform: translateY(0);
}
/* fallback: if JS doesn't run, the section is-vis still reveals them */
.sec-bc-overview.is-vis .bc-big:not(.is-float){ opacity: 1; transform: none; }

/* ── Showreel placeholder — one size smaller ───────────────────────── */
.distill-reel{ max-width: 680px !important; }


/* ════════════════════════════════════════════════════════════
   GLOBAL OVERRIDES — applied 2026-06 per design direction
   ════════════════════════════════════════════════════════════ */

/* 1. All English section/hero headings → Georgia */
.sec-26-title,
.distill-title,
.hero-bca,
.hero-bca .hbca-line span,
.sub-h,
.bc-overview-title,
.bc-slide-code,
.bc-big-code,
.work-slide-kpi,
.page-hero h1{
  font-family: Georgia, 'Times New Roman', serif !important;
}

/* 2. Heading trailing dot "." → vermillion.
   The JS in tail.js wraps them; this colors the resulting span. */
.h-dot, .h-dot *{ color: var(--vermillion) !important; font-style: normal !important; }

/* SNS Management / Brand Content sub-h headings → Georgia (override the
   high-specificity Cormorant rule) + keep their dot vermillion. */
.sns-management-section .reveal .sub-h.tw-heading,
.brand-content-section .reveal .sub-h.tw-heading,
.services .sub-h.tw-heading{
  font-family: Georgia, 'Times New Roman', serif !important;
}
.sns-management-section .reveal .sub-h.tw-heading .h-dot,
.brand-content-section .reveal .sub-h.tw-heading .h-dot{
  color: var(--vermillion) !important;
}

/* 3. Japanese copy — strip all italic everywhere */
.sec-26-sub,
.distill-jp,
.distill-essay,
.distill-essay p,
.distill-eyebrow,
.distill-tag,
.sub-side-h,
.sns-management-section .reveal .sub-jp,
.stk-pdca-center-jp,
.stk-pdca-center-body,
.tp-lead,
.tp-coda-jp,
.bc-lead,
.bc-slide-jp,
.bc-big-jp,
.bc-row-jp,
.work-slide-jp,
.cap-lead,
.pos-card-en,
.pos-card-lead{
  font-style: normal !important;
}

/* 4. "." on the Distilling® title — keep existing vermillion */
.hbca-dot{ font-style: normal !important; }

/* ── THINK HIDDEN. sub-copy ───────────────────────────────────────────── */
.hero-think-wrap{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  grid-area: 1 / 1;
}
.hero-think{ margin: 0; }
.hero-think-sub{
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: .06em;
  color: var(--bone);
  opacity: .92;
  text-align: center;
  margin: clamp(14px, 2.2vh, 26px) 0 8px;
  max-width: none;
  line-height: 1.7;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  white-space: nowrap;
}
.hero-think-tag{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 1;
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* THINK HIDDEN — half-width gap between words */
.hbca-space{ display: inline-block; width: .5em; }

/* Video placeholders hidden until real videos are ready (2026-06) */
.distill-reel{ display: none !important; }

/* .br-pc: line breaks that apply on desktop only (Distilling essay) */
.br-pc{ display: none; }
@media (min-width: 861px){ .br-pc{ display: inline; } }

/* .br-sp: line breaks that apply on mobile only (Distilling essay) */
.br-sp{ display: none; }
@media (max-width: 860px){ .br-sp{ display: inline; } }

/* OUR SERVICE umbrella eyebrow — ties Brand Content (01) & SNS Management (02) */
.svc-eyebrow{
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
}
.svc-eyebrow-label{
  color: var(--vermillion);
  display: inline-flex; align-items: center; gap: 12px;
}
.svc-eyebrow-label::before{
  content: ""; width: 24px; height: 1px; background: var(--vermillion); display: inline-block;
}
.svc-eyebrow-idx{ color: var(--stone); letter-spacing: .2em; }
.svc-eyebrow-idx span{ opacity: .55; }
.sns-management-section .svc-eyebrow-idx{ color: var(--stone-light); }