/* =================================================================
   Services index — junni-style numbered list.
   Built ON TOP of the shared kinetic system (webdesign.css / body.wd-dark):
   inherits the dark tokens, header/footer theming, and scroll reveals.
   ================================================================= */

/* ---- hero: big spaced wordmark ---- */
.srv-hero {
  position: relative; overflow: hidden;
  padding: clamp(150px, 24vh, 280px) 24px clamp(170px, 22vh, 270px);  /* extra bottom = elephant's walking lane (with breathing room above) */
  text-align: center;
  background: radial-gradient(120% 90% at 50% -10%, #11131f 0%, var(--bg) 55%);
}

/* fun mascot: strolls back and forth across the bottom of the hero, waddling */
.srv-elephant {
  position: absolute; left: 0; bottom: clamp(16px, 4vh, 44px); z-index: 1;
  width: clamp(92px, 10vw, 140px); pointer-events: none;
  animation: srv-ele-walk 26s ease-in-out infinite;
}
.srv-elephant-img {
  display: block; width: 100%; height: auto; transform-origin: bottom center;
  animation: srv-ele-bob .5s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45));
}
@keyframes srv-ele-walk {
  0%, 5%   { transform: translateX(2vw) scaleX(1); }            /* face & walk right */
  45%      { transform: translateX(calc(94vw - 140px)) scaleX(1); }
  50%, 55% { transform: translateX(calc(94vw - 140px)) scaleX(-1); }  /* pause, turn */
  95%      { transform: translateX(2vw) scaleX(-1); }           /* walk back left */
  100%     { transform: translateX(2vw) scaleX(1); }            /* turn to start */
}
@keyframes srv-ele-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-7px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .srv-elephant { animation: none; left: 50%; transform: translateX(-50%); }
  .srv-elephant-img { animation: none; }
}
.srv-hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.srv-hero-word {
  margin: 0; color: #fff; font-weight: 800; line-height: 1;
  font-size: clamp(2.8rem, 13vw, 9.5rem); letter-spacing: .12em; text-indent: .12em;
}
/* Full-width CJK glyphs read much larger than Latin at the same size. */
html[lang^="ja"] .srv-hero-word { font-size: clamp(3.4rem, 12vw, 8.5rem); letter-spacing: .04em; text-indent: 0; }
/* pink tagline — the punch of colour on the dark hero */
.srv-hero-lead {
  margin: clamp(26px, 4vw, 42px) auto 0; max-width: 35ch;   /* wide enough to sit on ~2 lines */
  color: var(--brand); font-weight: 700; letter-spacing: .01em;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.5;
}

/* ---- statement: same as the homepage about-statement (word-by-word light-up) ---- */
.srv-statement-wrap { text-align: center; }
.srv-statement-text {
  max-width: min(640px, 92%); margin: 0 auto; text-align: center;
  font-weight: 300; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.4;
  color: var(--fg);
}
.srv-statement-text .word { display: inline-block; }
.srv-statement-text .word-inner {
  display: inline-block;
  opacity: .14;                         /* dim until the scroll read-head reaches it */
  transition: opacity .15s linear;
}

/* ---- the numbered list ---- */
.srv-list-head { text-align: center; margin-bottom: clamp(34px, 5vw, 64px); }
.srv-list-title { margin: 14px 0 0; color: var(--fg); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem, 4vw, 3rem); }
.srv-rows { list-style: none; margin: 0; padding: 0; perspective: 1400px; display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 24px); }
.srv-row {
  will-change: transform, opacity;
  position: relative; display: grid;
  grid-template-columns: clamp(70px, 9vw, 150px) 1fr auto;
  gap: clamp(20px, 4vw, 60px); align-items: center;
  padding: clamp(36px, 5.5vw, 68px) 8px;
  border-top: 1px solid var(--line);
  transition: background-color .45s var(--ease);
}
.srv-rows .srv-row:last-child { border-bottom: none; }
.srv-row:hover { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 5%, transparent) 50%, transparent); }

/* featured cards — every service is a glowing brand card so the whole list feels alive.
   Uses background/box-shadow only (transform & opacity belong to the roll effect). */
.srv-rows .srv-row {
  border-top-color: transparent; border-radius: 16px;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), .03) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .22), 0 24px 60px -34px rgba(var(--brand-rgb), .55);
  animation: srv-feat-glow 3.6s ease-in-out infinite;
}
/* stagger the pulse so they don't all breathe in unison */
.srv-rows .srv-row:nth-child(2) { animation-delay: .5s; }
.srv-rows .srv-row:nth-child(3) { animation-delay: 1s; }
.srv-rows .srv-row:nth-child(4) { animation-delay: 1.5s; }
.srv-rows .srv-row:nth-child(5) { animation-delay: 2s; }
.srv-rows .srv-row:nth-child(6) { animation-delay: 2.5s; }
.srv-row .srv-num { color: var(--brand); }
.srv-row .srv-ic { background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .45); }
@keyframes srv-feat-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .18), 0 22px 55px -34px rgba(var(--brand-rgb), .4); }
  50%      { box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .38), 0 26px 70px -30px rgba(var(--brand-rgb), .8); }
}
@media (prefers-reduced-motion: reduce) { .srv-rows .srv-row { animation: none; } }

/* big outline number — colour driven by tokens so it works on dark OR white */
.srv-num {
  font-size: clamp(2.2rem, 5.5vw, 4.4rem); font-weight: 800; line-height: .9;
  letter-spacing: -.02em;
  color: var(--muted);
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
  transition: color .4s;
}
.srv-row:hover .srv-num { color: var(--brand); }

/* body */
.srv-title {
  margin: 0; color: var(--fg); font-weight: 700;
  font-size: clamp(1.4rem, 2.7vw, 2.4rem); letter-spacing: .05em; text-transform: uppercase;
  transition: transform .4s var(--ease);
}
.srv-row:hover .srv-title { transform: translateX(6px); }
.srv-desc { margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 60ch; }
.srv-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.srv-tags li {
  font-size: 12px; letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.srv-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  color: var(--brand); font-weight: 600; font-size: .98rem; text-decoration: none;
}
.srv-link i { transition: transform .3s var(--ease); }
.srv-row:hover .srv-link i { transform: translateX(7px); }
/* stretch the link over the whole row so the entire card is clickable */
.srv-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.srv-row { cursor: pointer; }

/* visual icon block */
.srv-visual { display: flex; justify-content: center; }
.srv-ic {
  display: flex; align-items: center; justify-content: center;
  width: clamp(78px, 8vw, 104px); aspect-ratio: 1; border-radius: 24px;
  background: rgba(var(--brand-rgb), .08); border: 1px solid rgba(var(--brand-rgb), .22);
  transition: transform .45s var(--ease), background-color .4s, border-color .4s;
}
.srv-row:hover .srv-ic { transform: translateY(-6px) rotate(-3deg); background: rgba(var(--brand-rgb), .14); border-color: rgba(var(--brand-rgb), .4); }
.srv-ic i {
  display: block; width: 44%; height: 44%; background: var(--brand);
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}

/* ---- responsive ---- */
@media (max-width: 820px) {
  .srv-row { grid-template-columns: 56px 1fr; gap: 16px 20px; align-items: start; }
  .srv-num { font-size: 2rem; }
  .srv-visual { display: none; }     /* keep it clean on mobile; the icon is decorative */
  .srv-title { transform: none; }
}

/* =================================================================
   FAQ — accordion (native <details>, adapts to dark/white via tokens)
   ================================================================= */
.srv-faq-wrap { max-width: 920px; }
.srv-faq-head { text-align: center; margin-bottom: clamp(34px, 5vw, 62px); }
.srv-faq-title { margin: 14px 0 0; color: var(--fg); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem, 4vw, 3rem); }

.srv-faq-item { border-top: 1px solid var(--line); }
.srv-faq-item:last-child { border-bottom: 1px solid var(--line); }
.srv-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 3vw, 30px) 4px;
  color: var(--fg); font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  transition: color .3s;
}
.srv-faq-item summary::-webkit-details-marker { display: none; }
.srv-faq-item summary:hover { color: var(--brand); }

/* +/- toggle */
.srv-faq-mark { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.srv-faq-mark::before, .srv-faq-mark::after {
  content: ""; position: absolute; background: var(--brand); transition: transform .3s var(--ease);
}
.srv-faq-mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
.srv-faq-mark::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.srv-faq-item[open] .srv-faq-mark::after { transform: scaleY(0); }

.srv-faq-a {
  padding: 0 4px clamp(22px, 3vw, 32px); max-width: 72ch;
  color: var(--muted); font-size: 1.05rem; line-height: 1.75;
}
.srv-faq-a p { margin: 0; }