/* ============================================================
   PARFUN CO., LTD. — subpage styles
   builds on css/style.css — same atelier-thread language
   ============================================================ */

/* ============ PAGE CURTAIN (entrance, echoes the preloader) ============ */
.page-curtain {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
  display: none;
}
.has-anim .page-curtain { display: block; }
.page-curtain__half {
  position: absolute; left: 0; width: 100%; height: 50.5%;
  background: var(--ivory);
}
.page-curtain__half--top { top: 0; }
.page-curtain__half--bottom { bottom: 0; }
.page-curtain__seam {
  position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  margin-top: -1px;
  background-image: repeating-linear-gradient(90deg, var(--crimson) 0 7px, transparent 7px 13px);
  transform: scaleX(0); transform-origin: left;
}

/* ============ GRAIN on subpage light sections ============ */
.phero::after, .p-grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ PAGE HERO ============ */
.phero {
  position: relative;
  padding: clamp(8.5rem, 19vh, 12.5rem) var(--pad) clamp(3.5rem, 8vh, 5.5rem);
  overflow: hidden;
}
.phero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}
@media (min-width: 860px) { .phero__inner { grid-template-columns: 1fr auto; } }
.phero__crumb {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.58rem; letter-spacing: 0.32em; font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.phero__crumb a { transition: color 0.3s; }
.phero__crumb a:hover { color: var(--crimson); }
.phero__crumb-seam {
  display: block; width: 2.2rem; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--crimson) 0 5px, transparent 5px 9px);
}
.phero__crumb strong { color: var(--crimson); font-weight: 600; }
.phero__kicker {
  display: flex; align-items: center; gap: 1.1rem;
  font-size: 0.58rem; letter-spacing: 0.42em; font-weight: 600;
  color: rgba(196, 13, 78, 0.75);
  margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
}
.phero__kicker-line {
  display: block; width: 3.4rem; height: 1px;
  background: var(--crimson); transform-origin: left;
}
.phero__title {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem);
  line-height: 1.58;
  letter-spacing: 0.055em;
}
.phero__title em { font-style: normal; color: var(--crimson); }
.phero__sub {
  margin-top: 1.8rem;
  color: var(--ink-soft);
  max-width: 58ch;
  font-size: 0.92rem;
}
.phero__vertical {
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  letter-spacing: 0.22em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--crimson);
  display: none;
  align-self: start;
}
@media (min-width: 860px) { .phero__vertical { display: block; } }
.has-anim .phero__kicker,
.has-anim .phero__sub,
.has-anim .phero__crumb,
.has-anim .phero__vertical { opacity: 0; }

/* ============ CRIMSON SECTION POLISH ============ */
.section--crimson .section__label { color: rgba(247, 244, 238, 0.7); }
.section--crimson .section__num { color: var(--ivory); }
.section--crimson .section__seam {
  background-image: repeating-linear-gradient(90deg,
    rgba(247,244,238,0.35) 0 7px, transparent 7px 13px);
}

/* generic titles & leads on subpage sections */
.p-title {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.6;
}
.p-lead {
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 1.6rem;
  font-size: 0.92rem;
}
.section--dark .p-lead { color: var(--silver); }
.section--crimson .p-lead { color: rgba(247, 244, 238, 0.82); }

/* ============ DATA TABLE (会社概要) ============ */
.dtable { max-width: 900px; }
.dtable__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2.5rem;
  padding: 1.2rem 0.4rem;
  border-bottom: 1px dashed var(--line);
}
@media (min-width: 640px) { .dtable__row { grid-template-columns: minmax(8rem, 220px) 1fr; gap: 1rem 2.5rem; } }
.dtable__row:first-child { border-top: 1px dashed var(--line); }
.dtable__th {
  padding-top: 0.3em;
}
.dtable__th strong {
  display: block;
  font-family: var(--font-jp); font-weight: 600;
  font-size: 0.92rem; color: var(--ink);
}
.dtable__th span {
  display: block;
  font-size: 0.56rem; letter-spacing: 0.28em; font-weight: 600;
  color: var(--crimson);
  margin-top: 0.25em;
}
.dtable__td { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.95; }
.dtable__td strong { color: var(--ink); font-weight: 600; }

/* ============ MESSAGE (代表挨拶) ============ */
.message__grid {
  display: grid; grid-template-columns: 1fr;
  gap: 3rem clamp(2.5rem, 5vw, 5.5rem);
  align-items: stretch;
}
@media (min-width: 980px) { .message__grid { grid-template-columns: 1.25fr 1fr; } }
.message__quote {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.85;
  color: var(--ivory);
  margin-bottom: 2rem;
}
.message__quote em { font-style: normal; color: #E14E79; }
.message__text { color: var(--silver); font-size: 0.9rem; margin-bottom: 1.4rem; max-width: 58ch; line-height: 2.05; }
.message__sign { margin-top: 2.6rem; display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; }
.message__role { font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 600; color: var(--silver); }
.message__name {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1.4rem; color: var(--ivory);
}
.message__name span {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.85rem; color: var(--silver); margin-left: 0.9rem;
}
.message__media { display: flex; flex-direction: column; }
.message__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (min-width: 980px) { .message__media img { aspect-ratio: auto; flex: 1; height: 100%; } }

/* ============ GROUP / ACCESS CARDS ============ */
.gcards {
  display: grid; grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 880px) { .gcards { grid-template-columns: repeat(3, 1fr); } }
.gcards--two { max-width: 980px; }
@media (min-width: 880px) { .gcards--two { grid-template-columns: repeat(2, 1fr); } }
.gcard {
  position: relative;
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: rgba(239, 233, 221, 0.35);
}
.gcard::before {
  content: '';
  position: absolute; top: 9px; left: 9px; right: 9px; bottom: 9px;
  border: 1px dashed rgba(196, 13, 78, 0.3);
  pointer-events: none;
}
.gcard__num {
  font-family: var(--font-display); font-style: italic;
  color: var(--crimson); font-size: 1.1rem;
  display: block; margin-bottom: 0.7rem;
}
.gcard h3 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1.1rem; line-height: 1.6;
  margin-bottom: 0.2rem;
}
.gcard__en {
  display: block;
  font-size: 0.56rem; letter-spacing: 0.28em; font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.gcard p { font-size: 0.82rem; color: var(--ink-soft); line-height: 2; }
.gcard__coord {
  display: block; margin-top: 1rem;
  font-size: 0.6rem; letter-spacing: 0.18em; color: rgba(53, 59, 73, 0.45);
  font-variant-numeric: tabular-nums;
}
.gcard__tel {
  display: block; margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.3rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============ LINE-ART ICON BLOCKS (benefits / strengths) ============ */
.icards {
  display: grid; grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 640px) { .icards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .icards { grid-template-columns: repeat(3, 1fr); } }
.icards--four { gap: 1.6rem; }
@media (min-width: 1020px) { .icards--four { grid-template-columns: repeat(4, 1fr); } }
.icard {
  border: 1px dashed rgba(196, 13, 78, 0.35);
  padding: clamp(1.8rem, 2.6vw, 2.4rem);
}
.section--dark .icard { border-color: rgba(247, 244, 238, 0.25); }
.icard h3 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1.05rem;
  margin: 1.3rem 0 0.15rem;
}
.icard__en {
  display: block;
  font-size: 0.54rem; letter-spacing: 0.28em; font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}
.section--dark .icard__en { color: var(--silver); }
.icard p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.95; }
.section--dark .icard p { color: rgba(247, 244, 238, 0.78); }

/* shared line-art svg style (light sections) */
.lineart { width: 58px; height: 58px; display: block; overflow: visible; }
.lineart path, .lineart line, .lineart rect, .lineart circle, .lineart ellipse, .lineart polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lineart .acc { stroke: var(--crimson); }
.section--dark .lineart path, .section--dark .lineart line, .section--dark .lineart rect,
.section--dark .lineart circle, .section--dark .lineart ellipse, .section--dark .lineart polyline {
  stroke: rgba(247, 244, 238, 0.85);
}
.section--dark .lineart .acc { stroke: #E14E79; }

/* ============ VOICES (社員の声) ============ */
.voices {
  display: grid; grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 920px) { .voices { grid-template-columns: repeat(3, 1fr); } }
.voice {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(239, 233, 221, 0.4);
  padding: clamp(2.2rem, 3vw, 2.8rem) clamp(1.8rem, 2.6vw, 2.4rem) clamp(1.8rem, 2.6vw, 2.2rem);
}
.voice::before {
  content: '\201C';
  position: absolute; top: -0.35em; left: 0.35rem;
  font-family: var(--font-display); font-style: italic;
  font-size: 5rem; line-height: 1;
  color: rgba(196, 13, 78, 0.28);
}
.voice__text {
  font-family: var(--font-jp);
  font-size: 0.98rem;
  line-height: 2.1;
  margin-bottom: 1.6rem;
}
.voice__who {
  display: flex; align-items: baseline; gap: 0.9rem;
  border-top: 1px dashed rgba(196, 13, 78, 0.4);
  padding-top: 1rem;
}
.voice__role {
  font-size: 0.58rem; letter-spacing: 0.26em; font-weight: 600;
  color: var(--crimson);
}
.voice__meta { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.12em; }

/* ============ JOB ACCORDION (募集職種) ============ */
.jobs { max-width: 980px; }
.job { border-bottom: 1px dashed rgba(247, 244, 238, 0.3); }
.job:first-child { border-top: 1px dashed rgba(247, 244, 238, 0.3); }
.job__head {
  display: flex; align-items: baseline; gap: clamp(1rem, 2.4vw, 2rem);
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: inherit; font-family: inherit;
  padding: 1.7rem 0.3rem;
  transition: padding-left 0.4s var(--ease-out);
}
.job__head:hover { padding-left: 1.2rem; }
.job__num {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: #FFC9D9;
  min-width: 2.6em;
}
.job__title {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.5;
}
.job__en {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.56rem; letter-spacing: 0.3em; font-weight: 600;
  color: rgba(247, 244, 238, 0.65);
  margin-top: 0.3rem;
}
.job__plus {
  margin-left: auto; flex-shrink: 0;
  position: relative; width: 15px; height: 15px;
  align-self: center;
}
.job__plus::before, .job__plus::after {
  content: '';
  position: absolute; background: var(--ivory);
  transition: transform 0.5s var(--ease-silk), background 0.3s;
}
.job__plus::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.job__plus::after { top: 0; left: 7px; width: 1.5px; height: 15px; }
.job.is-open .job__plus::after { transform: scaleY(0); }
.job.is-open .job__plus::before { background: #FFC9D9; }
.job__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.65s var(--ease-silk);
}
.job.is-open .job__body { grid-template-rows: 1fr; }
.job__body-inner { overflow: hidden; }
.job__meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.2rem 0.3rem 1.4rem;
}
.job__chip {
  font-size: 0.58rem; letter-spacing: 0.22em; font-weight: 600;
  border: 1px dashed rgba(247, 244, 238, 0.45);
  padding: 0.4rem 0.85rem;
  color: rgba(247, 244, 238, 0.85);
}
.job__desc {
  padding: 0 0.3rem 2.2rem;
  display: grid; gap: 1.1rem;
  max-width: 760px;
}
.job__desc dt {
  font-size: 0.56rem; letter-spacing: 0.3em; font-weight: 600;
  color: #FFC9D9;
  margin-bottom: 0.3rem;
}
.job__desc dd { font-size: 0.88rem; color: rgba(247, 244, 238, 0.85); line-height: 2; }

/* ============ STEPPER (選考の流れ) ============ */
.stepper {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem;
  counter-reset: stepper;
  margin-top: clamp(3rem, 6vh, 4.5rem);
}
@media (min-width: 880px) { .stepper { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.stepper__item { position: relative; display: flex; align-items: center; gap: 1.3rem; }
@media (min-width: 880px) {
  .stepper__item { flex-direction: column; text-align: center; gap: 0; padding: 0 0.8rem; }
  .stepper__item:not(:first-child)::before {
    content: '';
    position: absolute; top: 28px; right: 50%;
    width: 100%; height: 1px;
    background-image: repeating-linear-gradient(90deg, rgba(247, 244, 238, 0.35) 0 6px, transparent 6px 11px);
    z-index: 0;
  }
}
.stepper__dot {
  position: relative; z-index: 1;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px dashed rgba(247, 244, 238, 0.55);
  background: var(--night);
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: #E14E79;
}
@media (min-width: 880px) { .stepper__dot { margin-bottom: 1.3rem; } }
.stepper__label {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1rem; color: var(--ivory);
}
.stepper__en {
  display: block;
  font-size: 0.54rem; letter-spacing: 0.26em; font-weight: 600;
  color: var(--silver);
  margin-top: 0.35rem;
}

/* ============ HISTORY-THREAD ON DARK SECTIONS ============ */
.section--dark .history__thread-bg { stroke: rgba(247, 244, 238, 0.15); }
.section--dark .history__body h3 { color: var(--ivory); }
.section--dark .history__body p { color: var(--silver); }
.section--dark .history__year { color: #E14E79; }

/* day timeline uses smaller "year" slots for times */
.history__year--time { font-size: clamp(1.3rem, 2.6vw, 1.9rem); min-width: 4.4ch; }

/* ============ DUO CARDS (OEM / ODM) ============ */
.duo {
  display: grid; grid-template-columns: 1fr;
  gap: 1.8rem;
}
@media (min-width: 880px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__card {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(239, 233, 221, 0.4);
  padding: clamp(2.2rem, 4vw, 3.2rem);
}
.duo__card::before {
  content: '';
  position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px dashed rgba(196, 13, 78, 0.3);
  pointer-events: none;
}
.duo__tag {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--crimson);
  display: block; margin-bottom: 0.4rem;
}
.duo__tag span { font-size: 0.45em; color: var(--ink-soft); margin-left: 0.5em; letter-spacing: 0.06em; }
.duo__card h3 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1.2rem; margin-bottom: 1.1rem;
}
.duo__card p { font-size: 0.88rem; color: var(--ink-soft); line-height: 2.05; }
.duo__fit {
  margin-top: 1.6rem;
  border-top: 1px dashed rgba(196, 13, 78, 0.4);
  padding-top: 1.2rem;
}
.duo__fit h4 {
  font-size: 0.56rem; letter-spacing: 0.3em; font-weight: 600;
  color: var(--crimson);
  margin-bottom: 0.6rem;
}
.duo__fit li {
  font-size: 0.84rem; color: var(--ink-soft);
  padding-left: 1.2rem; position: relative;
  line-height: 2;
}
.duo__fit li::before {
  content: '';
  position: absolute; left: 0; top: 0.85em;
  width: 0.6rem; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--crimson) 0 3px, transparent 3px 6px);
}

/* ============ ITEM CHIPS (取扱アイテム) ============ */
.items-cloud { display: flex; flex-wrap: wrap; gap: 0.9rem; max-width: 880px; }
.item-chip {
  font-family: var(--font-jp);
  font-size: 0.92rem;
  padding: 0.75rem 1.5rem;
  border: 1px dashed rgba(247, 244, 238, 0.4);
  color: rgba(247, 244, 238, 0.9);
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}
.item-chip:hover { border-color: #E14E79; color: #FFC9D9; background: rgba(225, 78, 121, 0.08); }
.item-chip span {
  font-family: var(--font-sans);
  font-size: 0.54rem; letter-spacing: 0.24em; font-weight: 600;
  color: var(--silver);
  margin-left: 0.8em;
}

/* ============ FAQ ============ */
.faq { max-width: 880px; }
.faq__item { border-bottom: 1px dashed var(--line); }
.faq__item:first-child { border-top: 1px dashed var(--line); }
.faq__q {
  display: flex; align-items: baseline; gap: 1.3rem;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: inherit; font-family: inherit;
  padding: 1.5rem 0.3rem;
  transition: padding-left 0.4s var(--ease-out);
}
.faq__q:hover { padding-left: 1.1rem; }
.faq__mark {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.3rem; color: var(--crimson);
  min-width: 1.4em;
}
.faq__q h3 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1rem; line-height: 1.7;
}
.faq__plus {
  margin-left: auto; flex-shrink: 0; align-self: center;
  position: relative; width: 13px; height: 13px;
}
.faq__plus::before, .faq__plus::after {
  content: '';
  position: absolute; background: var(--crimson);
  transition: transform 0.5s var(--ease-silk);
}
.faq__plus::before { top: 6px; left: 0; width: 13px; height: 1.5px; }
.faq__plus::after { top: 0; left: 6px; width: 1.5px; height: 13px; }
.faq__item.is-open .faq__plus::after { transform: scaleY(0); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-silk);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p {
  padding: 0 0.3rem 1.7rem calc(1.4em + 1.6rem);
  font-size: 0.88rem; color: var(--ink-soft); line-height: 2;
  max-width: 68ch;
}

/* ============ NEWS ============ */
.news-filter { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: clamp(2.5rem, 5vh, 3.5rem); }
.chip {
  font-family: var(--font-sans);
  font-size: 0.58rem; letter-spacing: 0.26em; font-weight: 600;
  padding: 0.6rem 1.15rem;
  border: 1px dashed var(--line);
  background: none; cursor: pointer;
  color: var(--ink-soft);
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}
.chip:hover { border-color: rgba(196, 13, 78, 0.6); color: var(--crimson); }
.chip.is-active { border: 1px solid var(--crimson); background: var(--crimson); color: var(--ivory); }
.news-list { max-width: 1020px; }
.news-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "date cat" "title title";
  gap: 0.5rem 1.8rem;
  align-items: baseline;
  padding: 1.5rem 0.4rem;
  border-bottom: 1px dashed var(--line);
  transition: padding-left 0.4s var(--ease-out), background 0.35s;
}
@media (min-width: 720px) {
  .news-item {
    grid-template-columns: 7.2em 9.5em 1fr;
    grid-template-areas: "date cat title";
    gap: 1rem 2.2rem;
  }
}
.news-item:first-child { border-top: 1px dashed var(--line); }
.news-item:hover { padding-left: 1.4rem; background: rgba(196, 13, 78, 0.04); }
.news-item.is-hidden { display: none; }
.news-item__date {
  grid-area: date;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--crimson);
  font-variant-numeric: tabular-nums;
}
.news-item__cat {
  grid-area: cat;
  justify-self: start;
  font-size: 0.52rem; letter-spacing: 0.26em; font-weight: 600;
  color: var(--ink-soft);
  border: 1px dashed rgba(53, 59, 73, 0.35);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
.news-item__title {
  grid-area: title;
  font-family: var(--font-jp);
  font-size: 0.95rem; line-height: 1.9;
}
.news-empty {
  padding: 3rem 0.4rem;
  font-size: 0.85rem; color: var(--ink-soft);
  display: none;
}
.news-empty.is-on { display: block; }

/* ============ CONTACT FORM ============ */
.contactgrid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 980px) { .contactgrid { grid-template-columns: 1fr 1.45fr; } }
.contact-side__note { font-size: 0.88rem; color: var(--ink-soft); line-height: 2.05; max-width: 44ch; margin-bottom: 2.4rem; }
.contact-side .gcard { margin-bottom: 1.4rem; }

.cform { display: grid; gap: 2.1rem; }
.cform__row { display: grid; grid-template-columns: 1fr; gap: 2.1rem; }
@media (min-width: 640px) { .cform__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.55rem; }
.field label {
  font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 600;
  color: var(--ink-soft);
}
.field label em { font-style: normal; color: var(--crimson); margin-left: 0.5em; letter-spacing: 0.18em; }
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(53, 59, 73, 0.4);
  border-radius: 0;
  padding: 0.65rem 0.1rem;
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-bottom: 1px solid var(--crimson);
}
.field.is-error input, .field.is-error select, .field.is-error textarea {
  border-bottom: 1px solid var(--crimson);
}
.field__err {
  font-size: 0.62rem; letter-spacing: 0.1em; color: var(--crimson);
  display: none;
}
.field.is-error .field__err { display: block; }
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.9; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C40D4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.6rem;
  cursor: pointer;
}
.cform__consent {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-size: 0.78rem; color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.9;
}
.cform__consent input {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex-shrink: 0;
  border: 1px dashed rgba(196, 13, 78, 0.7);
  background: transparent;
  cursor: pointer;
  position: relative; top: 2px;
  transition: background 0.3s, border-color 0.3s;
}
.cform__consent input:checked {
  background: var(--crimson) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5L4 7.5 10 1' fill='none' stroke='%23F7F4EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  border: 1px solid var(--crimson);
}
.cform__actions { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.cform button.btn--stitch { background: none; cursor: pointer; font-family: var(--font-sans); }
.cform__done {
  display: none;
  border: 1px dashed rgba(196, 13, 78, 0.5);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.cform__done.is-on { display: block; }
.cform__done-mark { width: 74px; margin: 0 auto 1.6rem; display: block; overflow: visible; }
.cform__done-mark circle, .cform__done-mark path {
  fill: none; stroke: var(--crimson); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.cform__done h3 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 1.3rem; margin-bottom: 0.9rem;
}
.cform__done p { font-size: 0.85rem; color: var(--ink-soft); line-height: 2; }

/* ============ CTA BAND (between content and footer) ============ */
.ctaband {
  background: var(--crimson-deep);
  color: var(--ivory);
  padding: clamp(4rem, 9vh, 6.5rem) var(--pad);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ctaband h2 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.ctaband p { color: rgba(247, 244, 238, 0.8); font-size: 0.9rem; max-width: 52ch; margin: 0 auto 2.4rem; }
.ctaband .btn--light { border-color: rgba(247, 244, 238, 0.65); }

/* ============ CRAFT STEP DETAIL BULLETS (craft.html) ============ */
.craft__step-points { margin-top: 1.1rem; display: grid; gap: 0.45rem; }
.craft__step-points li {
  font-size: 0.78rem; color: rgba(247, 244, 238, 0.7);
  padding-left: 1.1rem; position: relative; line-height: 1.85;
}
.craft__step-points li::before {
  content: '';
  position: absolute; left: 0; top: 0.85em;
  width: 0.55rem; height: 1px;
  background-image: repeating-linear-gradient(90deg, #E14E79 0 3px, transparent 3px 6px);
}

/* ============ MATERIAL SPECS (materials.html) ============ */
.mat__specs {
  margin-top: 1.6rem;
  border-top: 1px dashed rgba(247, 244, 238, 0.3);
  padding-top: 1.2rem;
  display: grid; gap: 0.7rem;
}
.mat__specs > div {
  display: grid; grid-template-columns: 6.5em 1fr;
  gap: 1.2rem; align-items: baseline;
}
.mat__specs dt {
  font-size: 0.56rem; letter-spacing: 0.26em; font-weight: 600;
  color: #FFC9D9;
}
.mat__specs dd { font-size: 0.8rem; color: rgba(247, 244, 238, 0.85); line-height: 1.9; }

/* ============ LINKED CARDS (index guide) ============ */
a.gcard { display: block; transition: border-color 0.35s, background 0.35s; }
a.gcard:hover { border-color: rgba(196, 13, 78, 0.6); background: rgba(196, 13, 78, 0.05); }
.gcard__arrow {
  display: inline-block; margin-top: 1.3rem;
  font-size: 0.6rem; letter-spacing: 0.26em; font-weight: 600;
  color: var(--crimson);
}
.gcard__arrow span {
  display: inline-block; margin-left: 0.5em;
  transition: transform 0.4s var(--ease-out);
}
a.gcard:hover .gcard__arrow span { transform: translateX(6px); }

/* index teasers */
.teaser-cta { margin-top: clamp(2.2rem, 4vh, 3rem); }
.teaser-cta--center { text-align: center; }

/* ============ NAV — current page ============ */
.nav__link--current .nav__word { color: var(--crimson); }
.nav__link--current .nav__num { color: #E14E79; }

/* ============ NAV — 15-item two-column layout ============ */
.nav__inner { overflow-y: auto; }
.nav__links {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
}
@media (min-width: 760px) { .nav__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* link content as a 2-col grid: number | (word over jp) — long English
   words get the full column width and never clip against the jp label */
.nav__link {
  display: grid;
  grid-template-columns: 2.9em 1fr;
  column-gap: 0.9rem;
  align-items: baseline;
  padding: clamp(0.35rem, 1.1vh, 0.7rem) 0;
  position: relative;
}
.nav__num { grid-column: 1; grid-row: 1; min-width: 0; font-size: 0.56rem; }
.nav__word { grid-column: 2; grid-row: 1; font-size: clamp(1rem, 2.8vh, 1.7rem); }
.nav__jp {
  grid-column: 2; grid-row: 2;
  white-space: nowrap; font-size: 0.66rem; letter-spacing: 0.18em;
  margin-top: 0.15rem;
}
@media (max-width: 759px) { .nav__jp { display: none; } }

/* ---- grouped footer (organised index, not a flat wall of links) ---- */
.footer__links {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem 1.4rem;
  align-content: start;
}
.footer__group { display: flex; flex-direction: column; }
.footer__group-label {
  font-size: 0.54rem; letter-spacing: 0.28em; font-weight: 600;
  color: var(--crimson);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--line-light);
}
.footer__group a {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: rgba(247, 244, 238, 0.78);
  padding: 0.34rem 0;
  border: 0;
  transition: color 0.3s, padding-left 0.35s var(--ease-out);
}
.footer__group a:hover { color: #E14E79; padding-left: 0.5rem; }
.footer__util {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  margin-top: 0.4rem; padding-top: 1.2rem;
  border-top: 1px dashed var(--line-light);
}
.footer__util a {
  font-size: 0.6rem; letter-spacing: 0.2em; font-weight: 600;
  color: var(--silver);
  border: 0; padding: 0;
  transition: color 0.3s;
}
.footer__util a:hover { color: #E14E79; padding-left: 0; }
@media (max-width: 600px) { .footer__links { grid-template-columns: 1fr 1fr; } }
/* the running-stitch seam now lives on the link itself */
.nav__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--line-light) 0 7px, transparent 7px 13px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.9s var(--ease-silk);
}
.nav-open .nav__link::after { background-size: 100% 100%; transition-delay: 0.55s; }

/* (footer now uses the grouped layout defined above) */

/* ============ MAT ARTICLES ON LIGHT SECTIONS ============ */
.p-grain .mat { border-bottom-color: rgba(53, 59, 73, 0.22); }
.p-grain .mat__visual path, .p-grain .mat__visual line, .p-grain .mat__visual rect,
.p-grain .mat__visual circle, .p-grain .mat__visual ellipse {
  stroke: rgba(53, 59, 73, 0.8);
}
.p-grain .mat__visual .acc { stroke: var(--crimson); }
.p-grain .mat__num { color: var(--crimson); }
.p-grain .mat__en { color: var(--ink-soft); }
.p-grain .mat__body p { color: var(--ink-soft); }
.p-grain .mat__specs { border-top-color: rgba(196, 13, 78, 0.35); }
.p-grain .mat__specs dt { color: var(--crimson); }
.p-grain .mat__specs dd { color: var(--ink-soft); }

/* ============ BLOG / JOURNAL ============ */
.blogfeat {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--line);
  background: rgba(239, 233, 221, 0.4);
}
@media (min-width: 920px) { .blogfeat { grid-template-columns: 1.2fr 1fr; } }
.blogfeat__media { overflow: hidden; min-height: 260px; }
.blogfeat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogfeat__body { padding: clamp(2rem, 4vw, 3.2rem); align-self: center; }
.blogfeat__label { font-size: 0.56rem; letter-spacing: 0.3em; color: var(--crimson); font-weight: 600; }
.blogfeat h3 {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.7;
  margin: 0.8rem 0 1rem;
}
.blogfeat p { font-size: 0.88rem; color: var(--ink-soft); line-height: 2; }

.bloggrid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 720px) { .bloggrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .bloggrid { grid-template-columns: repeat(3, 1fr); } }
.blogcard {
  border: 1px solid var(--line);
  background: rgba(239, 233, 221, 0.4);
  display: flex; flex-direction: column;
  transition: border-color 0.35s, background 0.35s;
}
.blogcard:hover { border-color: rgba(196, 13, 78, 0.55); background: rgba(196, 13, 78, 0.04); }
.blogcard.is-hidden { display: none; }
.blogcard__media {
  aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px dashed var(--line);
  display: grid; place-items: center;
  background: rgba(239, 233, 221, 0.65);
}
.blogcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.blogcard:hover .blogcard__media img { transform: scale(1.05); }
.blogcard__media .lineart { width: 38%; height: auto; }
.blogcard__body { padding: 1.5rem 1.5rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.blogcard__meta { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 0.8rem; }
.blogcard__date { font-family: var(--font-display); font-style: italic; color: var(--crimson); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.blogcard__cat {
  font-size: 0.52rem; letter-spacing: 0.24em; font-weight: 600;
  color: var(--ink-soft);
  border: 1px dashed rgba(53, 59, 73, 0.35);
  padding: 0.25rem 0.6rem; white-space: nowrap;
}
.blogcard h3 { font-family: var(--font-jp); font-weight: 600; font-size: 1.02rem; line-height: 1.8; margin-bottom: 0.7rem; }
.blogcard__excerpt { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.95; flex: 1; }
.blogcard__read {
  margin-top: 1.1rem;
  font-size: 0.54rem; letter-spacing: 0.26em; font-weight: 600;
  color: var(--crimson);
  border-top: 1px dashed rgba(196, 13, 78, 0.35);
  padding-top: 0.9rem;
}

/* ============ NEWSLETTER (dark band) ============ */
.newsform { display: flex; gap: 1.2rem; max-width: 560px; margin-top: 2.2rem; flex-wrap: wrap; align-items: flex-end; }
.newsform input {
  flex: 1; min-width: 220px;
  background: transparent; border: 0;
  border-bottom: 1px dashed rgba(247, 244, 238, 0.5);
  color: var(--ivory);
  font-family: var(--font-sans); font-size: 0.95rem;
  padding: 0.7rem 0.1rem; outline: none;
  transition: border-color 0.3s;
}
.newsform input:focus { border-bottom: 1px solid #E14E79; }
.newsform input.is-error { border-bottom: 1px solid var(--crimson); }
.newsform button { background: none; cursor: pointer; font-family: var(--font-sans); }
.newsform__done { display: none; margin-top: 1.8rem; color: #FFC9D9; font-family: var(--font-jp); font-size: 0.95rem; }
.newsform__done.is-on { display: block; }

/* ============ SPORTSWEAR MOTION SVGS ============ */
@keyframes stretch-x { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.16); } }
.sw-stretch { animation: stretch-x 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sweat-fall { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
.sw-drop { animation: sweat-fall 2.6s ease-in infinite; }
@keyframes wind-pass { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateX(28px); opacity: 0; } }
.sw-wind { animation: wind-pass 2.8s ease-out infinite; }
@keyframes runner-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sw-runner { animation: runner-bob 0.9s ease-in-out infinite; }

/* big era / hero line art */
.lineart--lg { width: min(320px, 70vw); height: auto; margin-inline: auto; }


/* ============ MOBILE POLISH ============ */
@media (max-width: 760px) {
  .header { padding-inline: 1.2rem; }
  .header__wordmark { font-size: 1.02rem; }
  .header__right { gap: 1.1rem; }
  .nav__inner { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 600px) {
  /* long section labels wrap instead of pushing the seam off-screen */
  .section__label { white-space: normal; line-height: 1.9; }
  .footer__links { grid-template-columns: 1fr 1fr; }
  .phero { padding-top: 7.5rem; }
  .phero__sub { font-size: 0.85rem; }
  .phero__title { line-height: 1.7; }
  .mat__specs > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .mat { gap: 1.4rem; }
  .about__counters { gap: 1.6rem 1rem; }
  .counter__num { font-size: 2rem; }
  .stepper__dot { width: 46px; height: 46px; font-size: 1rem; }
  .gcard { padding: 1.6rem 1.4rem; }
  .icard { padding: 1.6rem 1.4rem; }
  .voice { padding: 2.1rem 1.4rem 1.5rem; }
  .blogfeat__media { min-height: 190px; }
  .job__head { gap: 0.9rem; }
  .job__desc { gap: 0.9rem; }
  .history__item { gap: 0.9rem 1.3rem; padding: 1.3rem 0; }
  .news-item { gap: 0.45rem 1.2rem; }
  .ctaband { padding-inline: 1.4rem; }
  .duo__card { padding: 1.8rem 1.5rem; }
  .dtable__row { padding: 1rem 0.2rem; }
  .faq__q { gap: 0.9rem; }
  .faq__a-inner p { padding-left: 0.2rem; }
  .cform__row { gap: 1.8rem; }
  .newsform button { width: 100%; }
}
@media (max-width: 420px) {
  .header__wordmark { display: none; }
  .header__right { gap: 0.9rem; }
}

/* ============================================================
   ENTERPRISE LAYER — signature motifs & premium micro-interactions
   ============================================================ */

/* ---- hero signature SVG (replaces the plain kanji watermark) ---- */
.phero__sig {
  display: none;
  position: relative;
  align-self: center;
  justify-self: end;
}
@media (min-width: 860px) { .phero__sig { display: block; } }
.has-anim .phero__sig { opacity: 0; }
.phero__art {
  width: min(380px, 33vw);
  height: auto;
  overflow: visible;
  display: block;
}
.phero__art path, .phero__art line, .phero__art circle,
.phero__art ellipse, .phero__art rect, .phero__art polyline {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phero__art .ink  { stroke: var(--ink-soft); }
.phero__art .soft { stroke: var(--silver); opacity: 0.65; }
.phero__art .fillc { fill: rgba(196, 13, 78, 0.08); stroke: var(--crimson); }
.phero__sig-kanji {
  position: absolute;
  top: -0.6rem; right: -1.2rem;
  writing-mode: vertical-rl;
  font-family: var(--font-jp); font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  letter-spacing: 0.24em;
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(196, 13, 78, 0.4);
  pointer-events: none;
}
/* dark/crimson hero variants keep contrast (used if a phero is ever placed on dark) */
.section--dark .phero__art .ink { stroke: var(--silver); }

/* ---- ambient idle motion for finished hero art ---- */
@keyframes hero-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.phero__art .float { animation: hero-breathe 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hero-spin { to { transform: rotate(360deg); } }
.phero__art .spin { animation: hero-spin 22s linear infinite; transform-box: fill-box; transform-origin: center; }
.phero__art .march { stroke-dasharray: 5 6; animation: mat-march 3.6s linear infinite; }

/* ---- sportswear: rotating athlete stage ---- */
.sw-stage { width: min(400px, 36vw); }
.sw-figure { opacity: 0; }
.sw-tag {
  font-family: var(--font-sans); font-size: 8.5px; letter-spacing: 0.24em;
  font-weight: 600; fill: var(--crimson); text-anchor: middle; stroke: none;
}
.sw-spin { animation: hero-spin 3.8s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes sw-roll-k { to { transform: rotate(-360deg); } }
.sw-roll { animation: sw-roll-k 4.2s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes sw-swing-k { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
.sw-swing { animation: sw-swing-k 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

/* ---- sustainability: sea swimming inside a t-shirt ---- */
.phero__art .sea-wave { animation: mat-drift 7s ease-in-out infinite; }
.phero__art .sea-wave.s2 { animation-duration: 9.5s; animation-direction: reverse; }
.phero__art .sea-bob { animation: mat-bob 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .phero__art .sea-wave, .phero__art .sea-bob { animation: none; } }

/* ---- motion lab: elastic sportswear band stretching & recovering ---- */
@keyframes sw-elastic-k { 0%, 100% { transform: scaleX(1); } 45%, 60% { transform: scaleX(1.42); } }
.sw-elastic { transform-box: fill-box; transform-origin: center; }
.sw-elastic.is-stretching { animation: sw-elastic-k 5s cubic-bezier(0.5,0,0.2,1) 1 both; }
@media (prefers-reduced-motion: reduce) { .sw-elastic.is-stretching { animation: none; } }

/* ---- philosophy: a continuously-sewn running stitch (the mark, endlessly stitched) ---- */
@keyframes stitch-flow-k { to { stroke-dashoffset: -22; } }
.phero__art .stitch-flow {
  fill: none; stroke: var(--crimson); stroke-width: 2;
  stroke-dasharray: 5 6; stroke-linecap: round;
  animation: stitch-flow-k 2.2s linear infinite;
}
.phero__art .stitch-flow.f2 { animation-duration: 2.8s; }
@media (prefers-reduced-motion: reduce) { .phero__art .stitch-flow { animation: none; } }

/* ---- cards on crimson sections: keep text legible (no red-on-red) ---- */
.section--crimson .gcard__num { color: #FFC9D9; }
.section--crimson .gcard h3 { color: var(--ivory); }
.section--crimson .gcard__en { color: rgba(247, 244, 238, 0.68); }
.section--crimson .gcard p { color: rgba(247, 244, 238, 0.82); }
.section--crimson .gcard__coord { color: rgba(247, 244, 238, 0.45); }
.section--crimson .gcard__tel { color: var(--ivory); }
.section--crimson .gcard::before { border-color: rgba(247, 244, 238, 0.22); }

/* ---- Japanese-primary navigation + footer ---- */
.nav__word { font-family: var(--font-jp); }
.nav__jp {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.56rem;
  color: var(--silver);
}
.footer__group a { display: flex; flex-direction: column; gap: 0.1rem; }
.flink__jp { font-family: var(--font-jp); font-size: 0.86rem; line-height: 1.5; color: rgba(247, 244, 238, 0.82); }
.flink__en { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver); }
.footer__group a:hover .flink__jp { color: #E14E79; }
.footer__group a:hover .flink__en { color: rgba(225, 78, 121, 0.8); }

/* ---- recruitment process: steps light up in sequence ---- */
.stepper__dot { transition: background 0.5s var(--ease-out), border-color 0.5s, color 0.5s, transform 0.5s var(--ease-out); }
.stepper__item.is-lit .stepper__dot {
  background: var(--crimson); border-color: var(--crimson); color: var(--ivory);
  transform: scale(1.1);
}
.stepper__item:not(:first-child)::before {
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.7s var(--ease-silk);
}
.stepper__item.is-lit:not(:first-child)::before { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .stepper__item.is-lit:not(:first-child)::before { background-size: 100% 100%; transition: none; }
}

/* ============ JOURNAL ARTICLE (reading layout) ============ */
.phero--article { padding-bottom: clamp(2rem, 4vh, 3rem); }
.article__meta { display: flex; flex-wrap: wrap; gap: 0.7rem 1.3rem; align-items: center; margin-bottom: 1.6rem; }
.has-anim .article__meta { opacity: 0; }
.article__cat {
  font-size: 0.54rem; letter-spacing: 0.26em; font-weight: 600;
  color: var(--crimson); border: 1px dashed rgba(196, 13, 78, 0.4);
  padding: 0.3rem 0.7rem; white-space: nowrap;
}
.article__date {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--crimson); font-variant-numeric: tabular-nums;
}
.article__read { font-size: 0.56rem; letter-spacing: 0.24em; font-weight: 600; color: var(--ink-soft); }
.article__col { max-width: 66ch; margin-inline: auto; }
.article__lede {
  font-family: var(--font-jp); font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.32rem); line-height: 2.05;
  color: var(--ink); margin-bottom: 2.6rem;
}
.article__h {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.7;
  margin: 2.8rem 0 1.3rem; position: relative; padding-left: 1.1rem;
}
.article__h::before {
  content: ''; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--crimson) 0 5px, transparent 5px 9px);
}
.article__body-text p { font-size: 0.95rem; line-height: 2.15; color: var(--ink-soft); margin-bottom: 1.45rem; }
.article__body-text p strong { color: var(--crimson); font-weight: 600; }
.article__pull {
  border-left: 2px solid var(--crimson);
  padding: 0.5rem 0 0.5rem 1.7rem; margin: 2.6rem 0;
  font-family: var(--font-jp); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.42rem); line-height: 1.95; color: var(--ink);
}
.article__pull span { color: var(--crimson); }
.article__sign {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px dashed var(--line);
  font-size: 0.66rem; letter-spacing: 0.2em; color: var(--ink-soft);
}
.article__back { margin-top: 1.6rem; }
/* clickable journal cards (read-link stretched over the whole card) */
.blogcard, .blogfeat { position: relative; }
a.blogcard__read { color: var(--crimson); }
a.blogcard__read::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* article title wraps freely (no line-clip reveal) */
.article__title .line { overflow: visible; }
.has-anim .article__title .line__inner { transform: none; }

/* ---- scroll-progress stitch (fixed, right edge) ---- */
.scrollthread {
  position: fixed;
  top: 18vh; right: clamp(10px, 1.6vw, 22px);
  width: 2px; height: 64vh;
  z-index: 4000;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg,
    rgba(53,59,73,0.22) 0 6px, transparent 6px 11px);
  opacity: 0;
  transition: opacity 0.6s;
}
.scrollthread.is-on { opacity: 1; }
.scrollthread__fill {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0%;
  background-image: repeating-linear-gradient(180deg,
    var(--crimson) 0 6px, transparent 6px 11px);
}
.scrollthread__needle {
  position: absolute; left: 50%; top: 0;
  width: 9px; height: 16px; transform: translate(-50%, -2px);
}
.scrollthread__needle::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 1.5px; height: 13px; background: var(--crimson);
  transform: translateX(-50%);
}
.scrollthread__needle::after {
  content: ''; position: absolute; left: 50%; top: 1px;
  width: 5px; height: 8px; border: 1px solid var(--crimson);
  border-radius: 50%; transform: translateX(-50%);
}
/* over dark/crimson sections the resting track lightens */
body.thread-light .scrollthread {
  background-image: repeating-linear-gradient(180deg,
    rgba(247,244,238,0.25) 0 6px, transparent 6px 11px);
}
@media (max-width: 980px), (hover: none) { .scrollthread { display: none; } }

/* ---- back-to-top stitched needle ---- */
.totop {
  position: fixed; bottom: clamp(1.2rem, 3vw, 2.2rem); right: clamp(1.2rem, 3vw, 2.2rem);
  width: 50px; height: 50px; z-index: 4000;
  display: grid; place-items: center;
  background: var(--ivory);
  border: 1px dashed rgba(196,13,78,0.6);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(0.9);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), background 0.4s, border-color 0.4s;
}
.totop.is-on { opacity: 1; transform: translateY(0) scale(1); }
.totop:hover { background: var(--crimson); border-color: var(--crimson); }
.totop svg { width: 20px; height: 20px; display: block; overflow: visible; }
.totop svg line { stroke: var(--crimson); stroke-width: 1.8; stroke-linecap: round; transition: stroke 0.4s; }
.totop:hover svg line { stroke: var(--ivory); }

/* ---- magnetic / premium button ---- */
.btn--stitch { will-change: transform; }
.btn--stitch::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px dashed transparent;
  transition: inset 0.4s var(--ease-out), border-color 0.4s;
  pointer-events: none;
}
.btn--stitch:hover::after { inset: -6px; border-color: rgba(196,13,78,0.4); }
.btn--light:hover::after { border-color: rgba(247,244,238,0.45); }

/* ---- card hover lift (premium) ---- */
.gcard, .icard, .blogcard, .voice, .duo__card, .blogfeat {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s, background 0.4s;
  will-change: transform;
}
.gcard:hover, .icard:hover, .voice:hover, .duo__card:hover, .blogfeat:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px -28px rgba(53,59,73,0.45);
}
.section--dark .icard:hover, .section--crimson .gcard:hover {
  box-shadow: 0 18px 44px -26px rgba(0,0,0,0.55);
}
a.gcard:hover { transform: translateY(-5px); }

/* lift the line-art inside a card slightly on hover for depth */
.icard:hover .lineart, .gcard:hover .lineart { transform: translateY(-2px) scale(1.04); transition: transform 0.5s var(--ease-out); }

/* ---- animated section number underline ---- */
.section__num { position: relative; display: inline-block; }
.section__num::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 1px;
  background: var(--crimson);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--ease-silk);
}
.section__head.is-in .section__num::after { transform: scaleX(1); }

/* ---- KPI / stat band (enterprise trust strip) ---- */
.statband {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: clamp(2rem, 4vh, 3rem) 0;
}
@media (min-width: 760px) { .statband { grid-template-columns: repeat(4, 1fr); } }
.section--dark .statband, .section--crimson .statband { border-color: var(--line-light); }
.statband .counter__num { font-size: clamp(2rem, 3.6vw, 3rem); }
.section--dark .statband .counter__num, .section--crimson .statband .counter__num { color: var(--ivory); }
.section--crimson .statband .counter__label, .section--dark .statband .counter__label { color: var(--silver); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .page-curtain { display: none !important; }
  .phero__kicker, .phero__sub, .phero__crumb, .phero__vertical, .phero__sig { opacity: 1; }
  .scrollthread, .totop { display: none !important; }
  .phero__art .float, .phero__art .spin, .phero__art .march { animation: none; }
}