/* ==========================================================================
   Service — /service/ and the four detail pages
   The editorial rhythm alternates photo side and colour plane (spec §26–27).
   Plane colours are the TOP SERVICE band's: navy, blue, red, deep navy.
   ========================================================================== */

.service-index,
.service-detail {
  --tone-navy: #0a1824;
  --tone-blue: #00285a;
  --tone-red: var(--color-brand-dark);
  --tone-dark: #02111f;
}

.accent-blue { --accent: #00285a; --brush-pos: 97% 90%; }
.accent-red { --accent: var(--color-brand-dark); --brush-pos: 90% 10%; }

/* ---------- /service/ : table of contents ---------- */

.service-toc {
  border-block: 1px solid var(--color-line);
}

.service-toc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-toc__item a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 14px;
  padding: 22px 12px 22px 18px;
}

.service-toc__item a::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 3px;
  background: var(--tone);
}

.service-toc__item--navy { --tone: var(--tone-navy); }
.service-toc__item--blue { --tone: var(--tone-blue); }
.service-toc__item--red { --tone: var(--tone-red); }
.service-toc__item--dark { --tone: var(--tone-dark); }

.service-toc__num {
  grid-row: span 2;
  font-size: 15px;
  line-height: 1.8;
}

.service-toc__ja {
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--color-hero-ink);
}

.service-toc__en {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--color-muted);
}

@media (min-width: 1024px) {
  .service-toc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-toc__item + .service-toc__item a { border-left: 1px solid var(--color-line); }
  .service-toc__item a { padding: 30px 20px 30px 34px; }
  .service-toc__item a::before { left: 16px; }
}

/* ---------- /service/ : one editorial section per group ---------- */

.service-group {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
}

.service-group--navy { --tone: var(--tone-navy); --brush-pos: 4% 6%; }
.service-group--blue { --tone: var(--tone-blue); --brush-pos: 97% 90%; background: var(--color-ground); }
.service-group--red { --tone: var(--tone-red); --brush-pos: 90% 10%; }
.service-group--dark {
  --tone: var(--tone-blue);
  --brush-pos: 97% 90%;
  --focus: var(--color-white);
  background: var(--tone-dark);
  color: var(--color-white);
}

.service-group__plane {
  display: none;
  position: absolute;
  top: 14%;
  right: -12%;
  bottom: 30%;
  width: 62%;
  background: url("../../art/brush-strokes-1200.webp") var(--brush-pos, 90% 10%) / 240% auto no-repeat, var(--tone);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}

.service-group.is-reverse .service-group__plane {
  right: auto;
  left: -12%;
}

.service-group__inner {
  position: relative;
  display: grid;
  gap: 30px;
}

.service-group__num {
  font-family: var(--font-serif);
  font-size: clamp(64px, 8.4vw, 168px);
  font-weight: 500;
  line-height: .9;
  color: var(--tone);
}

.service-group--dark .service-group__num { color: rgba(255, 255, 255, .28); }
.service-group--dark .eyebrow { color: rgba(255, 255, 255, .85); }

.service-group__en {
  margin-top: 18px;
}

.service-group__title {
  margin-top: 10px;
  font-size: clamp(42px, 5vw, 96px);
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--color-hero-ink);
}

.service-group--dark .service-group__title { color: var(--color-white); }

.service-group__lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.45vw, 27px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .08em;
}

.service-group__media {
  aspect-ratio: 16 / 11;
}

.service-group__text {
  max-width: 36em;
  line-height: 2.05;
  letter-spacing: .06em;
}

.service-group__items {
  margin-top: 30px;
  border-top: 1px solid var(--color-line);
}

.service-group__items a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-line);
  font-weight: 600;
  letter-spacing: .08em;
}

.service-group--dark .service-group__items,
.service-group--dark .service-group__items a { border-color: rgba(255, 255, 255, .22); }

@media (min-width: 1024px) {
  .service-group__plane { display: block; top: 10%; bottom: 10%; width: 44%; right: -4%; }
  .service-group.is-reverse .service-group__plane { left: -4%; }

  .service-group__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "head media" "body media";
    column-gap: 6vw;
    row-gap: 40px;
    align-items: start;
  }

  .service-group.is-reverse .service-group__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "media head" "media body";
  }

  .service-group__head { grid-area: head; }
  .service-group__media { grid-area: media; margin-top: 5vw; }
  .service-group__body { grid-area: body; }
}

/* ---------- /service/ : detail pages list ---------- */

.service-pages__list {
  margin-top: 48px;
  border-top: 1px solid var(--color-ink);
}

.service-pages__link {
  position: relative;
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 6px 20px;
  padding: 26px 44px 26px 0;
  border-bottom: 1px solid var(--color-line);
}

.service-pages__num {
  grid-row: span 2;
  font-size: 16px;
  color: var(--color-brand-text);
}

.service-pages__name {
  font-size: clamp(19px, 1.6vw, 30px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--color-hero-ink);
}

.service-pages__excerpt {
  font-size: 14px;
  line-height: 1.9;
  color: #3a4754;
}

.service-pages__link > .arrow {
  position: absolute;
  top: 50%;
  right: 8px;
}

@media (min-width: 1024px) {
  .service-pages__link {
    grid-template-columns: 4em minmax(0, 4fr) minmax(0, 6fr);
    align-items: baseline;
    column-gap: 40px;
  }

  .service-pages__num { grid-row: auto; }
}

/* ---------- detail: overview ---------- */

.sd-overview__inner {
  display: grid;
  gap: 32px;
}

.sd-overview__theme {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .1em;
}

.sd-overview__theme-label {
  padding: 2px 12px;
  background: var(--accent);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
}

.sd-overview__media {
  aspect-ratio: 16 / 10;
}

@media (min-width: 1024px) {
  .sd-overview__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 7vw;
  }

  .sd-overview__body { grid-column: 2; grid-row: 1; padding-top: 3.2em; }

  .sd-overview__media {
    grid-column: 1 / -1;
    width: 72%;
    justify-self: end;
    margin-top: 2vw;
  }
}

/* ---------- detail: background (recruit) ---------- */

.sd-context {
  --focus: var(--color-white);
  padding-block: clamp(56px, 6vw, 110px);
  background: var(--color-navy-deep);
  color: var(--color-white);
}

.sd-context__text {
  margin-top: 18px;
  font-size: clamp(17px, 1.5vw, 27px);
  font-weight: 600;
  line-height: 1.95;
  letter-spacing: .06em;
}

/* ---------- detail: problems ---------- */

.sd-problems__list {
  margin-top: 44px;
  border-top: 1px solid var(--color-ink);
}

.sd-problems__item {
  display: grid;
  gap: 8px 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--color-line);
}

.sd-problems__num {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.6vw, 48px);
  line-height: 1;
  color: var(--accent);
}

.sd-problems__title {
  font-size: clamp(18px, 1.5vw, 27px);
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--color-hero-ink);
}

.sd-problems__text {
  line-height: 2;
  color: #3a4754;
}

@media (min-width: 1024px) {
  .sd-problems__item {
    grid-template-columns: 5em minmax(0, 5fr) minmax(0, 6fr);
    align-items: baseline;
    padding: 40px 0;
  }
}

/* ---------- detail: what we do (photo and plane alternate sides) ---------- */

.sd-what__list {
  display: grid;
  gap: clamp(56px, 7vw, 130px);
  margin-top: 56px;
}

.sd-what__item {
  display: grid;
  gap: 26px;
  align-items: center;
}

.sd-what__visual {
  aspect-ratio: 4 / 3;
}

.sd-what__plane {
  display: grid;
  place-content: center;
  justify-items: center;
  background: url("../../art/brush-strokes-1200.webp") var(--brush-pos, 90% 10%) / 260% auto no-repeat, var(--accent);
  color: var(--color-white);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.sd-what__plane-num {
  font-family: var(--font-serif);
  font-size: clamp(88px, 10vw, 190px);
  font-weight: 500;
  line-height: 1;
}

.sd-what__plane-word {
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .34em;
}

.sd-what__num {
  font-size: 20px;
  color: var(--accent);
}

.sd-what__title {
  margin-top: 8px;
  font-size: clamp(22px, 2vw, 38px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--color-hero-ink);
}

.sd-what__body {
  margin-top: 18px;
  line-height: 2.05;
  letter-spacing: .05em;
}

.sd-what__text .text-link {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .sd-what__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 6vw;
  }

  .sd-what__item.is-reverse .sd-what__visual { order: 2; }
}

/* ---------- detail: process ---------- */

.sd-process__steps {
  display: grid;
  margin-top: 48px;
}

.sd-process__step {
  position: relative;
  padding: 30px 24px 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.sd-process__step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--color-brand);
}

.sd-process__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .72);
}

.sd-process__title {
  margin-top: 12px;
  font-size: clamp(18px, 1.45vw, 25px);
  line-height: 1.55;
}

.sd-process__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .86);
}

@media (min-width: 1024px) {
  .sd-process__steps {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: 28px;
  }
}

/* ---------- detail: strength ---------- */

.sd-strength__list {
  display: grid;
  gap: 24px;
  margin-top: 44px;
}

.sd-strength__item {
  padding-top: 26px;
  border-top: 2px solid var(--color-ink);
}

.sd-strength__head {
  font-size: clamp(26px, 2.4vw, 46px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--color-hero-ink);
}

.sd-strength__text {
  margin-top: 14px;
  line-height: 1.95;
}

@media (min-width: 1024px) {
  .sd-strength__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3.2vw; }
}

/* ---------- detail: works / FAQ ---------- */

.sd-works__list {
  display: grid;
  gap: 32px 20px;
  margin-top: 44px;
}

@media (min-width: 768px) {
  .sd-works__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sd-works .notice-box,
.sd-faq .notice-box {
  margin-top: 40px;
}

.sd-works__more {
  margin-top: 28px;
}

.sd-faq__list {
  margin-top: 40px;
  border-top: 1px solid var(--color-ink);
}

.sd-faq__item {
  border-bottom: 1px solid var(--color-line);
}

.sd-faq__q {
  position: relative;
  padding: 22px 44px 22px 0;
  font-weight: 600;
  line-height: 1.7;
  list-style: none;
  cursor: pointer;
}

.sd-faq__q::-webkit-details-marker { display: none; }

.sd-faq__q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  font-family: var(--font-en);
  font-size: 22px;
  transform: translateY(-50%);
}

.sd-faq__item[open] .sd-faq__q::after { content: "−"; }

.sd-faq__a {
  padding: 0 0 26px;
  line-height: 2;
}

/* ---------- /service/movie/ : black and navy stronger (spec §31) ---------- */

.service-detail--movie :is(.sd-overview, .sd-what) {
  --focus: var(--color-white);
  background: #070c13;
  color: var(--color-white);
}

.service-detail--movie .sd-problems {
  --focus: var(--color-white);
  background: var(--color-navy-deep);
  color: var(--color-white);
}

.service-detail--movie :is(.sd-overview, .sd-what, .sd-problems) :is(.section-title, .sd-what__title, .sd-problems__title) { color: var(--color-white); }
.service-detail--movie :is(.sd-overview, .sd-what, .sd-problems) .eyebrow { color: rgba(255, 255, 255, .85); }
.service-detail--movie .sd-problems__list { border-color: rgba(255, 255, 255, .5); }
.service-detail--movie .sd-problems__item { border-color: rgba(255, 255, 255, .18); }
.service-detail--movie .sd-problems__text { color: rgba(255, 255, 255, .82); }
.service-detail--movie .sd-overview .prose { color: rgba(255, 255, 255, .9); }

/* ---------- hover ---------- */

@media (hover: hover) and (pointer: fine) {
  .service-toc__item a:hover .service-toc__ja,
  .service-pages__link:hover .service-pages__name,
  .service-group__items a:hover span {
    text-decoration: underline 1px;
    text-underline-offset: .3em;
  }
}