/* === Responsive Refinements === */

@media (max-width:980px){
  body{
    padding-top:64px
  }

  .wrap{
    padding:0 28px
  }

  .home-hero{
    min-height:calc(100vh - 64px);
    min-height:calc(100svh - 64px);
    padding:56px 0 48px
  }

  .phero{
    padding:52px 0 48px
  }

  section.s,section.career,section.actions,section.stats,section.interview{
    padding:64px 0
  }

  section.concept{
    padding:48px 0 72px
  }

  section.cta-banner{
    padding:0 0 72px
  }

  .hh-grid,.two-col,.concept-grid,.greet-grid,.contact-grid{
    gap:36px
  }

  .news-list a.item{
    grid-template-columns:110px 100px 1fr auto;
    gap:18px
  }

  .svc-row{
    gap:36px;
    padding:42px 0
  }

  .ft-row{
    gap:24px
  }
}


@media (max-width:720px){
  .wrap{
    padding:0 20px
  }

  .home-hero{
    min-height:auto;
    padding:0;
    background:#fff
  }

  .home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:#fff;
    z-index:1
  }

  .phero{
    padding:44px 0 42px
  }

  section.s,section.career,section.actions,section.stats,section.interview{
    padding:56px 0
  }

  section.concept{
    padding:44px 0 60px
  }

  section.cta-banner{
    padding:0 0 60px
  }

  .sec-title{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin-bottom:14px
  }

  .sec-title .en,.phero .en{
    font-size:13px;
    letter-spacing:.18em
  }

  .sec-sub{
    font-size:16px;
    line-height:1.9;
    margin-bottom:30px
  }

  .home-hero h1{
    font-size:clamp(36px,10vw,48px);
    line-height:1.34;
    margin:0 0 14px;
    text-align:left;
    text-shadow:0 1px 0 rgba(255,255,255,.82)
  }

  .home-hero h1 .hero-accent{
    display:inline;
    color:var(--pink);
    background:transparent;
    border-radius:0;
    padding:0;
    line-height:inherit;
    box-shadow:none
  }

  .hero-script{
    font-size:30px;
    margin:18px 0 24px;
    text-shadow:0 1px 0 rgba(255,255,255,.9)
  }

  .home-hero p.lead{
    font-size:16.5px;
    line-height:1.95;
    margin:0;
    max-width:92%;
    text-align:left;
    text-shadow:0 1px 0 rgba(255,255,255,.9)
  }

  .hero-eyebrow{
    justify-content:flex-start
  }

  .hero-eyebrow-main{
    display:none
  }

  .hero-eyebrow-sp{
    display:flex;
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:10px;
    margin:18px 0 0
  }

  .hero-eyebrow-sp .hero-eyebrow-line{
    width:30px;
    height:2px;
    flex:0 0 auto
  }

  .hero-eyebrow-sp .hero-eyebrow-text{
    max-width:168px;
    font-size:10px;
    line-height:1.45;
    letter-spacing:.18em
  }

  .hero-lineup{
    justify-content:flex-start;
    text-align:left;
    margin-left:0;
    margin-right:0
  }

  .hh-grid{
    position:relative;
    z-index:2;
    display:block;
    height:clamp(430px,68svh,540px);
    min-height:0;
    overflow:visible;
    isolation:isolate;
    text-align:left
  }

  .hh-grid::after{
    display:none
  }

  .hero-copy{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    top:0;
    bottom:auto;
    width:auto;
    padding:112px 20px 34px;
    text-align:left;
    margin:0
  }

  .hero-copy::before{
    display:block;
    inset:154px 4px -28px -6px;
    border-radius:30px;
    background:radial-gradient(ellipse 76% 82% at 20% 62%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 54%,rgba(255,255,255,.64) 76%,rgba(255,255,255,0) 100%);
    filter:blur(8px)
  }

  .hero-visual{
    position:absolute;
    z-index:1;
    left:50%;
    right:auto;
    top:0;
    width:100vw;
    max-width:none;
    height:100%;
    aspect-ratio:auto;
    margin:0;
    opacity:1;
    transform:translateX(-50%);
    pointer-events:none;
    overflow:hidden;
    border-radius:0;
    box-shadow:none;
    background:transparent
  }

  .hero-visual.reveal{
    opacity:1;
    transform:none;
    transform:translateX(-50%)
  }

  .hero-visual::before{
    display:none
  }

  .hero-visual::after{
    content:"";
    display:block;
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    aspect-ratio:auto;
    border-radius:0;
    z-index:2;
    background:radial-gradient(ellipse 78% 58% at 8% 70%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.58) 56%,rgba(255,255,255,0) 76%),linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 48%,rgba(255,255,255,.46) 76%,#fff 100%)
  }

  .hh-grid .hv{
    left:0;
    top:0;
    width:100%;
    height:74%;
    aspect-ratio:auto;
    opacity:1;
    transform:none
  }

  .hh-grid .hv::before{
    display:none
  }

  .hh-grid .hv .hero-photo{
    color:transparent;
    border-radius:0;
    background:#fff;
    -webkit-mask-image:none;
    mask-image:none;
    box-shadow:none;
    opacity:1
  }

  .hh-grid .hv .hero-photo img{
    display:block;
    -o-object-fit:cover;
       object-fit:cover;
    -o-object-position:center top;
       object-position:center top;
    transform:none;
    opacity:1;
    -webkit-mask-image:none;
    mask-image:none;
    border-radius:0;
    filter:none
  }

  .hero-sub-visual{
    display:none
  }

  .hero-scroll{
    display:none
  }

  .hero-scroll-label{
    display:none
  }

  .hero-scroll-line{
    width:11px;
    height:11px;
    background:none;
    border-right:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
    transform:rotate(45deg);
    overflow:visible
  }

  .hero-scroll-line::after{
    display:none
  }

  .hero-lineup{
    display:none
  }

  .hero-lineup .dot{
    display:none
  }

  .hero-lineup > span:not(.dot){
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:0 2px;
    text-align:center;
    font-weight:800;
    border-left:1px solid rgba(43,54,70,.08);
    overflow-wrap:anywhere
  }

  .hero-lineup > span:not(.dot):first-child{
    border-left:0
  }

  .hero-lineup > span:not(.dot)::before{
    content:"";
    width:22px;
    height:22px;
    border:2px solid var(--pink);
    border-radius:6px;
    opacity:.86
  }

  .greet-grid .photo-block.tall::before{
    inset:-10px -14px -10px 14px
  }

  .news-bar{
    margin-top:78px
  }

  .news-inline{
    width:100%;
    margin-top:24px
  }

  .ni{
    grid-template-columns:1fr;
    padding:26px 0;
    gap:10px
  }

  .ni-title,.ni-body{
    grid-column:1;
    text-align:center
  }

  .fcard,.vcard,.job,.contact-info{
    padding:24px 20px
  }

  .feat-grid,.val-grid,.jobs{
    gap:16px
  }

  .photo-block{
    border-radius:28px
  }

  .photo-block.tall,.cb .group-photo{
    border-radius:30px
  }

  .greet-grid .photo-block.tall{
    width:min(100%,320px)
  }

  .greet p,.svc-row p,.concept p{
    font-size:16px;
    line-height:2
  }

  .concept-copy .concept-action{
    display:none
  }

  .concept-action-sp{
    display:block;
    margin-top:18px
  }

  .svc-row{
    padding:34px 0;
    gap:24px
  }

  .svc-row h3{
    font-size:25px
  }

  .recruit-shortcut,.cb{
    grid-template-columns:1fr;
    padding:30px 22px;
    border-radius:22px;
    gap:24px
  }

  .news-list a.item{
    grid-template-columns:auto 1fr;
    gap:12px;
    padding:20px 0
  }

  .news-list .ttl{
    grid-column:1/-1;
    line-height:1.7
  }

  .news-list .arr{
    display:none
  }

  .venn{
    max-width:380px
  }

  .venn .circle{
    padding:18px
  }

  .venn .lbl .ttl{
    font-size:14px;
    letter-spacing:.12em
  }

  .venn .lbl .body{
    font-size:12.5px;
    line-height:1.55
  }

  .timeline{
    display:none
  }

  .career-cards{
    margin-top:28px
  }

  .ccard{
    padding:24px 20px
  }

  .ag-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px
  }

  .ag-card{
    padding:22px 18px
  }

  .support{
    gap:12px
  }

  .scard-h{
    align-items:flex-start;
    gap:14px;
    padding:18px
  }

  .scard-h .name{
    flex:0 0 100px
  }

  .nums{
    grid-template-columns:repeat(2,1fr);
    gap:22px 16px
  }

  .job .actions{
    flex-direction:column
  }

  .co-table .r{
    padding:16px 0
  }

  .ft-row{
    grid-template-columns:1fr;
    gap:26px
  }

  footer.bottom{
    padding:44px 0 96px
  }
}

@media (max-width:540px){
  body{
    padding-top:60px
  }

  .wrap{
    padding:0 16px
  }

  header.top .row{
    height:60px
  }

  header.top .logo{
    font-size:25px
  }

  header.top .logo .mk{
    width:36px;
    height:36px
  }

  .home-hero{
    min-height:auto;
    padding:0
  }

  .mobile-backdrop{
    inset:60px 0 0
  }

  .mobile-nav{
    top:60px
  }

  .mobile-nav-inner{
    padding-top:16px;
    padding-bottom:20px
  }

  .mobile-nav a{
    font-size:16px;
    padding:14px
  }

  .home-hero h1{
    font-size:38px;
    text-align:left
  }

  .hero-script{
    font-size:28px
  }

  .home-hero p.lead{
    font-size:15.5px;
    line-height:1.9;
    max-width:92%;
    text-align:left
  }

  .hh-grid{
    height:clamp(410px,64svh,520px);
    min-height:0
  }

  .hero-copy{
    left:0;
    right:0;
    bottom:auto;
    padding:112px 20px 32px
  }

  .hero-visual{
    left:50%;
    right:auto;
    top:0;
    width:100vw;
    max-width:none;
    height:100%;
    aspect-ratio:auto;
    margin:0;
    opacity:1;
    transform:translateX(-50%)
  }

  .hero-visual.reveal{
    opacity:1;
    transform:translateX(-50%)
  }

  .hh-grid .hv{
    left:0;
    top:0;
    width:100%;
    height:72%;
    aspect-ratio:auto
  }

  .hero-scroll{
    top:calc(72% - 20px)
  }

  .hero-lineup{
    left:0;
    right:0
  }

  .phero h1{
    font-size:30px
  }

  .phero p{
    font-size:16px;
    line-height:1.9
  }

  .btn-pink,.btn-ghost{
    width:100%;
    justify-content:center;
    padding:14px 20px
  }

  .news-bar{
    width:100%
  }

  .news-bar-head{
    margin-bottom:28px
  }

  .news-bar .title{
    line-height:1.7
  }

  .svc-strip,.career-cards,.ag-grid,.nums{
    grid-template-columns:1fr
  }

  .scard-h{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:16px 18px
  }

  .scard-h .name{
    flex:0 0 auto;
    font-size:16px
  }

  .scard-h .desc{
    font-size:14.5px;
    line-height:1.65
  }

  .contact-info .tel{
    font-size:26px
  }

  .greet-grid .photo-block.tall::before{
    inset:-6px -8px -6px 8px
  }

  .theme-switcher{
    left:50%;
    right:auto;
    bottom:14px;
    transform:translateX(-50%)
  }
}

@media (min-width:721px){
  body{
    padding-top:96px
  }

  header.top{
    background:#fff;
    border-bottom:1px solid rgba(232,236,241,.9);
    backdrop-filter:none
  }

  header.top .wrap.row{
    height:96px;
    max-width:none;
    padding:0 clamp(52px,5vw,74px)
  }

  header.top .logo{
    font-size:34px;
    gap:12px
  }

  header.top .logo .mk{
    width:38px;
    height:38px
  }

  header.top nav{
    display:flex!important;
    align-items:center;
    gap:clamp(26px,3vw,44px);
    margin-left:auto;
    margin-right:34px
  }

  header.top nav a,
  header.top .desktop-service-toggle{
    font-size:14px;
    font-weight:900;
    letter-spacing:.01em;
    color:var(--ink);
    border-bottom:0;
    padding:8px 0;
    white-space:nowrap
  }

  header.top nav a.on,
  header.top .desktop-service-toggle.on{
    color:var(--ink);
    border-bottom-color:transparent
  }

  header.top nav a:hover,
  header.top .desktop-service-toggle:hover{
    color:var(--pink)
  }

  header.top nav .desktop-service-panel a{
    font-size:13px;
    letter-spacing:0
  }

  header.top .cta{
    display:inline-flex!important;
    align-items:center;
    gap:10px;
    background:#fff;
    color:var(--pink-d);
    border:1.5px solid var(--pink);
    padding:13px 24px;
    border-radius:999px;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
    box-shadow:none
  }

  header.top .cta::before{
    content:"✉";
    font-size:15px;
    line-height:1
  }

  header.top .cta:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(var(--accent-rgb),.14)
  }

  .menu-toggle,.mobile-backdrop,.mobile-nav,.theme-switcher{
    display:none!important
  }

  .home-hero{
    min-height:calc(100svh - 96px);
    padding:0;
    background:#fff;
    overflow:hidden
  }

  .home-hero .wrap.hh-grid{
    max-width:none;
    width:100%;
    margin:0;
    padding:0;
    height:clamp(620px,calc(100svh - 96px),760px);
    min-height:0;
    display:block;
    position:relative;
    isolation:isolate
  }

  .home-hero::before,.home-hero::after{
    display:none
  }

  .hero-copy{
    position:absolute;
    z-index:5;
    left:clamp(82px,8vw,124px);
    right:auto;
    top:50%;
    bottom:auto;
    width:min(38vw,520px);
    max-width:520px;
    padding:0;
    margin:0;
    text-align:left;
    transform:translateY(-48%)
  }

  .hero-copy.reveal.in{
    transform:translateY(-48%)
  }

  .hero-copy::before{
    inset:-86px -150px -86px -86px;
    border-radius:0;
    background:radial-gradient(ellipse 78% 78% at 18% 50%,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 52%,rgba(255,255,255,.7) 72%,rgba(255,255,255,0) 100%);
    filter:blur(10px)
  }

  .hero-eyebrow-main{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:18px;
    margin:0 0 34px
  }

  .hero-eyebrow-main .hero-eyebrow-line{
    display:block;
    order:1;
    width:52px;
    height:2px;
    flex:0 0 52px
  }

  .hero-eyebrow-main .hero-eyebrow-text{
    order:2;
    font-size:14px;
    letter-spacing:.18em;
    line-height:1.4
  }

  .home-hero h1{
    font-size:clamp(58px,5.7vw,84px);
    line-height:1.25;
    letter-spacing:.03em;
    margin:0 0 34px
  }

  .home-hero h1 .hero-accent{
    display:inline;
    color:var(--pink);
    background:transparent;
    border-radius:0;
    padding:0;
    line-height:inherit;
    box-shadow:none
  }

  .home-hero p.lead{
    font-size:18px;
    line-height:1.8;
    font-weight:900;
    margin:0 0 30px;
    max-width:360px
  }

  .hero-actions{
    display:none
  }

  .hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    min-width:210px;
    height:54px;
    border-radius:999px;
    font-size:15px;
    font-weight:900;
    letter-spacing:.04em;
    transition:transform 180ms,box-shadow 180ms,background 180ms,color 180ms
  }

  .hero-btn:hover{
    transform:translateY(-2px)
  }

  .hero-btn-primary{
    background:var(--pink);
    color:#fff;
    box-shadow:0 12px 24px rgba(var(--accent-rgb),.22)
  }

  .hero-btn-secondary{
    background:#fff;
    color:var(--pink-d);
    border:1.5px solid var(--pink);
    box-shadow:0 10px 24px rgba(20,30,50,.06)
  }

  .hero-visual{
    position:absolute;
    z-index:1;
    top:clamp(58px,7.5vh,84px);
    right:0;
    left:auto;
    width:min(60vw,980px);
    max-width:none;
    height:80%;
    aspect-ratio:auto;
    margin:0;
    transform:none!important;
    opacity:1;
    pointer-events:none;
    overflow:hidden;
    border-radius:0;
    background:#fff;
    box-shadow:none
  }

  .hero-visual.reveal,.hero-visual.reveal.in{
    opacity:1;
    transform:none!important
  }

  .hero-visual::before{
    display:none
  }

  .hero-visual::after{
    content:"";
    display:block;
    position:absolute;
    left:-15%;
    right:-5%;
    bottom:-230px;
    z-index:2;
    height:260px;
    background:#fff;
    border-radius:0 0 0 100% / 0 0 0 72%;
    transform:rotate(-5deg);
    pointer-events:none
  }

  .hh-grid .hv{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:auto
  }

  .hh-grid .hv::before{
    content:"";
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 7%,rgba(255,255,255,.52) 18%,rgba(255,255,255,0) 32%);
    pointer-events:none
  }

  .hh-grid .hv .hero-photo,.hh-grid .hv .hero-photo img{
    border-radius:0
  }

  .hh-grid .hv .hero-photo img{
    -o-object-fit:contain;
       object-fit:contain;
    -o-object-position:center top;
       object-position:center top
  }

  .hero-lineup{
    display:flex;
    max-width:430px;
    margin-top:0;
    gap:10px 12px;
    font-size:14px;
    line-height:2;
    color:var(--ink-mid);
    font-weight:900;
    letter-spacing:.12em
  }

  .hero-lineup .dot{
    width:4px;
    height:4px;
    flex:0 0 4px;
    background:var(--pink);
    opacity:.55
  }

  .hero-lineup .line-break{
    flex-basis:100%;
    height:0
  }

  .hero-sub-visual,.hero-scroll{
    display:none
  }
}

@media (min-width:721px) and (max-width:1100px){
  body{
    padding-top:88px
  }

  header.top .wrap.row{
    height:88px;
    padding:0 20px
  }

  header.top .logo{
    font-size:24px;
    gap:8px
  }

  header.top .logo .mk{
    width:30px;
    height:30px
  }

  header.top nav{
    gap:10px;
    margin-right:12px
  }

  header.top nav a,
  header.top .desktop-service-toggle{
    font-size:10.5px;
    letter-spacing:0
  }

  header.top .desktop-service-panel{
    width:260px;
    left:0;
    transform:none
  }

  header.top nav .desktop-service-panel a{
    font-size:12px
  }

  header.top .cta{
    gap:6px;
    padding:10px 13px;
    font-size:10.5px
  }

  .home-hero{
    min-height:calc(100svh - 88px)
  }

  .home-hero .wrap.hh-grid{
    height:clamp(560px,calc(100svh - 88px),680px)
  }

  .hero-copy{
    left:24px;
    width:min(43vw,400px);
    max-width:400px
  }

  .hero-copy::before{
    inset:-72px -120px -90px -58px
  }

  .home-hero h1{
    font-size:clamp(46px,6.2vw,64px)
  }

  .home-hero p.lead{
    font-size:16px
  }

  .hero-actions{
    gap:16px
  }

  .hero-btn{
    min-width:164px;
    height:48px;
    font-size:13px
  }

  .hero-visual{
    top:46px;
    width:min(64vw,590px);
    height:80%
  }

  .hero-visual::after{
    bottom:-200px;
    height:230px
  }

  .hero-visual::before{
    display:none
  }
}


/* Header logo balance */
header.top .logo{
  gap:8px
}

header.top .logo .mk{
  flex:0 0 auto;
  background-size:150%;
  background-repeat:no-repeat;
  background-position:center
}

@media (min-width:721px){
  header.top .logo .mk{
    width:42px;
    height:42px
  }
}

@media (max-width:720px){
  header.top .logo{
    gap:7px
  }

  header.top .logo .mk{
    width:38px;
    height:38px
  }
}

@media (max-width:540px){
  header.top .logo .mk{
    width:34px;
    height:34px
  }
}