/*
 * Portfolio human-tone layer v1
 * Keeps the approved color system while removing template-like repetition,
 * exaggerated metrics, decorative surfaces, and fragile responsive crops.
 */
:root{
  --ph-ink:#071b43;
  --ph-text:#2b3f59;
  --ph-muted:#637187;
  --ph-blue:#1557d5;
  --ph-line:#d6e0ec;
  --ph-soft:#f5f7fa;
  --ph-white:#fff;
}

/* Quiet the decorative effects that make the page feel generated. */
.profile-fv-copy::before,
.profile-fv-copy::after,
.web-works::after,
.github-portfolio::before,
.portfolio-services::before,
.portfolio-services::after,
.portfolio-profile::before,
.portfolio-profile::after,
.portfolio-skills::before,
.portfolio-skills::after{
  display:none!important;
}

.profile-fv-kicker,
.intro-slides-eyebrow,
.portfolio-showcase__kicker,
.case-wrapper .hl-en,
.pf-kicker{
  letter-spacing:.09em!important;
}

.profile-fv-lead,
.portfolio-showcase__lead,
.web-work-card__summary,
.github-project__summary,
.portfolio-profile__body,
.portfolio-services__desc,
.portfolio-skills__desc{
  text-wrap:pretty;
}

/* Content must never wait in an invisible state while the user scrolls. */
.intro-slides .fade-in,
.portfolio-showcase .fade-in,
.case-wrapper .fade-in,
.pf-section .fade-in,
.portfolio-footer-v3 .fade-in,
.footer-contact-wrapper .fade-in{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:none!important;
}

/* Hero: same content across devices and a factual, editorial proof strip. */
.profile-fv-copy{
  background:#fff!important;
}

.profile-fv-proofbar{
  background:#fff!important;
}

.profile-fv-proof > strong{
  color:var(--ph-ink)!important;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif!important;
  font-size:1.35rem!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
}

.profile-fv-proof > strong span{
  font-size:.72em!important;
}

.profile-fv-service-card{
  border:1px solid var(--ph-line)!important;
  border-top:3px solid var(--ph-blue)!important;
  border-radius:6px!important;
  box-shadow:0 8px 24px rgba(7,27,67,.07)!important;
}

.profile-fv-service-card > img{
  display:none!important;
}

.profile-fv-card-head{
  min-height:0!important;
}

.profile-fv-card-head > span{
  font-size:.86rem!important;
  font-weight:700!important;
}

.profile-fv-service-card h2{
  font-size:.95rem!important;
  font-weight:700!important;
}

.profile-fv-card-head p{
  color:var(--ph-muted)!important;
  font-size:.68rem!important;
  font-weight:400!important;
}

.profile-fv-card-caption{
  min-height:0!important;
  margin:18px 0 0!important;
  padding-top:14px!important;
  border-top:1px solid var(--ph-line)!important;
  color:var(--ph-text)!important;
  font-size:.72rem!important;
  font-weight:400!important;
}

.profile-fv-card-metric{
  margin:8px 0 0!important;
  color:var(--ph-text)!important;
  font-size:.72rem!important;
  font-weight:400!important;
  white-space:normal!important;
}

.profile-fv-card-metric strong{
  margin:0 7px 0 0!important;
  color:var(--ph-blue)!important;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif!important;
  font-size:.82rem!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
}

@media (min-width:1101px){
  .profile-fv-lead{
    width:calc(100% - 96px)!important;
    max-width:520px!important;
  }

  .profile-fv-main-media{
    height:73%!important;
  }

  .profile-fv-service-cards{
    bottom:38px!important;
    height:190px!important;
  }

  .profile-fv-service-card{
    height:190px!important;
    min-height:190px!important;
    padding:20px!important;
  }

  .profile-fv-selected-label{
    bottom:38px!important;
    height:190px!important;
    border-radius:18px 0 0 0!important;
  }
}

@media (min-width:768px) and (max-width:1100px){
  .profile-fv-lead{
    font-size:.94rem!important;
  }

  .profile-fv-main-media{
    height:64%!important;
  }

  .profile-fv-service-cards{
    bottom:26px!important;
  }

  .profile-fv-service-card{
    flex-basis:min(250px,82%)!important;
    min-height:188px!important;
    padding:18px!important;
  }
}

/* Portfolio slides: describe them as work records, not a sales deck. */
.intro-slides-title,
.intro-slides-title-main{
  font-size:clamp(1.9rem,2.8vw,2.2rem)!important;
  line-height:1.5!important;
}

.intro-slides-title small{
  max-width:720px;
  margin-right:0!important;
  margin-left:0!important;
  color:var(--ph-muted)!important;
  font-size:.96rem!important;
  text-align:left!important;
}

.intro-slides-stage{
  overflow:hidden;
  background:#fff!important;
}

/* Web work: two featured cases, then a balanced 3 x 3 index. */
.web-works{
  background:#fff!important;
}

.web-works__grid{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:30px 22px!important;
}

.web-work-card{
  grid-column:span 4;
  min-width:0;
  border-radius:6px!important;
  box-shadow:none!important;
}

.web-work-card:nth-child(-n+2){
  grid-column:span 6;
}

.web-work-card__media,
.web-work-card__media img{
  border-radius:5px 5px 0 0!important;
}

.web-work-card__media img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  transition:none!important;
}

.web-work-card:hover .web-work-card__media img{
  transform:none!important;
}

.web-work-card__body{
  padding:22px!important;
}

.web-work-card:nth-child(-n+2) .web-work-card__body{
  padding:26px!important;
}

.web-work-card__meta{
  margin-bottom:10px!important;
  font-size:.68rem!important;
  letter-spacing:.04em!important;
}

.web-work-card h3{
  font-size:1.06rem!important;
  line-height:1.55!important;
}

.web-work-card:nth-child(-n+2) h3{
  font-size:1.24rem!important;
}

.web-work-card__summary{
  margin-top:10px!important;
  color:var(--ph-text)!important;
  font-size:.86rem!important;
  line-height:1.8!important;
}

.web-work-card__role{
  margin-top:14px!important;
  padding-top:13px!important;
  font-size:.74rem!important;
  line-height:1.75!important;
}

.web-work-card__role strong{
  margin-bottom:3px!important;
  font-size:.65rem!important;
}

/* Implementation and case sections use the same restrained surface system. */
.github-portfolio{
  background:var(--ph-soft)!important;
}

.github-project{
  background:transparent!important;
}

.case-wrapper{
  background:#fff!important;
}

.case-library-viewport.fade-in,
.case-library-viewport.fade-in.pf-motion,
.case-library-viewport.is-visible,
.case-library-card{
  opacity:1!important;
  visibility:visible!important;
}

.case-library-viewport.fade-in,
.case-library-viewport.fade-in.pf-motion{
  transform:none!important;
}

.case-library-card{
  border-radius:4px!important;
  background:#fff!important;
  box-shadow:none!important;
}

.case-library-card:hover{
  transform:none!important;
  border-color:#9db2ca!important;
  box-shadow:none!important;
}

.case-library-card img{
  opacity:1!important;
  visibility:visible!important;
}

/* Remove excessive card styling from capability/tool lists. */
.portfolio-services__row,
.portfolio-skills__button,
.portfolio-profile__card{
  border-radius:6px!important;
  box-shadow:none!important;
}

.portfolio-services__row,
.portfolio-skills__button{
  background:transparent!important;
}

.portfolio-services__row:hover,
.portfolio-skills__button:hover{
  transform:none!important;
  box-shadow:none!important;
}

@media (max-width:1100px){
  .web-work-card,
  .web-work-card:nth-child(-n+2){
    grid-column:span 6;
  }
}

@media (min-width:768px) and (max-width:900px){
  .portfolio-services__head{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  .portfolio-services .pf-lead{
    width:auto!important;
    max-width:680px!important;
  }
}

@media (max-width:767px){
  .profile-fv-main-media{
    height:226px!important;
  }

  .profile-fv-main-media img{
    object-position:52% center!important;
  }

  .profile-fv-service-cards{
    gap:8px!important;
    margin-top:-20px!important;
  }

  .profile-fv-service-card{
    display:block!important;
    min-height:0!important;
    padding:15px 16px!important;
  }

  .profile-fv-card-head{
    grid-template-columns:26px minmax(0,1fr)!important;
  }

  .profile-fv-card-caption{
    margin-top:12px!important;
    padding-top:10px!important;
  }

  .intro-slides-head{
    margin-bottom:24px!important;
  }

  .intro-slides-title,
  .intro-slides-title-main{
    font-size:1.62rem!important;
    line-height:1.5!important;
    text-wrap:pretty!important;
  }

  .intro-slides-title small{
    font-size:.86rem!important;
    line-height:1.8!important;
  }

  .portfolio-showcase__title,
  .portfolio-services .pf-title,
  .portfolio-profile .pf-title,
  .portfolio-skills .pf-title{
    font-size:1.82rem!important;
    line-height:1.45!important;
  }

  .case-wrapper .headline{
    font-size:1.66rem!important;
    line-height:1.5!important;
    letter-spacing:-.045em!important;
    text-wrap:pretty!important;
  }

  .web-works__grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .web-work-card,
  .web-work-card:nth-child(-n+2){
    grid-column:1!important;
  }

  .web-work-card__media img{
    object-fit:contain!important;
    background:#eef2f7!important;
  }

  .web-work-card__body,
  .web-work-card:nth-child(-n+2) .web-work-card__body{
    padding:20px!important;
  }

  .web-work-card h3,
  .web-work-card:nth-child(-n+2) h3{
    font-size:1.06rem!important;
  }
}

@media (max-width:390px){
  .intro-slides-title,
  .intro-slides-title-main{
    font-size:1.48rem!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .web-work-card__media img,
  .case-library-card{
    transition:none!important;
  }
}