/* DigitalCraft — service detail pages (ai / automation / hubspot). Scoped under body.svc-page.
   Shares tokens with craft.css (--ink, --paper, --rust, --rule, --ease-craft, --color-text …). */

.svc-page .svc-hero { padding: calc(var(--header-height, 88px) + 66px) 0 58px; }
.svc-page .svc-hero__top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid rgba(32,33,30,.25); }
.svc-page .svc-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: end; margin-top: 60px; }
.svc-page .svc-hero h1 { font-size: clamp(36px,4.6vw,64px); font-weight: 500; line-height: 1.5; letter-spacing: -.045em; }
.svc-page .svc-hero__copy { padding-bottom: 10px; }
.svc-page .svc-hero__catch { font-size: 17px; font-weight: 500; line-height: 1.9; color: var(--ink); margin-bottom: 18px; }
.svc-page .svc-hero__desc { font-size: 14px; line-height: 2.2; color: var(--color-text); }
.svc-page .svc-hero__copy .craft-link { margin-top: 28px; }

.svc-page .svc-visual { padding: 0 0 110px; }
.svc-page .svc-visual__frame { position: relative; max-width: 720px; margin-inline: auto; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(32,33,30,.25); background: var(--color-surface); box-shadow: 8px 8px 0 #20211e; translate: 0 0; transition: translate .5s var(--ease-craft), box-shadow .5s var(--ease-craft); }
.svc-page .svc-visual__frame:hover { translate: -4px -4px; box-shadow: 12px 12px 0 #20211e; }
.svc-page .svc-visual__frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); transition: filter .5s var(--ease-craft); }
.svc-page .svc-visual__frame:hover img { filter: none; }
.svc-page .svc-visual__caption { display: flex; justify-content: space-between; gap: 24px; max-width: 900px; margin: 18px auto 0; font-size: 11px; line-height: 1.8; color: #626459; }
.svc-page .svc-visual__caption strong { font: 500 11px/1.8 'Outfit',sans-serif; letter-spacing: .1em; color: var(--ink); flex-shrink: 0; }

.svc-page .svc-lead__body p { font-size: 15px; line-height: 2.2; color: var(--color-text); }

.svc-page .svc-features { border-top: 1px solid rgba(32,33,30,.2); }
.svc-page .svc-features__grid { display: grid; grid-template-columns: repeat(3,1fr); }
.svc-page .svc-feature { padding: 32px 34px 0 0; border-top: 1px solid var(--ink); }
.svc-page .svc-feature + .svc-feature { padding-left: 34px; border-left: 1px solid rgba(32,33,30,.22); }
.svc-page .svc-feature__num { display: block; font: 14px/1 'Outfit',sans-serif; color: var(--rust); margin-bottom: 22px; }
.svc-page .svc-feature h3 { font-size: 18px; font-weight: 500; line-height: 1.6; margin: 0 0 14px; }
.svc-page .svc-feature p { font-size: 14px; line-height: 2.1; color: var(--color-text); }

.svc-page .svc-stack__list { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; padding: 44px 0 0; list-style: none; border-top: 1px solid rgba(32,33,30,.25); }
.svc-page .svc-stack__list li { font: 18px/1 'Outfit','Noto Sans JP',sans-serif; letter-spacing: -.01em; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid rgba(32,33,30,.3); }

@media (max-width:1000px){
  .svc-page .svc-hero__grid { gap: 35px; }
  .svc-page .svc-feature { padding-right: 22px; }
  .svc-page .svc-feature + .svc-feature { padding-left: 22px; }
  .svc-page .svc-feature h3 { font-size: 17px; }
}

@media (max-width:700px){
  .svc-page .svc-hero { padding-top: calc(var(--header-height, 76px) + 42px); }
  .svc-page .svc-hero__top { font-size: 10px; }
  .svc-page .svc-hero__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .svc-page .svc-hero h1 { font-size: clamp(30px,7.6vw,44px); }
  .svc-page .svc-hero__catch { font-size: 15px; }
  .svc-page .svc-hero__desc { font-size: 14px; }
  .svc-page .svc-visual { padding-bottom: 70px; }
  .svc-page .svc-visual__frame { aspect-ratio: 4/3; }
  .svc-page .svc-visual__caption { flex-direction: column; gap: 4px; }
  .svc-page .svc-features__grid { grid-template-columns: 1fr; }
  .svc-page .svc-feature,
  .svc-page .svc-feature + .svc-feature { padding: 30px 0; border-left: 0; }
  .svc-page .svc-feature__num { margin-bottom: 16px; }
  .svc-page .svc-stack__list { gap: 12px 28px; padding-top: 32px; }
  .svc-page .svc-stack__list li { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .svc-page .svc-visual__frame { transition: none; }
  .svc-page .svc-visual__frame img { transition: none; }
}