/* WiLL Marketing — selective visual upgrade
   Scope intentionally limited to the user-requested components. */

/* 1) Home first view: premium typography only; keep the original hero layout/colors. */
.home-page .hero-copy h1{
  font-family:var(--font-display);
  font-size:clamp(3rem,4.7vw,5rem);
  line-height:1.01;
  letter-spacing:-.072em;
}
.home-page .hero-copy h1 em{
  color:#0757d9;
  background:linear-gradient(90deg,#0757d9 0%,#0a8be7 56%,#38bce9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.home-page .hero-copy h1 em:after{
  border-bottom-color:#31b9e7;
}
.home-page .hero-actions .button--primary{
  background:linear-gradient(135deg,#0757d9 0%,#087be7 62%,#20b9e8 100%);
  box-shadow:0 14px 32px rgba(7,87,217,.24);
}
.home-page .hero-actions .button--primary:hover{
  background:linear-gradient(135deg,#064ac0 0%,#076ed0 64%,#149fca 100%);
  box-shadow:0 20px 42px rgba(7,87,217,.32);
}

/* 2) Header: preserve the original header; upgrade only the WhatsApp CTA. */
.site-header .header-whatsapp-button{
  min-width:104px!important;
  min-height:38px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:10px!important;
  font-size:.67rem!important;
  background:linear-gradient(135deg,#0757d9 0%,#0788e6 100%)!important;
  box-shadow:0 8px 20px rgba(7,87,217,.20)!important;
}
.site-header .header-whatsapp-button:hover{
  background:linear-gradient(135deg,#064abd 0%,#0777cc 100%)!important;
  box-shadow:0 11px 25px rgba(7,87,217,.27)!important;
}

/* 3) Home final Contact CTA: premium card treatment, with the original site content. */
.home-final-cta{
  background:
    radial-gradient(circle at 10% 10%,rgba(48,199,238,.12),transparent 28rem),
    linear-gradient(180deg,#f7fbff,#eef5fd)!important;
}
.home-final-cta__inner{
  border:1px solid #d9e7f5;
  border-radius:30px;
  padding:clamp(34px,5vw,68px);
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 64px rgba(11,51,103,.10);
}
.home-final-cta__button{
  border-radius:14px!important;
}
.home-final-cta__actions .button--primary,
.home-final-cta__button.button--primary{
  background:linear-gradient(135deg,#0757d9 0%,#087be7 62%,#20b9e8 100%);
  box-shadow:0 14px 32px rgba(7,87,217,.22);
}
.home-final-cta--ja h2{
  width:100%!important;
  max-width:790px!important;
  margin-inline:auto!important;
  text-align:center!important;
  letter-spacing:-.055em!important;
  font-size:clamp(2.1rem,4.05vw,4.3rem)!important;
  line-height:1.12!important;
  text-wrap:balance!important;
}
.home-final-cta--ja .home-final-cta__inner>div:first-child>p:not(.kicker){
  margin-inline:0!important;
}
.home-final-cta__title-line{
  display:block;
}

/* 4) Unified premium hero ONLY for Services, Success Stories, Contact. */
.services-page .page-hero,
.success-stories-page .page-hero,
.contact-page-hero{
  min-height:310px!important;
  padding:76px 0 66px!important;
  display:block!important;
  background:
    radial-gradient(circle at 82% 20%,rgba(58,201,241,.24),transparent 26rem),
    radial-gradient(circle at 6% 100%,rgba(109,75,232,.24),transparent 28rem),
    linear-gradient(135deg,#06152f 0%,#0a2b60 56%,#0758a1 100%)!important;
  color:#fff!important;
  position:relative;
  overflow:hidden;
}
.services-page .page-hero:after,
.success-stories-page .page-hero:after,
.contact-page-hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to right,transparent,black 30%,black 78%,transparent);
  mask-image:linear-gradient(to right,transparent,black 30%,black 78%,transparent);
  opacity:.32;
}
.services-page .page-hero__texture,
.success-stories-page .page-hero__texture,
.contact-page-hero__texture{
  opacity:.38!important;
  background:radial-gradient(circle at 74% 34%,rgba(255,255,255,.16) 0 1px,transparent 1.5px)!important;
  background-size:18px 18px!important;
}
.services-page .page-hero>.section-shell,
.success-stories-page .page-hero>.section-shell,
.contact-page-hero__inner{
  position:relative;
  z-index:2;
  width:min(1320px,calc(100% - 72px));
  min-height:168px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start!important;
}
.services-page .page-hero .kicker,
.success-stories-page .page-hero .kicker,
.contact-page-hero .kicker{
  color:#8de8ff!important;
}
.services-page .page-hero h1,
.success-stories-page .page-hero h1,
.contact-page-hero h1{
  color:#fff!important;
  margin-top:16px!important;
  max-width:930px!important;
  font:800 clamp(2.9rem,5.4vw,5.7rem)/.98 var(--font-display)!important;
  letter-spacing:-.068em!important;
  text-wrap:balance;
}
.contact-page-hero__copy{
  max-width:930px!important;
}

/* 5) Services detail area: selector cards above remain the original design. */
.service-details-section{
  background:transparent!important;
  padding-top:90px!important;
  padding-bottom:120px!important;
}
.service-details-section .detail-header{
  max-width:900px;
  margin-bottom:52px!important;
}
.service-details-section .detail-header h2{
  font-size:clamp(2.3rem,4vw,4.15rem)!important;
  letter-spacing:-.06em!important;
}
.service-details-section .detail-intro,
.service-details-section .detail-header p:not(.kicker){
  color:#536781!important;
  font-size:1rem!important;
  line-height:1.85!important;
}
.service-details-section .digital-detail-block,
.service-details-section .creative-detail-block,
.service-details-section .platform-detail,
.service-details-section .service-story-block{
  border:1px solid #dce8f4!important;
  border-radius:28px!important;
  background:#fff!important;
  padding:clamp(24px,3.5vw,46px)!important;
  box-shadow:0 20px 58px rgba(17,55,101,.08)!important;
}
.service-details-section .digital-detail-block__visual,
.service-details-section .creative-detail-block__visual,
.service-details-section .platform-detail__visual,
.service-details-section .service-story-block__visual{
  border-radius:22px!important;
  overflow:hidden!important;
  background:#eef4fa!important;
}
.service-details-section .digital-detail-block__visual img,
.service-details-section .creative-detail-block__visual img,
.service-details-section .platform-detail__visual img,
.service-details-section .service-story-block__visual img{
  border-radius:22px!important;
}
.service-details-section .service-support-item{
  border-radius:14px!important;
  background:#f7fbff!important;
  border-color:#dce8f4!important;
  min-height:104px;
}
.service-details-section .service-support-item h4{
  font-size:.76rem!important;
}

/* Service category labels: all five cards use the same locale-specific size.
   Web/Creative and Business Consulting keep their current size; the other three match them. */
.services-page:not(.services-page--en) .service-selector-card .selector-title{
  white-space:nowrap!important;
  overflow:visible;
  letter-spacing:-.045em!important;
}
.services-page--ja .service-selector-card .selector-title{
  font-size:.88rem!important;
}
.services-page--ne .service-selector-card .selector-title,
.services-page--th .service-selector-card .selector-title{
  font-size:.76rem!important;
}
.services-page--vi .service-selector-card .selector-title,
.services-page--id .service-selector-card .selector-title{
  font-size:.78rem!important;
}

/* 6) Footer: premium visual language, intentionally thinner than the premium draft. */
.site-footer{
  background:
    radial-gradient(circle at 90% 0%,rgba(48,199,238,.12),transparent 26rem),
    linear-gradient(145deg,#041126,#061b3c 65%,#05234a)!important;
  padding-top:0!important;
}
.site-footer .footer-topline{
  display:none!important;
}
.site-footer .footer-grid{
  gap:54px!important;
  padding-top:28px!important;
  padding-bottom:34px!important;
}
.site-footer .footer-logo-panel img{
  width:190px!important;
}
.site-footer .footer-label{
  color:#79dff7!important;
}
.site-footer .footer-nav a,
.site-footer .footer-contact span,
.site-footer .footer-contact a{
  font-size:.77rem;
}
.site-footer .footer-bottom{
  border-top-color:rgba(255,255,255,.10)!important;
  padding-top:15px!important;
  padding-bottom:17px!important;
}

/* 7) Language-aware line breaking: preserve meaning without broken layouts. */
html[lang="ja"] body{font-feature-settings:"palt" 1}
html[lang="ja"] .services-page .service-details-section h2,
html[lang="ja"] .services-page .service-details-section h3,
html[lang="ja"] .services-page .service-details-section h4,
html[lang="ja"] .services-page .service-details-section p,
html[lang="ja"] .services-page .service-details-section li{
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
}
html[lang="th"] body,
html[lang="ne"] body{line-height:1.72}
html[lang="vi"] body,
html[lang="id"] body{letter-spacing:-.005em}

/* Responsive tuning only for the upgraded components. */
@media (max-width:1100px){
  .home-page .hero-copy h1{font-size:clamp(2.65rem,5.6vw,4.4rem)}
  .services-page .page-hero>.section-shell,
  .success-stories-page .page-hero>.section-shell,
  .contact-page-hero__inner{width:calc(100% - 48px)}
}
@media (max-width:820px){
  .home-page .hero-copy h1{
    font-size:clamp(2.5rem,10.4vw,3.9rem);
    letter-spacing:-.065em;
  }
  .services-page .page-hero,
  .success-stories-page .page-hero,
  .contact-page-hero{
    min-height:250px!important;
    padding:56px 0 48px!important;
  }
  .services-page .page-hero>.section-shell,
  .success-stories-page .page-hero>.section-shell,
  .contact-page-hero__inner{
    width:calc(100% - 32px);
    min-height:140px!important;
  }
  .services-page .page-hero h1,
  .success-stories-page .page-hero h1,
  .contact-page-hero h1{
    font-size:clamp(2.35rem,9vw,3.9rem)!important;
    line-height:1.02!important;
  }
  .home-final-cta__inner{
    grid-template-columns:1fr!important;
    padding:32px 26px;
    gap:28px;
  }
  .home-final-cta--ja h2{
    font-size:clamp(1.7rem,6.7vw,2.55rem)!important;
  }
  .site-footer .footer-topline{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding-top:32px!important;
    padding-bottom:24px!important;
  }
  .site-footer .footer-grid{
    padding-top:26px!important;
    padding-bottom:28px!important;
  }
}
@media (max-width:620px){
  .home-page .hero-copy h1{font-size:clamp(2.25rem,10.8vw,3.45rem)}
  .home-final-cta__inner{
    padding:28px 20px;
    border-radius:22px;
  }
  .home-final-cta--ja h2{
    max-width:100%!important;
    font-size:clamp(1.1rem,5vw,1.28rem)!important;
    line-height:1.35!important;
    letter-spacing:-.06em!important;
    text-wrap:nowrap!important;
  }
  .services-page .page-hero,
  .success-stories-page .page-hero,
  .contact-page-hero{
    min-height:220px!important;
    padding:46px 0 40px!important;
  }
  .services-page .page-hero>.section-shell,
  .success-stories-page .page-hero>.section-shell,
  .contact-page-hero__inner{
    width:calc(100% - 24px);
    min-height:130px!important;
  }
  .services-page .page-hero h1,
  .success-stories-page .page-hero h1,
  .contact-page-hero h1{
    font-size:clamp(2rem,10vw,3.15rem)!important;
  }
  
  
  .site-header .header-whatsapp-button{
    min-height:42px!important;
  }
  .site-footer .footer-logo-panel img{width:166px!important}
}

.home-final-cta--ja .home-final-cta__title-line{display:block;text-align:center!important;}

@media (max-width:720px){
  .services-page--ja .service-selector-card .selector-title{font-size:.82rem!important;}
  .services-page--ne .service-selector-card .selector-title,
  .services-page--th .service-selector-card .selector-title{font-size:.72rem!important;}
  .services-page--vi .service-selector-card .selector-title,
  .services-page--id .service-selector-card .selector-title{font-size:.74rem!important;}
  .case-performance__metrics--meo{
    grid-template-columns:minmax(0,1fr)!important;
    justify-content:stretch!important;
  }
}


/* v5: Website Production -> website case studies CTA */
.creative-projects-link{
  justify-self:end;
  margin-top:4px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid #9dbfe5;
  border-radius:999px;
  background:#fff;
  color:var(--cobalt);
  font:850 .72rem/1 var(--font-display);
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s var(--ease-out),background .18s var(--ease-out),color .18s var(--ease-out),box-shadow .18s var(--ease-out);
  box-shadow:0 8px 18px rgba(12,54,110,.08);
}
.creative-projects-link:hover,
.creative-projects-link:focus-visible{
  background:var(--cobalt);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(7,87,217,.18);
  outline:none;
}

/* v7: miniature versions of the Home gold medal badge */
.success-story-card:not(.success-story-card--website) .success-story-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
}
.success-story-card__metrics{
  width:100%;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:clamp(7px,1vw,12px)!important;
  margin-top:auto!important;
  padding-top:18px;
  padding-bottom:8px;
  overflow:visible;
}
.success-story-card__metrics div{
  position:relative;
  flex:0 1 104px;
  width:104px;
  max-width:31%;
  aspect-ratio:1;
  min-width:0;
  min-height:0;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px!important;
  padding:13px 8px 15px!important;
  overflow:visible;
  text-align:center;
  color:var(--gold-deep);
  text-shadow:0 1px rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.88) 0 2%,rgba(255,244,183,.90) 3% 15%,transparent 32%),
    linear-gradient(145deg,#fff2ad,#e5ad35 42%,#9a5b08)!important;
  border:1px solid rgba(255,238,166,.92);
  border-radius:50%!important;
  box-shadow:
    0 11px 22px rgba(67,35,0,.26),
    inset 0 0 0 4px rgba(255,255,255,.20),
    inset 0 -8px 15px rgba(101,52,0,.16);
  isolation:isolate;
}
.success-story-card__metrics div:before,
.success-story-card__metrics div:after{
  content:"";
  z-index:-1;
  position:absolute;
  bottom:-12px;
  width:23px;
  height:31px;
  background:linear-gradient(#a56109,#e7ad30);
  box-shadow:inset 0 0 0 1px rgba(255,241,173,.35);
}
.success-story-card__metrics div:before{
  left:24px;
  transform:rotate(8deg);
  clip-path:polygon(0 0,100% 0,82% 100%,50% 78%,18% 100%);
}
.success-story-card__metrics div:after{
  right:24px;
  transform:rotate(-8deg);
  clip-path:polygon(0 0,100% 0,82% 100%,50% 78%,18% 100%);
}
.success-story-card__metrics span{
  order:2;
  display:block;
  max-width:90%;
  color:#653300!important;
  font:900 .50rem/1.12 var(--font-display)!important;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.success-story-card__metrics b{
  order:1;
  display:block!important;
  max-width:100%;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#5d2f00!important;
  font:900 clamp(1.05rem,1.45vw,1.32rem)/.92 var(--font-display)!important;
  letter-spacing:-.07em!important;
  white-space:nowrap;
}
/* Two-metric cards can use larger medals while staying on one row. */
.success-story-card__metrics > div:first-child:nth-last-child(2),
.success-story-card__metrics > div:first-child:nth-last-child(2) ~ div{
  flex-basis:116px;
  width:116px;
  max-width:40%;
}

/* v5 mobile checks */
@media (max-width:720px){
  .creative-projects-link{
    justify-self:stretch;
    width:100%;
    min-height:44px;
    margin-top:6px;
    white-space:normal;
    text-align:center;
  }
  .success-story-card__metrics{
    display:flex!important;
    gap:6px!important;
  }
  .success-story-card__metrics div{
    min-width:0;
    min-height:72px;
    padding:9px 5px 10px!important;
  }
  .success-story-card__metrics b{
    max-width:100%;
    white-space:nowrap;
    font-size:clamp(.88rem,4vw,1.08rem)!important;
  }
  .services-page--ne .creative-detail-block__content,
  .services-page--ne .digital-detail-block__content,
  .services-page--ne .service-story-block__content{
    min-width:0;
  }
}
@media (max-width:430px){
  .success-story-card__metrics{
    display:flex!important;
    gap:5px!important;
  }
  .success-story-card__metrics div{
    min-height:68px;
    padding:8px 4px 9px!important;
  }
  .success-story-card__metrics span{
    font-size:.48rem!important;
    line-height:1.12!important;
    overflow-wrap:anywhere;
  }
  .success-story-card__metrics b{
    font-size:clamp(.78rem,3.7vw,.98rem)!important;
    letter-spacing:-.075em!important;
  }
}

/* v7 mobile safety for gold result medals */
@media (max-width:720px){
  .success-story-card__metrics{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    gap:6px!important;
    padding-top:15px;
    padding-bottom:10px;
  }
  .success-story-card__metrics div{
    flex:0 1 92px!important;
    width:92px!important;
    max-width:31%!important;
    aspect-ratio:1;
    padding:11px 6px 13px!important;
  }
  .success-story-card__metrics > div:first-child:nth-last-child(2),
  .success-story-card__metrics > div:first-child:nth-last-child(2) ~ div{
    flex-basis:108px!important;
    width:108px!important;
    max-width:43%!important;
  }
  .success-story-card__metrics div:before{
    left:20px;
  }
  .success-story-card__metrics div:after{
    right:20px;
  }
  .success-story-card__metrics b{
    font-size:clamp(.92rem,4vw,1.08rem)!important;
  }
  .success-story-card__metrics span{
    font-size:.46rem!important;
    line-height:1.08!important;
  }
}
@media (max-width:390px){
  .success-story-card__metrics{
    gap:5px!important;
  }
  .success-story-card__metrics div{
    flex-basis:88px!important;
    width:88px!important;
    padding:10px 5px 12px!important;
  }
  .success-story-card__metrics > div:first-child:nth-last-child(2),
  .success-story-card__metrics > div:first-child:nth-last-child(2) ~ div{
    flex-basis:104px!important;
    width:104px!important;
  }
  .success-story-card__metrics b{
    font-size:.93rem!important;
  }
  .success-story-card__metrics span{
    font-size:.43rem!important;
  }
}


/* v8: fit SAMOSA's third metric inside the medal without changing the other badges */
.success-story-card--samosa .success-story-card__metrics > div:nth-child(3) b{
  font-size:clamp(.98rem,1.32vw,1.24rem)!important;
  letter-spacing:-.08em!important;
}
@media (max-width:720px){
  .success-story-card--samosa .success-story-card__metrics > div:nth-child(3) b{
    font-size:clamp(.86rem,3.75vw,1.01rem)!important;
  }
}
@media (max-width:390px){
  .success-story-card--samosa .success-story-card__metrics > div:nth-child(3) b{
    font-size:.88rem!important;
  }
}


/* v9 requested adjustments: calmer home CTA interactions + visual-first service details. */
.home-page .hero-actions .button,
.home-final-cta__button{
  transform:none!important;
  transition:background .20s var(--ease-out),color .20s var(--ease-out),border-color .20s var(--ease-out),box-shadow .20s var(--ease-out)!important;
}
.home-page .hero-actions .button:hover,
.home-page .hero-actions .button:focus-visible,
.home-final-cta__button:hover,
.home-final-cta__button:focus-visible{
  transform:none!important;
}

/* Prevent sticky touch-hover color states. Desktop hover remains subtle and stable. */
.home-page .hero-actions .button--primary:hover{
  background:linear-gradient(135deg,#0757d9 0%,#087be7 62%,#20b9e8 100%)!important;
  box-shadow:0 14px 32px rgba(7,87,217,.24)!important;
}
.home-page .hero-actions .button--outline:hover{
  color:var(--cobalt)!important;
  background:#fff!important;
  border-color:#88b0eb!important;
  box-shadow:none!important;
}
.home-final-cta__button--secondary:hover,
.home-final-cta__button--secondary:focus-visible{
  color:var(--cobalt)!important;
  background:#fff!important;
  border-color:var(--cobalt)!important;
  box-shadow:0 10px 22px rgba(7,87,217,.10)!important;
}
.home-page .hero-actions .button:focus-visible,
.home-final-cta__button:focus-visible{
  outline:3px solid rgba(7,87,217,.24)!important;
  outline-offset:3px!important;
}
@media (hover:hover) and (pointer:fine){
  .home-page .hero-actions .button--primary:hover{
    background:linear-gradient(135deg,#064fc5 0%,#0775d7 62%,#18a9d6 100%)!important;
    box-shadow:0 17px 36px rgba(7,87,217,.29)!important;
  }
  .home-page .hero-actions .button--outline:hover{
    color:#064fc5!important;
    background:#f7fbff!important;
    border-color:#5f96e3!important;
    box-shadow:0 8px 20px rgba(7,87,217,.10)!important;
  }
  .home-final-cta__button--secondary:hover{
    color:#064fc5!important;
    background:#f7fbff!important;
    border-color:#5f96e3!important;
    box-shadow:0 10px 22px rgba(7,87,217,.12)!important;
  }
}

/* Services desktop: preserve the original zigzag layout for Digital Marketing,
   Web Creation Production, and Business Consulting. Corporate Support remains
   visual -> text on desktop; mobile/tablet stays visual -> text below. */
.services-page .service-story-list--corporate .service-story-block .service-story-block__visual{
  grid-area:1 / 1!important;
  order:1!important;
}
.services-page .service-story-list--corporate .service-story-block .service-story-block__content{
  grid-area:1 / 2!important;
  order:2!important;
  justify-self:start!important;
}
.services-page .platform-detail .platform-detail__visual{
  grid-area:1 / 1!important;
  order:1!important;
}
.services-page .platform-detail .platform-detail__supports{
  grid-area:1 / 2!important;
  order:2!important;
}

@media (max-width:960px){
  .services-page .creative-detail-block .creative-detail-block__visual,
  .services-page .creative-detail-block .creative-detail-block__content,
  .services-page .service-story-block .service-story-block__visual,
  .services-page .service-story-block .service-story-block__content,
  .services-page .platform-detail .platform-detail__visual,
  .services-page .platform-detail .platform-detail__supports{
    grid-area:auto!important;
  }
  .services-page .creative-detail-block .creative-detail-block__visual,
  .services-page .service-story-block .service-story-block__visual,
  .services-page .platform-detail .platform-detail__visual{
    order:1!important;
  }
  .services-page .creative-detail-block .creative-detail-block__content,
  .services-page .service-story-block .service-story-block__content,
  .services-page .platform-detail .platform-detail__supports{
    order:2!important;
  }
  .services-page .service-story-list--corporate .service-story-block__content{
    display:grid!important;
  }
  .services-page .service-story-list--corporate .service-story-block__content>*{
    order:initial!important;
  }
}
@media (max-width:740px){
  .services-page .digital-detail-block .digital-detail-block__visual,
  .services-page .digital-detail-block .digital-detail-block__content{
    grid-area:auto!important;
  }
  .services-page .digital-detail-block .digital-detail-block__visual{
    order:1!important;
  }
  .services-page .digital-detail-block .digital-detail-block__content{
    order:2!important;
    justify-self:start!important;
  }
}


/* v10 requested UI refinements: service visibility, metrics readability, contact mobile order, custom plan. */

/* 1. Services selector: keep the image clearly visible before hover while preserving title contrast. */
.services-page .service-selector-overlay{
  background:linear-gradient(to bottom,rgba(0,0,0,.08) 0%,rgba(5,10,26,.54) 100%)!important;
}
.services-page .service-selector-card:hover .service-selector-overlay,
.services-page .service-selector-card.is-active .service-selector-overlay{
  background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,rgba(5,10,26,.66) 100%)!important;
}

/* 2 + 3. Home FV medals: remove the brand line and make the metric name lead the number. */
.hero-proof-badge{
  align-content:center!important;
  gap:5px!important;
}
.hero-proof-badge svg{order:1;}
.hero-proof-badge small{
  order:2;
  width:100%;
  max-width:118px!important;
  color:#5f3100!important;
  font:900 clamp(.60rem,.78vw,.72rem)/1.08 var(--font-display)!important;
  letter-spacing:.01em!important;
  text-wrap:balance;
  overflow-wrap:normal;
}
.hero-proof-badge strong{
  order:3;
  font-size:clamp(1.42rem,2.05vw,2.22rem)!important;
}

/* Case-study medal labels: label first, number second, with up to two readable lines inside each medal. */
.success-story-card__metrics span{
  order:1!important;
  width:100%;
  max-width:88%!important;
  min-height:2.12em;
  display:flex!important;
  align-items:flex-end;
  justify-content:center;
  color:#5b2d00!important;
  font:900 clamp(.57rem,.72vw,.67rem)/1.06 var(--font-display)!important;
  letter-spacing:.005em!important;
  text-wrap:balance;
  overflow-wrap:normal!important;
  word-break:normal;
}
.success-story-card__metrics b{
  order:2!important;
  font-size:clamp(1.02rem,1.42vw,1.28rem)!important;
}

/* 6. Custom Plan panel: remove the explanatory sentence and promote the Custom Plan title. */
.plans-preview-panel>strong{display:none!important;}
.plans-preview-panel>p{
  color:#9fe4ff!important;
  font:900 clamp(1.12rem,1.7vw,1.48rem)/1.16 var(--font-display)!important;
  letter-spacing:.035em!important;
}

/* Mobile readability refinements for hero and case-study medals. */
@media (max-width:680px){
  .hero-proof-badge small{
    max-width:88px!important;
    font-size:clamp(.48rem,2.0vw,.61rem)!important;
    line-height:1.06!important;
  }
  .hero-proof-badge strong{
    font-size:clamp(1rem,5vw,1.58rem)!important;
  }

  .success-story-card__metrics span{
    max-width:90%!important;
    font-size:clamp(.48rem,2.25vw,.58rem)!important;
    line-height:1.04!important;
  }
  .success-story-card__metrics b{
    font-size:clamp(.88rem,3.8vw,1.04rem)!important;
  }
}

@media (max-width:390px){
  .success-story-card__metrics span{
    font-size:.46rem!important;
  }
  .success-story-card__metrics b{
    font-size:.90rem!important;
  }
}


/* v12: Case Studies metric hierarchy, safe wrapping, Contact spacing/order, mobile footer logo. */

/* Average results (LINE + MEO): description -> value -> optional qualifier. */
.case-performance__metrics{
  justify-content:center!important;
}
.case-performance__metrics--meo{
  grid-template-columns:minmax(220px,320px)!important;
  justify-content:center!important;
}
.case-performance__metrics article{
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  text-align:center!important;
  row-gap:5px!important;
}
.case-performance__metric-label{
  order:1!important;
  width:100%;
  max-width:27rem;
  color:#102f5a!important;
  font:900 clamp(.9rem,1.14vw,1.04rem)/1.28 var(--font-display)!important;
  letter-spacing:.005em!important;
  text-align:center!important;
  text-wrap:balance;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
.case-performance__metrics b{
  order:2!important;
  width:100%;
  text-align:center!important;
  font-size:clamp(1.68rem,2.65vw,2.38rem)!important;
}
.case-performance__metric-note{
  order:3!important;
  display:block!important;
  width:100%;
  color:#5d718d!important;
  font:800 clamp(.72rem,.9vw,.84rem)/1.25 var(--font-display)!important;
  letter-spacing:.002em!important;
  text-align:center!important;
  white-space:pre-line!important;
  text-wrap:balance;
  word-break:keep-all!important;
}

/* Store-result medals: only wrap at meaningful word boundaries; keep labels visible on mobile too. */
.success-story-card__metrics span{
  max-width:90%!important;
  min-height:2.05em!important;
  white-space:pre-line!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  line-break:auto!important;
  text-wrap:balance;
  font:900 clamp(.61rem,.78vw,.71rem)/1.05 var(--font-display)!important;
  letter-spacing:0!important;
}

/* Contact: hero -> quote/service selection -> LINE/SMS/WhatsApp, on desktop and mobile. */
.site-shell>main:has(> .contact-page-hero){
  display:flex!important;
  flex-direction:column!important;
}
.site-shell>main:has(> .contact-page-hero)>.contact-page-hero{order:1!important;}
.site-shell>main:has(> .contact-page-hero)>.quote-request-section{order:2!important;}
.site-shell>main:has(> .contact-page-hero)>.contact-methods-section{
  order:3!important;
  margin-top:0!important;
  margin-bottom:20px!important;
}

@media (max-width:680px){
  .case-performance__metric-label{
    font-size:clamp(.86rem,3.8vw,1rem)!important;
    line-height:1.28!important;
  }
  .case-performance__metrics b{
    font-size:clamp(1.58rem,7.1vw,2rem)!important;
  }
  .case-performance__metric-note{
    font-size:clamp(.7rem,3.05vw,.8rem)!important;
    line-height:1.24!important;
  }
  .success-story-card__metrics span{
    max-width:88%!important;
    font-size:clamp(.53rem,2.45vw,.62rem)!important;
    line-height:1.04!important;
  }
  .site-shell>main:has(> .contact-page-hero)>.contact-methods-section{
    padding-top:48px;
    padding-bottom:58px;
  }
  .site-footer .footer-logo-panel{
    margin-left:-8px!important;
  }
}

@media (max-width:390px){
  .success-story-card__metrics span{
    font-size:.52rem!important;
  }
}


/* v13: Stabilize footer address layout after delayed web-font loading. */
.site-footer .footer-contact{
  min-width:0!important;
}
.site-footer .footer-contact>span{
  width:100%;
  min-width:0;
  align-items:flex-start!important;
  font-family:system-ui,-apple-system,"Segoe UI","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif!important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"palt" 0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
html[lang="ja"] .site-footer .footer-contact>span{
  line-break:strict!important;
}