/* Main service pages: contained layouts, a shared rhythm and specific visuals. */
.service-detail-page{background:#f5f8f9}
.service-detail-page .detail-hero{padding:150px 0 110px;background:#081923}
.service-detail-page .detail-hero:after{display:none}
.detail-hero-grid,.detail-card-nav .wrap,.service-detail-page .seo-body{width:min(1180px,calc(100% - var(--gutter)*2));margin-inline:auto}
.detail-hero-grid{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:48px}
.service-detail-page .detail-hero h1{font-size:clamp(38px,4.1vw,59px);line-height:1.1;letter-spacing:-.035em;max-width:16em}
.detail-hero h1>span{color:var(--cyan)}
.detail-hero .intro{font-size:18px;line-height:1.8;margin-top:26px;max-width:32em}
.detail-hero .btn{margin-top:30px}
.detail-visual{margin:0;min-width:0}
.detail-visual img{display:block;width:100%;height:auto;border-radius:18px}
.client-hero img{border:1px solid #36515d;box-shadow:0 24px 50px #0004}
.diagram-hero img{border-radius:20px}
.detail-card-nav{position:relative;margin-top:-42px;z-index:2}
.detail-card-nav .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.detail-card-nav a{display:grid;grid-template-columns:22px 1fr 14px;gap:14px;padding:24px;background:white;color:#102b38;border-radius:12px;box-shadow:0 8px 28px #0719230c;transition:transform .2s}
.detail-card-nav a:hover{transform:translateY(-3px)}
.card-number{font-size:11px;font-weight:800;color:#007f95;padding-top:5px}
.detail-card-nav strong{font:700 20px/1.2 Syne,sans-serif;display:block}
.detail-card-nav a div>span{display:block;font-size:13px;line-height:1.6;color:#526b76;margin-top:8px}
.detail-card-nav i{font-style:normal;color:#007f95}
.service-detail-page .seo-body{padding:42px 0 68px}
.service-detail-page .seo-body>.content-band{width:100%;left:auto;transform:none;padding:56px 46px;margin:0 0 24px;border-radius:20px;scroll-margin-top:110px}
.service-detail-page h2{font-size:clamp(30px,3.1vw,43px);line-height:1.15;letter-spacing:-.025em;max-width:19em;margin:0 0 22px}
.service-detail-page h3{font-size:23px;line-height:1.25;letter-spacing:-.02em}
.service-detail-page .content-band p{font-size:16px;line-height:1.8;color:#526b76;margin:18px 0 0}
.service-detail-page .content-band .eyebrow{font-size:11px;letter-spacing:.15em;line-height:1.5;color:#007f95;margin:0 0 20px}
.detail-overview{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;background:transparent}
.detail-problems{display:grid;gap:24px}
.detail-problems article{padding-left:22px;border-left:2px solid #d0e7eb}
.detail-problems h3{font-size:20px}
.service-detail-page .detail-problems p{font-size:14px;margin-top:10px}
.service-detail-page .service-capabilities{background:#e8f0f2}
.service-section-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:0 70px;align-items:end;margin-bottom:30px}
.service-section-intro>.eyebrow{grid-column:1/-1}
.service-section-intro>h2{margin-bottom:0}
.service-detail-page .service-section-intro>p:last-child{margin:0;max-width:35em}
.service-detail-page .capability-layout{grid-template-columns:.72fr 1.3fr;gap:36px;align-items:start}
.service-detail-page .capability-tabs{display:grid;grid-template-columns:1fr;gap:10px}
.service-detail-page .capability-tabs button{display:grid;grid-template-columns:22px 1fr 14px;align-items:center;border:0;border-radius:10px;background:#f7fafb;padding:21px 18px;gap:12px;color:#415d69;min-height:82px}
.service-detail-page .capability-tabs button:first-child{border-top:0}
.service-detail-page .capability-tabs button b{font-size:20px;line-height:1.25}
.service-detail-page .capability-tabs button span{font-size:11px;padding:0}
.service-detail-page .capability-tabs button i{font-size:17px}
.service-detail-page .capability-tabs button[aria-selected=true]{background:#081923;color:white}
.service-detail-page .capability-tabs button[aria-selected=true] span,.service-detail-page .capability-tabs button[aria-selected=true] i{color:var(--cyan)}
.service-detail-page .capability-panel{background:#102a38;clip-path:none;border-radius:14px;padding:36px;min-height:510px}
.service-detail-page .capability-panel .eyebrow{color:var(--cyan)}
.service-detail-page .capability-panel h3{color:white;font-size:29px;line-height:1.2;max-width:22em}
.service-detail-page .capability-panel p{color:#c9d8de;font-size:15px}
.scope-list{list-style:none;padding:0;margin:24px 0;display:grid;gap:14px}
.scope-list li{position:relative;padding-left:22px;color:#e0e9ed;font-size:14px;line-height:1.65}
.scope-list li:before{content:'✓';position:absolute;left:0;color:var(--cyan)}
.service-detail-page .capability-panel .capability-scope{font-size:12px;border-top:1px solid #34505c;padding-top:18px;margin-top:24px}
.capability-panel>a{display:inline-block;font-size:13px;font-weight:700;color:var(--cyan);margin-top:18px}
.service-detail-page .detail-process{background:transparent}
.detail-process>.detail-section-heading{margin-bottom:32px}
.detail-process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;list-style:none;padding:0;margin:0}
.detail-process li{min-width:0}
.step-number{display:block;font:700 36px/1 Syne,sans-serif;color:#007f95;margin-bottom:22px}
.service-detail-page .detail-process li p{font-size:14px;margin-top:14px}
.step-output{margin-top:24px;padding-top:18px;border-top:1px solid #ccdde3;display:grid;gap:8px}
.step-output strong{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#007f95}
.step-output span{font-size:13px;line-height:1.7;color:#526b76}
.service-detail-page .detail-example{background:#fff;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.detail-secondary{margin-top:26px;background:#102b38!important;color:white!important;font-size:13px}
.project-breakdown{background:#edf4f5;padding:32px;border-radius:14px}
.project-brand{display:block;max-height:65px;max-width:220px;object-fit:contain;margin:0 0 28px}
.project-brand[src*='logo-jp']{filter:brightness(0)}
.project-breakdown ul{list-style:none;padding:0;margin:0;display:grid;gap:26px}
.project-breakdown strong{display:block;font:700 21px/1.25 Syne,sans-serif;color:#102b38;margin-bottom:8px}
.project-breakdown li>span{display:block;font-size:14px;line-height:1.75;color:#526b76}
.project-view{max-width:245px;width:100%;margin:0 auto;border-radius:22px;overflow:hidden;border:6px solid #102b38;box-shadow:0 14px 34px #08192319}
.project-view img{width:100%;height:auto;display:block}
.service-detail-page .detail-scope{background:#102a38;color:white;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.service-detail-page .detail-scope h2{color:white}
.service-detail-page .detail-scope p{color:#c9d8de}
.service-detail-page .detail-scope .eyebrow{color:var(--cyan)}
.scope-accordion details{border-bottom:1px solid #39505d}
.scope-accordion summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;padding:22px 0;font:700 23px/1.3 Syne,sans-serif}
.scope-accordion summary::-webkit-details-marker{display:none}
.scope-accordion summary>span{font:700 11px Manrope,sans-serif;color:var(--cyan)}
.scope-accordion summary:after{content:'+';margin-left:auto;color:var(--cyan);font-size:22px}
.scope-accordion details[open] summary:after{content:'−'}
.service-detail-page .scope-accordion p{margin:0 0 24px;font-size:14px}
.service-detail-page .detail-faq{display:grid;grid-template-columns:.8fr 1.4fr;gap:65px;background:transparent}
.detail-faq a{display:inline-block;color:#007f95;font-weight:700;margin-top:8px}
.detail-faq .seo-faq{padding:0;margin:0}
.service-detail-page .seo-faq summary{font-size:16px;padding:22px 0;line-height:1.55}
.service-detail-page .seo-faq details p{font-size:14px;margin:0}
.service-detail-page .detail-reading{background:transparent;padding-top:25px!important}
.detail-reading>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.detail-reading>div>a{position:relative;display:block;background:white;color:#102b38;padding:28px 44px 28px 28px;border-radius:14px;transition:transform .2s}
.detail-reading>div>a:hover{transform:translateY(-3px)}
.detail-reading a h3{font-size:23px}
.service-detail-page .detail-reading a p{font-size:14px;margin-top:12px}
.read-arrow{position:absolute;right:22px;top:28px;color:#007f95}
.service-detail-page :is(a,button,summary):focus-visible{outline:3px solid #08c7e7;outline-offset:5px}
@media(max-width:980px){
 .service-detail-page .detail-hero{padding-top:125px}
 .detail-hero-grid{gap:28px;grid-template-columns:1fr 1fr}
 .service-detail-page .detail-hero h1{font-size:42px}
 .detail-card-nav a{padding:20px;grid-template-columns:1fr 14px;gap:6px}
 .card-number{grid-column:1/-1}
 .detail-card-nav strong{font-size:18px}
 .service-detail-page .seo-body>.content-band{padding:40px 32px}
 .detail-overview,.service-section-intro,.detail-example,.detail-scope,.detail-faq{gap:36px!important}
 .service-detail-page .capability-layout{gap:20px;grid-template-columns:.85fr 1.4fr}
 .service-detail-page .capability-panel{padding:28px;min-height:565px}
 .service-detail-page .capability-tabs button b{font-size:17px}
 .detail-process ol{gap:24px}
}
@media(max-width:700px){
 .service-detail-page .detail-hero{padding:110px 0 72px}
 .detail-hero-grid{grid-template-columns:1fr;gap:32px}
 .service-detail-page .detail-hero h1{font-size:clamp(35px,8.8vw,47px)}
 .detail-hero .intro{font-size:16px;line-height:1.75}
 .detail-visual{width:100%;max-width:520px}
 .detail-card-nav{margin-top:-30px}
 .detail-card-nav .wrap{grid-template-columns:1fr;gap:10px}
 .detail-card-nav a{grid-template-columns:20px 1fr 14px;padding:18px;gap:12px}
 .card-number{grid-column:auto}
 .detail-card-nav a div>span{margin-top:4px;font-size:12px}
 .service-detail-page .seo-body{padding-top:22px;padding-bottom:34px}
 .service-detail-page .seo-body>.content-band{padding:32px 22px;border-radius:14px;margin-bottom:16px}
 .detail-overview,.service-section-intro,.detail-example,.service-detail-page .detail-faq,.service-detail-page .detail-scope{grid-template-columns:1fr}
 .service-detail-page .detail-faq>div{min-width:0}
 .service-detail-page .detail-faq .seo-faq summary{font-size:16px;gap:18px;line-height:1.55}
 .service-detail-page .detail-faq .seo-faq summary:after{flex:none}
 .service-section-intro{gap:0!important}
 .service-detail-page .service-section-intro>p:last-child{margin-top:18px}
 .service-detail-page h2{font-size:31px}
 .service-detail-page .content-band p{font-size:15px}
 .service-detail-page .capability-layout{grid-template-columns:1fr;gap:20px}
 .service-detail-page .capability-tabs{grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
 .service-detail-page .capability-tabs button{min-width:0;padding:15px 12px;grid-template-columns:1fr;gap:7px;min-height:100px;white-space:normal}
 .service-detail-page .capability-tabs button i{display:none}
 .service-detail-page .capability-tabs button b{font-size:16px}
 .service-detail-page .capability-panel{min-height:0;padding:26px 22px}
 .service-detail-page .capability-panel h3{font-size:26px}
 .detail-process ol{grid-template-columns:1fr;gap:32px}
 .detail-process li{display:grid;grid-template-columns:32px 1fr;gap:0 18px}
 .step-number{font-size:25px;grid-row:1/4;margin-top:3px}
 .detail-process li>p,.step-output{grid-column:2}
 .detail-reading>div:last-child{grid-template-columns:1fr;gap:14px}
 .project-view{max-width:220px}
 .project-breakdown{padding:26px}
 .scope-accordion summary{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.detail-card-nav a,.detail-reading>div>a{transition:none}}

/* Web design hero uses continuous brand atmosphere, never client screenshots. */
.service-detail-page .brand-design-hero{background:#081923 url('assets/web-design-brand-atmosphere.png') center/cover no-repeat;position:relative;isolation:isolate}
.brand-design-hero .detail-hero-grid{display:block;position:relative;z-index:1}
.brand-design-hero .hero-copy{max-width:650px}
.service-detail-page .brand-design-hero h1{font-size:clamp(38px,4.3vw,62px);max-width:13em}
.brand-design-hero .intro{max-width:31em}
@media(max-width:980px){.service-detail-page .brand-design-hero{background-position:62% center}.brand-design-hero .hero-copy{max-width:560px}}
@media(max-width:700px){.service-detail-page .brand-design-hero{background-image:linear-gradient(#081923d9,#081923ee),url('assets/web-design-brand-atmosphere.png');background-position:70% center}.service-detail-page .brand-design-hero h1{font-size:clamp(35px,8.8vw,47px)}}

/* Live review content is controlled by the connected Trustindex widget. */
.service-detail-page .detail-reviews{background:#e8f0f2}
.reviews-heading{margin-bottom:28px}
.reviews-heading h2{margin-bottom:0}
.trustindex-review-feed{min-width:0;max-width:100%;overflow-wrap:anywhere}
.service-detail-page .reviews-direct{margin-top:20px;font-size:13px}
.reviews-direct a{color:#007f95;font-weight:800}
.live-reviews .ti-widget{max-width:100%}