/*
 * WebAI Lab home — portfolio design system
 * Matches profile.html while keeping the service-page information architecture.
 */
:root{
  --hp-ink:#071b43;
  --hp-navy:#081f4b;
  --hp-blue:#155fe8;
  --hp-text:#31425a;
  --hp-muted:#647187;
  --hp-line:#d9e3f0;
  --hp-soft:#f5f8fc;
  --hp-white:#fff;
  --hp-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --hp-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --hp-width:1180px;
  --hp-gutter:32px;
  --hp-section:104px;
}

html{background:#fff;}
body.home-profile-design{
  color:var(--hp-text);
  background:#fff!important;
  background-image:none!important;
  font-family:var(--hp-sans)!important;
  font-size:16px;
  line-height:1.9;
}
body.home-profile-design::before{display:none!important;}
body.home-profile-design [hidden]{display:none!important;}
body.home-profile-design main{position:relative;z-index:1;}
.home-profile-design .fixed-btn{display:none!important;}
.home-profile-design .bt-bot-toggle{
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:5px!important;
  background:var(--hp-navy)!important;
  box-shadow:0 10px 28px rgba(7,27,67,.16)!important;
}
body.home-profile-design a:focus-visible,
body.home-profile-design button:focus-visible,
body.home-profile-design input:focus-visible,
body.home-profile-design textarea:focus-visible{
  outline:3px solid rgba(21,95,232,.35)!important;
  outline-offset:3px!important;
}

/* Keep the original WebAI Lab logo while using the profile-style header layout. */
.home-profile-design .site-header .hd-left{
  width:220px!important;
  min-width:220px!important;
}
.home-profile-design .site-header .hd-phone{width:122px!important;}
.home-profile-design .site-header .hd-cta{width:134px!important;}
.home-profile-design .site-header .gnav-list{gap:clamp(24px,2.25vw,40px)!important;}
.home-profile-design .mobile-nav{
  color:#fff;
  background:var(--hp-navy);
}
.home-profile-design .mn-logo{letter-spacing:.08em;}

/* Hero copy is service-led, but the composition is identical to the portfolio. */
.home-profile-design .home-portfolio-hero .portfolio-hero__title{
  letter-spacing:-.045em;
}
.home-profile-design .home-portfolio-hero .portfolio-hero__title-accent{
  color:var(--hp-blue);
}

/*
 * Keep the approved 1755px portfolio composition centered on wide screens.
 * The profile hero cards already follow this centered stage; shifting the
 * photo by the same half-overflow prevents it from stretching independently.
 */
@media(min-width:1756px){
  .home-profile-design .home-portfolio-hero .portfolio-hero__visual{
    left:calc(634px + ((100vw - 1755px) / 2));
  }
}

/* Shared section system. */
.home-profile-design .main-wrapper,
.home-profile-design .intro-slides-inner{
  width:min(var(--hp-width),calc(100% - (var(--hp-gutter) * 2)))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.home-profile-design .intent-gateway,
.home-profile-design .intro-slides,
.home-profile-design .case-wrapper,
.home-profile-design .message-wrapper,
.home-profile-design .services-wrapper,
.home-profile-design .about-wrapper,
.home-profile-design .results-wrapper,
.home-profile-design .voice-wrapper,
.home-profile-design .detail-wrapper,
.home-profile-design .faq-wrapper,
.home-profile-design .flow-wrapper{
  position:relative;
  overflow:hidden;
  padding:var(--hp-section) 0!important;
  color:var(--hp-text);
  font-family:var(--hp-sans)!important;
}
.home-profile-design .intent-gateway,
.home-profile-design .case-wrapper,
.home-profile-design .services-wrapper,
.home-profile-design .results-wrapper,
.home-profile-design .detail-wrapper,
.home-profile-design .flow-wrapper{
  background:var(--hp-white)!important;
}
.home-profile-design .intro-slides,
.home-profile-design .message-wrapper,
.home-profile-design .about-wrapper,
.home-profile-design .voice-wrapper,
.home-profile-design .faq-wrapper{
  background:var(--hp-soft)!important;
}
.home-profile-design .services-blob,
.home-profile-design .services-blob-right,
.home-profile-design .results-bg,
.home-profile-design .faq-bg,
.home-profile-design .contact-deco,
.home-profile-design .message-wrapper::before,
.home-profile-design .message-wrapper::after{
  display:none!important;
}
.home-profile-design .fade-in,
.home-profile-design .scroll-anim{
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}

/* Typography hierarchy. */
.home-profile-design .headline,
.home-profile-design .intent-title,
.home-profile-design .intro-slides-title,
.home-profile-design .message h2,
.home-profile-design .footer-contact-wrapper .headline{
  margin:0;
  color:var(--hp-ink)!important;
  font-family:var(--hp-serif)!important;
  font-size:clamp(2.35rem,3.35vw,3.2rem)!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:-.035em!important;
  text-shadow:none!important;
  text-wrap:pretty;
}
.home-profile-design .hl-en,
.home-profile-design .intent-eyebrow,
.home-profile-design .intro-slides-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 20px!important;
  color:var(--hp-blue)!important;
  font-family:var(--hp-sans)!important;
  font-size:.78rem!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:.14em!important;
}
.home-profile-design .hl-en::before{
  width:8px!important;
  height:8px!important;
  border-radius:50%;
  background:var(--hp-blue)!important;
}
.home-profile-design .lead,
.home-profile-design .intent-lead,
.home-profile-design .intro-slides-title small{
  color:var(--hp-text)!important;
  font-family:var(--hp-sans)!important;
  font-size:1rem!important;
  font-weight:400!important;
  line-height:1.95!important;
  letter-spacing:.015em!important;
}
.home-profile-design .tcenter{text-align:center;}
.home-profile-design .case-wrapper>.main-wrapper>.lead,
.home-profile-design .voice-wrapper .lead{
  max-width:720px;
  margin:20px auto 0!important;
  text-align:center;
}

/* Entry cards: remove generated-looking image panels and use a clear editorial grid. */
.home-profile-design .intent-gateway{padding-top:112px!important;}
.home-profile-design .intent-gateway::before,
.home-profile-design .intent-gateway::after{display:none!important;}
.home-profile-design .intent-head{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)!important;
  gap:64px!important;
  align-items:end!important;
  margin-bottom:48px!important;
}
.home-profile-design .intent-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
}
.home-profile-design .intent-card{
  min-height:370px!important;
  padding:32px!important;
  border:1px solid var(--hp-line)!important;
  border-top:3px solid var(--hp-blue)!important;
  border-radius:6px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:var(--hp-text)!important;
}
.home-profile-design .intent-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 14px 32px rgba(7,27,67,.08)!important;
}
.home-profile-design .intent-card-bg{display:none!important;}
.home-profile-design .intent-card-mark{
  width:52px!important;
  height:52px!important;
  margin-bottom:28px!important;
  border:1px solid var(--hp-line)!important;
  border-radius:50%!important;
  color:var(--hp-blue)!important;
  background:#fff!important;
}
.home-profile-design .intent-card-kicker{color:var(--hp-blue)!important;letter-spacing:.1em!important;}
.home-profile-design .intent-card-title{
  color:var(--hp-ink)!important;
  font-size:1.32rem!important;
  line-height:1.6!important;
}
.home-profile-design .intent-card-text{color:var(--hp-text)!important;line-height:1.9!important;}
.home-profile-design .intent-tags span{
  border:1px solid var(--hp-line)!important;
  border-radius:3px!important;
  color:var(--hp-muted)!important;
  background:#fff!important;
}
.home-profile-design .intent-card-link{color:var(--hp-blue)!important;}
.home-profile-design .intent-eyebrow::before{
  content:"";
  display:inline-block;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:var(--hp-blue)!important;
}

/* Slides and case studies. */
.home-profile-design .intro-slides-head{
  max-width:900px;
  margin:0 0 48px!important;
  text-align:left!important;
}
.home-profile-design .intro-slides-title small{
  display:block!important;
  margin:18px 0 0!important;
  text-align:left!important;
}
.home-profile-design .intro-slides-stage{
  overflow:hidden;
  border:1px solid var(--hp-line)!important;
  border-radius:6px!important;
  background:#fff!important;
  box-shadow:0 14px 36px rgba(7,27,67,.07)!important;
}
.home-profile-design .intro-slides-cta a{
  min-height:56px;
  padding:0 28px!important;
  border-radius:4px!important;
  background:var(--hp-navy)!important;
  box-shadow:none!important;
  font-size:.9rem!important;
}
.home-profile-design .case-library-card,
.home-profile-design .case-library-arrow{
  border-color:var(--hp-line)!important;
  border-radius:5px!important;
  box-shadow:none!important;
}
.home-profile-design .case-library-card:hover{box-shadow:0 10px 28px rgba(7,27,67,.08)!important;}

/* Before / after and service list. */
.home-profile-design .message-wrapper .message{
  padding:0!important;
  background:transparent!important;
}
.home-profile-design .message-wrapper .message>.txt{max-width:560px;}
.home-profile-design .ba-card,
.home-profile-design .before-after-card{
  border:1px solid var(--hp-line)!important;
  border-radius:6px!important;
  box-shadow:none!important;
}
.home-profile-design .services-wrapper .repeat-grow1-1,
.home-profile-design .about-wrapper .repeat-grow1-1{
  gap:64px!important;
  align-items:center!important;
}
.home-profile-design .services-wrapper .services-visual,
.home-profile-design .about-img-wrap{
  overflow:hidden;
  border-radius:8px!important;
  box-shadow:none!important;
}
.home-profile-design .services-wrapper .services-visual{height:560px!important;}
.home-profile-design .services-wrapper .headline{
  font-size:clamp(2rem,2.35vw,2.35rem)!important;
  line-height:1.65!important;
  letter-spacing:-.025em!important;
}
.home-profile-design .top-links{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:48px!important;
}
.home-profile-design .top-link,
.home-profile-design .about-link{
  border:1px solid var(--hp-line)!important;
  border-radius:6px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.home-profile-design .top-link a,
.home-profile-design .about-link{
  min-height:110px!important;
  padding:24px!important;
}
.home-profile-design .link-num{color:var(--hp-blue)!important;}
.home-profile-design .link-txt .ttl{
  color:var(--hp-ink)!important;
  font-size:1.08rem!important;
  font-weight:700!important;
}
.home-profile-design .link-txt .sub{
  margin-top:8px!important;
  color:var(--hp-muted)!important;
  font-size:.84rem!important;
  font-weight:400!important;
}
.home-profile-design .arrow-circle{
  border-color:var(--hp-line)!important;
  background:#fff!important;
}

/* About, results, testimonials, service details. */
.home-profile-design .about-wrapper .headline{
  font-size:clamp(2.05rem,2.55vw,2.4rem)!important;
  line-height:1.65!important;
}
.home-profile-design .about-caption{
  padding-top:18px;
  border-top:1px solid var(--hp-line);
}
.home-profile-design .results-content,
.home-profile-design .faq-content{width:100%!important;max-width:none!important;}
.home-profile-design .faq-content{
  padding:56px 48px!important;
  border:1px solid var(--hp-line)!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.home-profile-design .faq-icon-q{background:var(--hp-navy)!important;}
.home-profile-design .faq-icon-a{background:var(--hp-blue)!important;}
.home-profile-design .results-grid,
.home-profile-design .voice-grid{
  gap:18px!important;
  margin-top:48px!important;
}
.home-profile-design .result-item,
.home-profile-design .voice-card,
.home-profile-design .detail-card{
  border:1px solid var(--hp-line)!important;
  border-radius:6px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.home-profile-design .result-num,
.home-profile-design .ba-num{color:var(--hp-blue)!important;}
.home-profile-design .detail-wrapper .service-cards,
.home-profile-design .detail-wrapper .detail-grid{
  gap:18px!important;
}

/* FAQ and flow use a restrained, border-led structure. */
.home-profile-design .faq-list{margin-top:48px!important;}
.home-profile-design .faq-item{
  border:0!important;
  border-top:1px solid var(--hp-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.home-profile-design .faq-item:last-child{border-bottom:1px solid var(--hp-line)!important;}
.home-profile-design .faq-q{
  min-height:76px;
  padding:22px 56px 22px 52px!important;
  color:var(--hp-ink)!important;
  font-weight:600!important;
}
.home-profile-design .faq-a{padding:0 52px 24px!important;color:var(--hp-text)!important;}
.home-profile-design .flow-steps{margin-top:54px!important;}
.home-profile-design .flow-step-circle{
  border-color:var(--hp-line)!important;
  background:#fff!important;
  box-shadow:none!important;
}
.home-profile-design .flow-card{
  overflow:hidden;
  border:1px solid var(--hp-line)!important;
  border-radius:6px!important;
  background:#fff!important;
  box-shadow:none!important;
}

/* Contact: same deep navy end-cap used by the portfolio. */
.home-profile-design .footer-contact-wrapper{
  padding:104px 0!important;
  background:var(--hp-navy)!important;
  color:#fff!important;
}
.home-profile-design .footer-contact-wrapper .hl-en,
.home-profile-design .footer-contact-wrapper .headline,
.home-profile-design .footer-contact-wrapper .lead{color:#fff!important;}
.home-profile-design .footer-contact-wrapper .hl-en::before{background:#7eb0ff!important;}
.home-profile-design .contact-form-wrap{
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
.home-profile-design .contact-form input,
.home-profile-design .contact-form textarea{
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:4px!important;
  background:rgba(255,255,255,.1)!important;
  color:#fff!important;
}
.home-profile-design .contact-form input::placeholder,
.home-profile-design .contact-form textarea::placeholder{color:rgba(255,255,255,.5)!important;}
.home-profile-design .contact-submit{
  min-height:58px;
  border-radius:4px!important;
  background:#fff!important;
  color:var(--hp-navy)!important;
}

@media(max-width:1180px){
  .home-profile-design .bt-bot-toggle,
  .home-profile-design .bt-bot-panel{display:none!important;}
  .home-profile-design .site-header .hd-left{width:190px!important;min-width:190px!important;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__title{font-size:44px!important;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .home-profile-design .home-portfolio-hero .portfolio-hero__card{padding-right:18px;padding-left:18px;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__card--selected{padding-left:46px;}
  .home-profile-design .intent-head{grid-template-columns:1fr;gap:20px!important;}
}

@media(max-width:900px){
  :root{--hp-section:80px;--hp-gutter:24px;}
  .home-profile-design .intent-grid{grid-template-columns:1fr!important;}
  .home-profile-design .intent-card{min-height:0!important;}
  .home-profile-design .services-wrapper .repeat-grow1-1,
  .home-profile-design .about-wrapper .repeat-grow1-1{gap:40px!important;}
  .home-profile-design .services-wrapper .services-visual{height:auto!important;aspect-ratio:16/10;}
  .home-profile-design .top-links{grid-template-columns:1fr!important;}
}

@media(max-width:820px){
  .home-profile-design .bt-bot-toggle,
  .home-profile-design .bt-bot-panel{display:none!important;}
  .home-profile-design .site-header .hd-left{width:180px!important;min-width:180px!important;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__visual::after{background:linear-gradient(0deg,rgba(7,27,67,.16),transparent 45%);}
  .home-profile-design .home-portfolio-hero .portfolio-hero__cards{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .home-profile-design .home-portfolio-hero .portfolio-hero__card{
    min-height:160px;
    height:auto;
  }
}

@media(max-width:767px){
  :root{--hp-section:64px;--hp-gutter:18px;}
  .home-profile-design .headline,
  .home-profile-design .intent-title,
  .home-profile-design .intro-slides-title,
  .home-profile-design .message h2,
  .home-profile-design .footer-contact-wrapper .headline{
    font-size:clamp(1.85rem,8vw,2.25rem)!important;
    line-height:1.5!important;
  }
  .home-profile-design .lead,
  .home-profile-design .intent-lead,
  .home-profile-design .intro-slides-title small{
    font-size:.94rem!important;
    line-height:1.9!important;
  }
  .home-profile-design .intent-gateway{padding-top:72px!important;}
  .home-profile-design .intent-head{margin-bottom:32px!important;}
  .home-profile-design .intent-card{padding:26px!important;}
  .home-profile-design .intro-slides-head{margin-bottom:30px!important;}
  .home-profile-design .case-wrapper>.main-wrapper>.lead br{display:none;}
  .home-profile-design .services-wrapper .repeat-grow1-1,
  .home-profile-design .about-wrapper .repeat-grow1-1{display:flex!important;flex-direction:column!important;}
  .home-profile-design .services-wrapper .repeat-grow1-1 .img,
  .home-profile-design .services-wrapper .repeat-grow1-1 .txt,
  .home-profile-design .about-wrapper .repeat-grow1-1 .img,
  .home-profile-design .about-wrapper .repeat-grow1-1 .txt{width:100%!important;}
  .home-profile-design .services-wrapper .repeat-grow1-1 .txt{order:-1;}
  .home-profile-design .top-link a,
  .home-profile-design .about-link{min-height:96px!important;padding:20px!important;}
  .home-profile-design .faq-q{padding:20px 42px 20px 36px!important;}
  .home-profile-design .faq-a{padding:0 36px 22px!important;}
  .home-profile-design .faq-content{padding:36px 18px!important;}
  .home-profile-design .footer-contact-wrapper{padding:72px 0!important;}
  .home-profile-design .contact-form-wrap{padding:22px!important;}
}

@media(max-width:430px){
  .home-profile-design .home-portfolio-hero .portfolio-hero__title{font-size:34px!important;line-height:1.5!important;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__lead{font-size:12.5px!important;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__visual{height:300px;}
  .home-profile-design .home-portfolio-hero .portfolio-hero__card-content p{font-size:10.5px;}
}

@media(prefers-reduced-motion:reduce){
  .home-profile-design *,
  .home-profile-design *::before,
  .home-profile-design *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
