/* ---------- service detail page overrides ---------- */
#header-logo-slot{ opacity:1 !important; }
header.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }

.svc-hero{ padding:160px clamp(20px,4vw,56px) 100px; position:relative; overflow:hidden; }
.svc-hero-inner{ max-width:1360px; margin:0 auto; display:flex; gap:64px; align-items:center; flex-wrap:wrap; position:relative; z-index:2; }
.svc-hero-left{ flex:1 1 480px; }
.svc-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.svc-tag{ font-family:"Space Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.05em; border:1.5px solid var(--ink); border-radius:99px; padding:7px 16px; color:var(--ink); }
.svc-hero-title{ font-weight:900; font-size:clamp(2.4rem,5vw,4.6rem); line-height:1.2; letter-spacing:-.01em; margin-bottom:32px; font-feature-settings:"palt" 1; }
.mkr{ position:relative; display:inline-block; }
.mkr::after{
  content:""; position:absolute; left:-3px; bottom:0.04em; height:0.24em; width:0;
  background:var(--hl-color, var(--acc-01)); opacity:.32; z-index:-1; border-radius:2px;
  animation:mkrDraw .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--mkr-delay, 0s);
}
@keyframes mkrDraw{ from{ width:0; } to{ width:calc(100% + 6px); } }

.svc-hero-title .accent{ background:linear-gradient(90deg, var(--ink) 0%, var(--acc-01) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-hero-lead{ font-size:17px; line-height:2; color:var(--ink-dim); max-width:520px; margin-bottom:40px; text-wrap:pretty; }
.svc-hero-actions{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }

.svc-btn-primary{
  display:inline-flex; align-items:center; gap:12px; background:var(--glitch-a); color:#fff; font-weight:700; font-size:16px;
  letter-spacing:.02em; padding:19px 36px; border-radius:999px; text-decoration:none; border:none; cursor:pointer;
  transition:background-color .25s ease, color .25s ease;
}
.svc-btn-primary:hover{ background:#fff; color:var(--glitch-a); box-shadow:inset 0 0 0 1.5px var(--glitch-a); }
.svc-btn-primary .circ{ width:26px; height:26px; border-radius:99px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; flex:none; }

.svc-btn-secondary{ display:flex; flex-direction:column; align-items:flex-start; font-family:"Space Mono",monospace; font-weight:700; font-size:16px; letter-spacing:.05em; color:var(--ink); text-decoration:none; }
.svc-btn-secondary-line{ position:relative; width:130px; height:2px; background:var(--ink); margin-top:8px; transition:width .35s cubic-bezier(.22,1,.36,1); }
.svc-btn-secondary-line::after{ content:""; position:absolute; right:0; top:0; width:9px; height:2px; background:var(--ink); transform-origin:100% 50%; transform:rotate(45deg); }
.svc-btn-secondary:hover .svc-btn-secondary-line{ width:160px; }

.svc-hero-right{ flex:1 1 420px; max-width:520px; position:relative; z-index:2; }
.svc-media{ aspect-ratio:4/3; border-radius:28px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 30px 60px -20px rgba(0,0,0,.25); background:linear-gradient(160deg,var(--acc-01),#1a2a5c); }
.svc-media svg{ width:120%; height:120%; }
.svc-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.svc-section{ padding:100px clamp(20px,4vw,56px) 120px; border-top:1px solid var(--border); }
.svc-section-inner{ max-width:1360px; margin:0 auto; }
.svc-section-top{ text-align:center; margin-bottom:64px; }
.svc-section-heading{ font-weight:900; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.3; letter-spacing:-.01em; }

.reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media(max-width:900px){ .reasons-grid{ grid-template-columns:1fr; } }
.reason-card{ background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; }
.reason-media{ aspect-ratio:16/10; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.reason-media svg{ width:130%; height:130%; }
.reason-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.reason-body{ padding:36px 32px; }
.reason-label{ font-family:"Space Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.1em; margin-bottom:16px; }
.reason-title{ font-weight:900; font-size:1.7rem; line-height:1.45; margin-bottom:20px; letter-spacing:.02em; }
.reason-desc{ font-size:15.5px; line-height:2.05; color:var(--ink-dim); letter-spacing:.03em; text-wrap:pretty; }

.flow-list{ max-width:820px; margin:0 auto; position:relative; }
.flow-line-track{ position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:var(--border); }
.flow-line-progress{ position:absolute; left:27px; top:28px; width:2px; height:0; background:var(--acc-01); transition:height .1s linear; }
.flow-step{ display:flex; gap:32px; padding:34px 0; align-items:flex-start; position:relative; z-index:1; }
.flow-num{ flex:none; width:56px; height:56px; border-radius:99px; border:1.5px solid var(--ink); background:#fff; display:flex; align-items:center; justify-content:center; font-family:"Space Mono",monospace; font-weight:700; font-size:17px; }
.flow-step.done .flow-num{ border-color:var(--acc-01); color:var(--acc-01); }
.flow-body{ padding-top:8px; max-width:640px; }
.flow-step-label{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--cyan); font-weight:700; margin-bottom:10px; }
.flow-title{ font-weight:900; font-size:1.5rem; margin-bottom:14px; letter-spacing:.02em; }
.flow-desc{ font-size:15.5px; line-height:2.05; color:var(--ink-dim); letter-spacing:.03em; text-wrap:pretty; }
.flow-step.goal .flow-num{ background:var(--acc-01); border-color:var(--acc-01); color:#fff; }
.flow-step.goal .flow-title{ color:var(--acc-01); }

/* pricing */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
@media(max-width:900px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ border:1px solid var(--border); border-radius:24px; padding:40px 32px; display:flex; flex-direction:column; }
.price-card.featured{ background:linear-gradient(160deg,var(--acc-01),#1a2a5c); color:#fff; border:none; position:relative; }
.price-badge{ position:absolute; top:28px; right:28px; background:#fff; color:var(--acc-01); font-weight:700; font-size:12px; padding:6px 14px; border-radius:99px; }
.price-name{ font-weight:700; font-size:19px; margin-bottom:18px; letter-spacing:.03em; }
.price-amount{ font-weight:900; font-size:3.4rem; margin-bottom:20px; letter-spacing:-.01em; }
.price-amount span{ font-size:1.1rem; font-weight:700; }
.price-desc{ font-size:15.5px; line-height:1.95; opacity:.85; margin-bottom:28px; letter-spacing:.02em; text-wrap:pretty; }
.price-list{ border-top:1px solid rgba(0,0,0,.1); padding-top:20px; display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.price-card.featured .price-list{ border-top-color:rgba(255,255,255,.25); }
.price-list li{ list-style:none; display:flex; gap:10px; font-size:15px; line-height:1.85; letter-spacing:.02em; text-wrap:pretty; }
.price-list li::before{ content:"✓"; font-weight:700; flex:none; }

.price-options{ margin-top:64px; border-top:1px solid var(--border); padding-top:48px; max-width:1000px; margin-left:auto; margin-right:auto; }
.price-options-title{ display:flex; align-items:center; gap:12px; font-weight:900; font-size:1.3rem; margin-bottom:32px; }
.price-options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
@media(max-width:700px){ .price-options-grid{ grid-template-columns:1fr; } }
.price-option-row{ display:flex; justify-content:space-between; gap:16px; padding:19px 0; border-bottom:1px solid var(--border); font-size:15.5px; letter-spacing:.02em; }
.price-option-row span:last-child{ font-weight:700; }

/* faq */
.faq-list{ max-width:820px; margin:0 auto; border-top:1px solid var(--border); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 4px; background:none; border:none; text-align:left; font-family:inherit; font-size:16.5px; font-weight:700; color:var(--ink); cursor:pointer; }
.faq-q-icon{ width:28px; height:28px; border-radius:99px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .3s ease, border-color .3s ease; }
.faq-item.open .faq-q-icon{ transform:rotate(45deg); border-color:var(--ink); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a-inner{ padding:0 40px 28px 4px; font-size:14.5px; line-height:2; color:var(--ink-dim); text-wrap:pretty; }

/* cta */
.svc-cta-card{ max-width:1360px; margin:0 auto; border-radius:36px; overflow:hidden; padding:clamp(48px,7vw,90px) clamp(24px,5vw,64px); position:relative; background:linear-gradient(150deg, var(--acc-01), #0d1b3d 85%); color:#fff; text-align:center; }
.svc-cta-eyebrow{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.15em; color:rgba(255,255,255,.6); text-transform:uppercase; font-weight:700; margin-bottom:22px; }
.svc-cta-heading{ font-weight:900; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.2; margin-bottom:28px; }
.svc-cta-lead{ font-size:15.5px; line-height:2; color:rgba(255,255,255,.78); max-width:520px; margin:0 auto 40px; text-wrap:pretty; }
.svc-cta-btn{ display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--ink); font-weight:700; font-size:16px; padding:19px 38px; border-radius:999px; text-decoration:none; border:1.5px solid #fff; transition:background-color .25s ease, color .25s ease; }
.svc-cta-btn:hover{ background:transparent; color:#fff; }
.svc-cta-btn .circ{ width:26px; height:26px; border-radius:99px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; flex:none; }

.flow-line-progress{ background:var(--acc-05); }
.flow-step.done .flow-num{ border-color:var(--acc-05); color:var(--acc-05); }
.flow-step.goal .flow-num{ background:var(--acc-05); border-color:var(--acc-05); color:#fff; }
.flow-step.goal .flow-title{ color:var(--acc-05); }
.price-badge{ color:var(--acc-05); }

/* ---------- mobile fixes ---------- */
@media(max-width:768px){
  /* desktop-only manual line breaks \xe2\x80\x94 let text wrap naturally on mobile */
  .d-break{ display:none !important; }

  /* hero: too much top padding on mobile */
  .svc-hero{ padding:50px clamp(20px,5vw,32px) 56px !important; }

  /* hero: image position does not translate to mobile \xe2\x80\x94 just hide it */
  .svc-hero-right{ display:none; }
  .svc-hero-inner{ display:block; }
  .svc-hero-title{ font-size:clamp(2rem,9vw,2.8rem) !important; overflow-wrap:break-word; }
  .svc-hero-lead{ max-width:100%; }

  /* hero buttons: keep side-by-side */
  .svc-hero-actions{ flex-wrap:nowrap; gap:12px; }
  .svc-btn-primary{ flex:1 1 0; padding:15px 10px; font-size:13.5px; justify-content:center; white-space:nowrap; }
  .svc-btn-secondary{ flex:1 1 0; flex-direction:row; align-items:center; justify-content:center; font-size:13.5px; white-space:nowrap; }
  .svc-btn-secondary-line{ display:none; }

  /* sections: 100px/120px padding repeated across 5 sections made the page feel very sparse */
  .svc-section{ padding:56px clamp(20px,5vw,32px) 64px !important; }

  /* headings: avoid leaving a single orphan character on its own line, and
     never split a word mid-way (text-wrap:balance alone can't prevent that
     for Japanese — .nowrap-part spans in the HTML mark the safe break points) */
  .svc-section-heading{ text-wrap:balance; font-size:clamp(1.5rem,7vw,2rem); white-space:normal; }
  .nowrap-part{ white-space:nowrap; }
  .reason-title{ text-wrap:balance; }
  .flow-title{ text-wrap:balance; }

  /* description text: avoid awkward mid-phrase breaks */
  .reason-desc, .flow-desc{ overflow-wrap:break-word; }

  /* reason cards: less internal padding so text has more room and wraps less */
  .reason-body{ padding:28px 22px; }

  /* flow step text: flex items don't shrink below their content's natural
     width by default, which was pushing the description text off-screen */
  .flow-step{ gap:20px; }
  .flow-body{ min-width:0; max-width:100%; }

  /* contact CTA heading/button: avoid leaving a single orphan character on its own line */
  .svc-cta-heading{ text-wrap:balance; }
  .svc-cta-btn{ white-space:nowrap; }
  .svc-cta-lead{ max-width:100%; }

  /* price amount: shrink so long prices (e.g. ¥500,000) do not overflow the card */
  .price-amount{ font-size:2.4rem; }
}