/* UNIQUO website styles. Brand: purple #70428B, orange #E26424 (buttons #C9500F), navy #2B1838.
   Edit the :root variables below to change colours site-wide. One rule per line. */

:root {
   --navy: #2B1838;
   --navy2: #4B2A63;
   --or: #E26424;
   --or2: #B8470F;
   --bg: #F7F2FA;
   --tx: #2B1838;
   --mu: #5D5068;
   --ln: #E6DCEE;
   --r: 16px;
   --pu: #70428B;
   --orb: #C9500F;
   --ort: #B8470F
}

* {
   box-sizing: border-box;
   margin: 0
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
}

body {
   font: 400 17px/1.65 "Plus Jakarta Sans", system-ui, sans-serif;
   color: var(--tx);
   background: #fff;
   padding-top: env(safe-area-inset-top, 0)
}

h1,
h2,
h3 {
   color: var(--navy);
   letter-spacing: -.03em;
   line-height: 1.08;
   font-weight: 800
}

h1 {
   font-size: clamp(2.8rem, 7.2vw, 5.6rem)
}

h2 {
   font-size: clamp(1.9rem, 3.6vw, 2.9rem)
}

h3 {
   font-size: 1.2rem;
   letter-spacing: -.01em
}

p {
   color: var(--mu)
}

a {
   color: inherit
}

.w {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px
}

section {
   padding: 84px 0
}

:focus-visible {
   outline: 3px solid var(--or);
   outline-offset: 3px
}

.btn {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   background: var(--or);
   color: #fff;
   font-weight: 700;
   padding: 14px 26px;
   border-radius: 100px;
   text-decoration: none;
   border: 0;
   cursor: pointer;
   font: 700 .95rem inherit;
   font-family: inherit;
   transition: .2s
}

.btn:hover {
   background: var(--or2);
   transform: translateY(-2px);
   box-shadow: 0 10px 24px #e2642455
}

.btn.o {
   background: none;
   color: var(--or);
   border: 1.5px solid var(--or)
}

.btn.o:hover {
   background: var(--or);
   color: #fff
}

header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: #ffffffee;
   backdrop-filter: blur(14px);
   transition: .25s;
   padding-top: env(safe-area-inset-top, 0)
}

header.s {
   box-shadow: 0 6px 30px #2b18381a
}

header .w {
   display: flex;
   align-items: center;
   gap: 28px;
   height: 78px
}

header img {
   height: 46px;
   display: block
}

nav {
   display: flex;
   gap: 6px;
   margin: 0 auto
}

nav>div {
   position: relative
}

nav a.t {
   display: block;
   padding: 10px 14px;
   text-decoration: none;
   font-weight: 600;
   font-size: .95rem;
   border-radius: 8px
}

nav a.t:hover,
nav a.on {
   color: var(--or)
}

.dd {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 20px 50px #2b18382e;
   padding: 10px;
   min-width: 230px;
   display: none
}

nav>div:hover .dd,
nav>div:focus-within .dd {
   display: block
}

.dd a {
   display: block;
   padding: 9px 14px;
   text-decoration: none;
   border-radius: 8px;
   font-size: .93rem;
   font-weight: 500
}

.dd a:hover {
   background: var(--bg);
   color: var(--or)
}

.bg {
   display: none;
   background: none;
   border: 0;
   font-size: 1.8rem;
   color: var(--navy);
   margin-left: auto
}

.hero {
   position: relative;
   overflow: hidden;
   background: linear-gradient(100deg, #f7f2fa 0%, #f3ecf8 35%, #fdeee4 100%);
   padding: 70px 0 130px
}

.hero .ph {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 62%;
   background: url(/images/hero.jpg) right center/cover;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
   mask-image: linear-gradient(90deg, transparent, #000 38%)
}

.hero .w {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 30px
}

.eb {
   display: flex;
   align-items: center;
   gap: 14px;
   color: var(--or);
   font-weight: 700;
   letter-spacing: .3em;
   font-size: .78rem;
   margin-bottom: 18px
}

.eb:before {
   content: "";
   width: 34px;
   height: 2px;
   background: var(--or)
}

.hero h1 span {
   color: var(--or);
   display: block
}

.hero p.l {
   color: var(--tx);
   font-size: 1.18rem;
   margin: 22px 0 32px;
   max-width: 30ch
}

.pl {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
   font-weight: 600;
   margin-left: 18px;
   font-size: .9rem
}

.pl i {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 2px solid var(--or);
   display: grid;
   place-items: center;
   background: #fff;
   color: var(--navy);
   font-style: normal;
   transition: .2s
}

.pl:hover i {
   background: var(--or);
   color: #fff;
   transform: scale(1.1)
}

.gl {
   align-self: flex-start;
   width: 260px;
   background: #2b183899;
   backdrop-filter: blur(14px);
   color: #fff;
   border-radius: var(--r);
   padding: 24px;
   border: 1px solid #ffffff2e
}

.gl h3 {
   color: #fff;
   font-size: 1.3rem
}

.gl:before {
   content: "";
   display: block;
   width: 26px;
   height: 3px;
   background: var(--or);
   margin-bottom: 14px
}

.gl a {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 9px 0;
   text-decoration: none;
   font-size: .9rem;
   font-weight: 500
}

.gl a:hover {
   color: var(--or)
}

.gl b {
   color: var(--or)
}

.bar {
   position: relative;
   margin: -56px auto 0;
   max-width: 1152px;
   background: #fff;
   border-radius: var(--r);
   box-shadow: 0 20px 60px #2b183826;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding: 22px 12px
}

.bar div {
   padding: 6px 24px;
   border-left: 1px solid var(--ln)
}

.bar div:first-child {
   border: 0
}

.bar b {
   display: block;
   font-size: 2rem;
   color: var(--navy);
   line-height: 1.1;
   font-weight: 800
}

.bar span {
   font-size: .88rem;
   color: var(--mu)
}

.hd {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 36px;
   align-items: start
}

.sv {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px
}

.cd {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: var(--r);
   overflow: hidden;
   text-decoration: none;
   transition: .25s;
   display: block
}

.cd:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 50px #2b183824;
   border-color: var(--or)
}

.cd img {
   width: 100%;
   height: 120px;
   object-fit: cover;
   display: block;
   transition: .5s
}

.cd:hover img {
   transform: scale(1.08)
}

.cd .im {
   overflow: hidden
}

.cd div.t {
   padding: 16px
}

.cd h3 {
   margin: 4px 0
}

.cd p {
   font-size: .84rem;
   line-height: 1.45
}

.cd em {
   font-style: normal;
   color: var(--or);
   font-weight: 700;
   float: right
}

.dk {
   background: linear-gradient(160deg, var(--navy), #4b2a63);
   color: #fff
}

.dk h2 {
   color: #fff
}

.dk p {
   color: #d8cce2
}

.cr {
   display: flex;
   gap: 14px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 6px 2px 20px;
   scrollbar-width: none
}

.cr::-webkit-scrollbar {
   display: none
}

.it {
   flex: 0 0 190px;
   height: 210px;
   border-radius: 14px;
   background-size: cover;
   background-position: center;
   scroll-snap-align: start;
   position: relative;
   overflow: hidden;
   transition: .3s
}

.it:hover {
   transform: translateY(-6px);
   box-shadow: 0 0 0 2px var(--or)
}

.it span {
   position: absolute;
   inset: auto 0 0;
   padding: 34px 14px 14px;
   background: linear-gradient(transparent, #06142fe6);
   color: #fff;
   font-weight: 700;
   font-size: .92rem;
   line-height: 1.25
}

.ar {
   display: flex;
   gap: 10px
}

.ar button {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 1.5px solid #fff6;
   background: none;
   color: #fff;
   font-size: 1.2rem;
   cursor: pointer
}

.ar button:hover {
   background: var(--or);
   border-color: var(--or)
}

.g {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
   margin-top: 34px
}

.bx {
   background: var(--bg);
   border-radius: var(--r);
   padding: 28px;
   border: 1px solid var(--ln)
}

.bx i {
   display: grid;
   place-items: center;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--navy);
   color: var(--or);
   font-style: normal;
   font-weight: 800;
   margin-bottom: 16px
}

.sub {
   background: linear-gradient(100deg, var(--navy), #4b2a63);
   color: #fff;
   padding: 80px 0 70px;
   position: relative;
   overflow: hidden
}

.sub:after {
   content: "";
   position: absolute;
   right: -80px;
   top: -80px;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: var(--or);
   opacity: .18
}

.sub h1 {
   color: #fff;
   font-size: clamp(2.2rem, 5vw, 4rem)
}

.sub p {
   color: #e0d5ea;
   margin-top: 16px;
   font-size: 1.15rem;
   max-width: 56ch
}

.bc {
   font-size: .85rem;
   color: #cdbfda;
   margin-bottom: 14px
}

.bc a {
   text-decoration: none
}

.two {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 48px;
   align-items: center
}

.two img {
   width: 100%;
   border-radius: var(--r);
   box-shadow: 0 24px 60px #2b183830
}

.ck {
   list-style: none;
   padding: 0
}

.ck li {
   padding: 10px 0 10px 34px;
   position: relative;
   border-bottom: 1px solid var(--ln)
}

.ck li:before {
   content: "✓";
   position: absolute;
   left: 0;
   color: #fff;
   background: var(--or);
   width: 22px;
   height: 22px;
   border-radius: 50%;
   font-size: .75rem;
   display: grid;
   place-items: center;
   top: 13px
}

details {
   border-bottom: 1px solid var(--ln);
   padding: 20px 0
}

summary {
   cursor: pointer;
   font-weight: 700;
   color: var(--navy);
   font-size: 1.1rem
}

details p {
   margin-top: 10px
}

.cta {
   background: var(--or);
   color: #fff;
   padding: 60px 0
}

.cta .w {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   flex-wrap: wrap
}

.cta h2 {
   color: #fff
}

.cta p {
   color: #fff
}

.cta .btn {
   background: var(--navy)
}

input,
select,
textarea {
   width: 100%;
   padding: 14px;
   border: 1.5px solid var(--ln);
   border-radius: 12px;
   font: inherit;
   margin-bottom: 12px;
   background: #fff
}

input:focus,
select:focus,
textarea:focus {
   border-color: var(--or);
   outline: 0
}

footer {
   background: #1f1029;
   color: #cdbfda;
   padding: 60px 0 30px;
   font-size: .93rem
}

footer .w {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1fr;
   gap: 30px
}

footer h3 {
   color: #fff;
   font-size: 1rem;
   margin-bottom: 10px
}

footer a {
   display: block;
   text-decoration: none;
   padding: 4px 0
}

footer a:hover {
   color: var(--or)
}

footer p {
   color: #cdbfda
}

.wa {
   position: fixed;
   right: 18px;
   bottom: calc(18px + env(safe-area-inset-bottom, 0));
   background: #25D366;
   color: #052e12;
   font-weight: 700;
   border-radius: 100px;
   padding: 13px 20px;
   text-decoration: none;
   z-index: 40;
   box-shadow: 0 10px 30px #0004
}

.rv {
   opacity: 0;
   transform: translateY(24px);
   transition: .7s
}

.rv.in {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   * {
      transition: none !important;
      scroll-behavior: auto
   }

   .rv {
      opacity: 1;
      transform: none
   }
}

@media(max-width:980px) {
   .sv {
      grid-template-columns: repeat(2, 1fr)
   }

   .hd,
   .two,
   footer .w {
      grid-template-columns: 1fr
   }

   .gl {
      display: none
   }

   .hero .ph {
      width: 100%;
      opacity: .35
   }

   .bar {
      grid-template-columns: 1fr 1fr;
      margin: -40px 16px 0
   }

   .bar div:nth-child(3) {
      border: 0
   }

   .bg {
      display: block
   }

   nav {
      display: none;
      position: absolute;
      top: 78px;
      left: 0;
      right: 0;
      background: #fff;
      flex-direction: column;
      padding: 14px;
      box-shadow: 0 20px 40px #0003
   }

   nav.open {
      display: flex
   }

   .dd {
      display: block;
      position: static;
      box-shadow: none;
      padding: 0 0 0 14px
   }

   header .btn {
      display: none
   }

   section {
      padding: 60px 0
   }
}

.btn {
   font-weight: 700;
   font-size: .95rem
}

.pb {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   background: var(--or);
   width: 0;
   z-index: 99
}

nav>div.mg {
   position: static
}

.mega {
   position: absolute;
   left: 50%;
   top: 100%;
   transform: translateX(-50%);
   width: min(1000px, 96vw);
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 30px 70px #2b183838;
   padding: 26px;
   display: none;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px
}

nav>div.mg:hover .mega,
nav>div.mg:focus-within .mega {
   display: grid
}

.mega h4 {
   color: var(--or);
   font-size: .78rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   margin-bottom: 8px
}

.mega a {
   display: block;
   padding: 6px 0;
   text-decoration: none;
   font-size: .9rem;
   font-weight: 500
}

.mega a:hover {
   color: var(--or);
   padding-left: 4px
}

nav a.vc {
   border: 1.5px solid var(--navy);
   border-radius: 100px;
   padding: 8px 16px
}

.hero .ph {
   aspect-ratio: 690/466;
   height: 100%;
   width: auto;
   right: calc(max(0px, (100vw - 1200px)/2) + 90px);
   bottom: 0;
   top: 0;
   left: auto;
   position: absolute;
   overflow: hidden;
   background: none;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%, #000 94%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 46%, #000 94%, transparent)
}

.ph img {
   width: 100%;
   height: 100%;
   display: block
}

.ph:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   height: 60px;
   top: -60px;
   background: linear-gradient(transparent, #e2642440, transparent);
   animation: sc 5s linear infinite
}

@keyframes sc {
   to {
      top: 100%
   }
}

.hs {
   position: absolute;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 0;
   background: var(--or);
   color: #fff;
   font-weight: 800;
   cursor: pointer;
   z-index: 3
}

.hs:before {
   content: "";
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 2px solid var(--or);
   animation: pu 2s infinite
}

@keyframes pu {
   to {
      transform: scale(1.7);
      opacity: 0
   }
}

.hs span {
   position: absolute;
   bottom: 130%;
   left: 50%;
   transform: translateX(-50%);
   width: 190px;
   background: var(--navy);
   color: #fff;
   font: 500 .8rem/1.4 inherit;
   padding: 10px 12px;
   border-radius: 10px;
   display: none;
   text-align: left
}

.hs:hover span,
.hs:focus span,
.hs.on span {
   display: block
}

.rot {
   color: var(--or);
   display: inline-block;
   transition: .3s
}

.rot.o {
   opacity: 0;
   transform: translateY(8px)
}

.fd {
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 20px 60px #2b18381f;
   padding: 30px;
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 30px;
   align-items: center
}

select {
   width: 100%;
   padding: 14px;
   border: 1.5px solid var(--ln);
   border-radius: 12px;
   font: inherit;
   background: #fff;
   margin-bottom: 12px
}

.res {
   background: var(--bg);
   border-radius: 14px;
   padding: 22px;
   border-left: 4px solid var(--or)
}

.tb {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 18px
}

.tb button,
.ch {
   border: 1.5px solid var(--ln);
   background: #fff;
   border-radius: 100px;
   padding: 9px 16px;
   font: 600 .88rem inherit;
   font-family: inherit;
   cursor: pointer;
   color: var(--navy);
   transition: .2s;
   text-decoration: none;
   display: inline-block
}

.tb button:hover,
.ch:hover {
   border-color: var(--or)
}

.tb button.on,
.ch.on {
   background: var(--navy);
   color: #fff;
   border-color: var(--navy)
}

.dk .tb button {
   background: #ffffff14;
   color: #fff;
   border-color: #ffffff30
}

.dk .tb button.on {
   background: var(--or);
   border-color: var(--or)
}

.pn {
   background: #ffffff0d;
   border: 1px solid #ffffff26;
   border-radius: 18px;
   padding: 30px
}

.pn h3 {
   color: #fff;
   font-size: 1.8rem
}

.mq {
   overflow: hidden;
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}

.mq div {
   display: flex;
   gap: 16px;
   width: max-content;
   animation: mq 40s linear infinite
}

.mq:hover div {
   animation-play-state: paused
}

.mq span {
   padding: 16px 28px;
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 12px;
   font-weight: 800;
   color: var(--navy);
   white-space: nowrap
}

@keyframes mq {
   to {
      transform: translateX(-50%)
   }
}

.tl {
   position: relative;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
   margin-top: 34px
}

.tl:before {
   content: "";
   position: absolute;
   top: 24px;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--ln)
}

.tl .st {
   position: relative;
   padding-top: 56px
}

.tl .st:before {
   content: attr(data-n);
   position: absolute;
   top: 0;
   left: 0;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 800;
   transition: .5s .2s
}

.tl .st.in:before {
   background: var(--or);
   box-shadow: 0 0 0 8px #e2642426
}

.job {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 14px;
   padding: 20px 24px;
   margin-bottom: 14px
}

.job summary {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap
}

.job small {
   color: var(--mu);
   font-weight: 500;
   font-size: .9rem
}

.tm {
   text-align: center
}

.av {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--navy), #70428b);
   color: #fff;
   display: grid;
   place-items: center;
   font: 800 1.6rem inherit;
   margin: 0 auto 12px;
   border: 4px solid var(--or)
}

.aw {
   display: flex;
   gap: 18px
}

.aw b {
   flex: 0 0 56px;
   height: 56px;
   border-radius: 14px;
   background: var(--or);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 1.5rem
}

.gl2 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 14px;
   margin-top: 24px
}

.gl2 button {
   border: 0;
   padding: 0;
   border-radius: 14px;
   overflow: hidden;
   cursor: zoom-in;
   aspect-ratio: 4/3
}

.gl2 img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .4s
}

.gl2 button:hover img {
   transform: scale(1.1)
}

.lb {
   position: fixed;
   inset: 0;
   background: #000d;
   display: none;
   place-items: center;
   z-index: 90;
   padding: 20px
}

.lb.on {
   display: grid
}

.lb img {
   max-width: 92vw;
   max-height: 86vh;
   border-radius: 12px
}

.pill {
   display: inline-block;
   background: #e264241f;
   color: var(--or2);
   padding: 3px 12px;
   border-radius: 100px;
   font-size: .78rem;
   font-weight: 700
}

.fm {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 12px
}

.fm .f2 {
   grid-column: 1/-1
}

.side {
   position: sticky;
   top: 100px;
   background: var(--navy);
   color: #fff;
   border-radius: 18px;
   padding: 26px
}

.side h3 {
   color: #fff
}

.side p {
   color: #d8cce2;
   font-size: .9rem;
   margin-bottom: 12px
}

.side .btn {
   width: 100%;
   justify-content: center
}

.lay {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 40px;
   align-items: start
}

.bt {
   position: fixed;
   left: 18px;
   bottom: calc(18px + env(safe-area-inset-bottom, 0));
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 0;
   background: var(--navy);
   color: #fff;
   cursor: pointer;
   z-index: 40;
   opacity: 0;
   pointer-events: none;
   transition: .3s
}

.bt.on {
   opacity: 1;
   pointer-events: auto
}

.sub .si {
   position: absolute;
   right: max(24px, calc((100vw - 1200px)/2));
   top: 50%;
   transform: translateY(-50%);
   width: min(380px, 32vw);
   aspect-ratio: 4/3;
   object-fit: cover;
   border-radius: 20px;
   box-shadow: 0 30px 60px #0008;
   border: 3px solid #ffffff30;
   z-index: 1
}

.sub .w {
   position: relative;
   z-index: 2;
   max-width: 1200px
}

.sub p {
   max-width: min(56ch, 52%)
}

@media(max-width:980px) {
   .sub .si {
      display: none
   }

   .sub p {
      max-width: none
   }
}

@media(max-width:980px) {

   .fd,
   .lay,
   .fm {
      grid-template-columns: 1fr
   }

   .mega {
      position: static;
      transform: none;
      display: grid;
      grid-template-columns: 1fr;
      box-shadow: none;
      padding: 0 0 0 12px;
      width: auto
   }

   .hero {
      display: flex;
      flex-direction: column-reverse;
      padding-bottom: 90px
   }

   .hero .ph {
      position: relative;
      right: auto;
      width: 100%;
      height: auto;
      margin-top: 30px;
      opacity: 1
   }

   .hero .w {
      flex-direction: column
   }

   .g[style*='1fr 1fr'] {
      grid-template-columns: 1fr !important
   }

   .side {
      position: static
   }

   .tl:before {
      display: none
   }
}

[hidden] {
   display: none !important
}

img {
   max-width: 100%
}

h1,
h2 {
   color: var(--pu)
}

h3 {
   color: var(--navy)
}

.sub h1,
.dk h2,
.cta h2,
.dk h3,
.side h3,
.pn h3 {
   color: #fff
}

.bx i {
   color: #fff;
   background: var(--pu)
}

.btn {
   background: var(--orb)
}

.btn:hover {
   background: var(--ort);
   box-shadow: 0 10px 24px #c9500f55
}

.btn.o {
   background: none;
   color: var(--orb);
   border-color: var(--orb)
}

.btn.o:hover {
   background: var(--orb);
   color: #fff
}

.eb,
.cd em,
.pill,
.mega h4 {
   color: var(--ort)
}

.eb:before {
   background: var(--or)
}

.dk .eb,
.sub .eb {
   color: #F4A877
}

.cta {
   background: linear-gradient(100deg, var(--pu), var(--navy))
}

.cta .btn {
   background: var(--orb)
}

.cta .btn:hover {
   background: var(--ort)
}

.hs {
   background: var(--orb)
}

.hs:before {
   border-color: var(--or)
}

.bar b,
nav a.t:hover,
nav a.on {
   color: var(--pu)
}

.sub:after {
   background: var(--or)
}

.ck li:before,
.aw b,
.st.in:before {
   background: var(--orb)
}

.tl .st:before {
   background: var(--pu)
}

.hero {
   background: linear-gradient(100deg, #F7F2FA 0%, #F3ECF8 38%, #FDEEE4 100%)
}

.hero h1 {
   font-size: clamp(2.4rem, 7vw, 5.2rem)
}

.hero h1,
.hero .rot {
   color: var(--pu)
}

.hero h1 span,
.hero .rot {
   color: var(--or)
}

.hero p.l {
   color: var(--tx)
}

.gl {
   background: #2b1838cc
}

.gl b,
.gl a:hover {
   color: #F4A877
}

header .w {
   height: 78px
}

nav {
   align-self: stretch
}

nav>div {
   display: flex;
   align-items: center
}

nav>div.mg {
   position: static
}

header .w {
   position: relative
}

.dd,
.mega {
   z-index: 60
}

.dd {
   top: 100%
}

.mega {
   top: 100%;
   left: 0;
   transform: none;
   right: 0;
   margin: 0 auto
}

nav>div:hover>.dd,
nav>div.open>.dd {
   display: block
}

nav>div.mg:hover>.mega,
nav>div.mg.open>.mega {
   display: grid
}

nav a.vc {
   border-color: var(--pu);
   color: var(--pu)
}

nav a.vc:hover {
   background: var(--pu);
   color: #fff
}

.mega a small {
   display: block;
   color: var(--mu);
   font-size: .78rem;
   font-weight: 400
}

.trust {
   grid-column: 1/-1;
   border-top: 1px solid var(--ln);
   margin-top: 14px;
   padding-top: 16px;
   display: flex;
   align-items: center;
   gap: 18px
}

.trust>span {
   font-size: .76rem;
   font-weight: 700;
   letter-spacing: .14em;
   color: var(--ort);
   white-space: nowrap
}

.trust .mq {
   flex: 1;
   min-width: 0
}

.bar .trust .mq div {
   padding: 0;
   border: 0;
   gap: 34px;
   align-items: center;
   animation-duration: 48s
}

.lgo {
   height: 34px;
   width: auto;
   max-width: 120px;
   object-fit: contain;
   filter: grayscale(1) contrast(1.05);
   opacity: .8;
   transition: .25s;
   flex: none
}

.lgo:hover {
   filter: none;
   opacity: 1
}

.lgt {
   flex: none;
   font-weight: 800;
   color: var(--pu);
   font-size: 1.15rem;
   white-space: nowrap
}

.bar {
   align-items: start
}

.vp {
   background: none;
   border: 0;
   cursor: pointer;
   font-family: inherit
}

.vm {
   position: fixed;
   inset: 0;
   background: #1f1029ee;
   display: none;
   place-items: center;
   z-index: 95;
   padding: 16px
}

.vm.on {
   display: grid
}

.vm video {
   width: min(960px, 94vw);
   max-height: 80vh;
   border-radius: 14px;
   background: #000
}

.vm button {
   position: absolute;
   top: 14px;
   right: 18px;
   font-size: 2rem;
   background: none;
   border: 0;
   color: #fff;
   cursor: pointer
}

.mb {
   display: none
}

.cdp {
   display: flex;
   flex-direction: column
}

.cdp .t {
   flex: 1
}

.post {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: var(--r);
   padding: 26px;
   text-decoration: none;
   transition: .25s
}

.post:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 44px #2b183826;
   border-color: var(--or)
}

.post h3 {
   margin: 10px 0 8px
}

.post small {
   color: var(--mu)
}

.art {
   max-width: 760px;
   margin: 0 auto
}

.art h2 {
   font-size: 1.7rem;
   margin: 34px 0 10px
}

.art p,
.art li {
   color: #3d2d4a;
   max-width: none;
   margin-bottom: 12px
}

.art ul {
   padding-left: 22px
}

.art .meta {
   color: var(--mu);
   font-size: .9rem;
   margin-bottom: 24px
}

.tmc {
   background: #fff;
   border: 1px solid var(--ln);
   border-left: 4px solid var(--or);
   border-radius: var(--r);
   padding: 26px
}

.tmc q {
   display: block;
   font-size: 1.1rem;
   color: var(--tx);
   margin-bottom: 14px;
   quotes: none
}

.tmc b {
   color: var(--pu)
}

.al {
   flex: none;
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   border-radius: 12px;
   margin-bottom: 12px;
   background: var(--bg)
}

.av img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover
}

.av {
   overflow: hidden
}

.chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px
}

.chips span {
   background: var(--bg);
   border: 1px solid var(--ln);
   border-radius: 100px;
   padding: 6px 14px;
   font-size: .88rem;
   color: var(--tx)
}

.hd>div:first-child {
   min-width: 0
}

.sv .cd,
.g>*,
.lay>*,
.two>* {
   min-width: 0
}

h1,
h2,
h3,
p,
li {
   overflow-wrap: break-word
}

.dd,
.mega {
   display: block;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity .12s .3s, visibility 0s .42s
}

.mega {
   display: grid
}

nav>div:hover>.dd,
nav>div.open>.dd,
nav>div:focus-within>.dd,
nav>div:hover>.mega,
nav>div.mg.open>.mega,
nav>div.mg:focus-within>.mega {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   transition-delay: 0s
}

@media(max-width:980px) {
   nav {
      overflow-y: auto;
      max-height: calc(100vh - 78px);
      align-self: auto
   }

   nav>div {
      display: block
   }

   .mega,
   .dd {
      display: none;
      position: static;
      box-shadow: none;
      margin: 0;
      padding: 0 0 8px 12px;
      width: auto;
      transform: none
   }

   nav>div.open>.dd,
   nav>div.mg.open>.mega {
      display: block;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition: none
   }

   .mega,
   .dd {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition: none
   }

   nav>div.mg:hover>.mega,
   nav>div:hover>.dd {
      display: none
   }

   nav>div.open:hover>.dd,
   nav>div.mg.open:hover>.mega {
      display: block
   }

   .mega {
      grid-template-columns: 1fr
   }

   .trust {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px
   }

   .trust .mq {
      width: 100%
   }

   .hero .w {
      gap: 16px
   }
}

@media(max-width:700px) {
   .mb {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 70;
      background: var(--navy);
      padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0));
      gap: 8px
   }

   .mb a {
      color: #fff;
      text-align: center;
      font-weight: 700;
      font-size: .85rem;
      padding: 11px 4px;
      border-radius: 10px;
      text-decoration: none;
      background: #ffffff1a
   }

   .mb a.q {
      background: var(--orb)
   }

   .wa,
   .bt {
      display: none
   }

   body {
      padding-bottom: 64px
   }

   .bar {
      grid-template-columns: 1fr 1fr
   }

   .bar>div {
      padding: 6px 12px
   }

   section {
      padding: 52px 0
   }

   .pl {
      margin: 14px 0 0 0;
      display: flex
   }
}

.ic {
   width: 1.15em;
   height: 1.15em;
   flex: none;
   vertical-align: -.2em
}

nav a.t,
header .btn {
   white-space: nowrap
}

header .w {
   gap: 18px
}

nav a.t {
   padding: 10px 12px
}

nav a.t {
   display: flex;
   align-items: center;
   gap: 8px;
   position: relative;
   transition: color .2s
}

nav a.t .ic {
   color: var(--pu);
   transition: transform .25s, color .2s
}

nav a.t .cv {
   width: .85em;
   height: .85em;
   opacity: .55;
   transition: transform .25s;
   margin-left: -2px
}

nav>div:hover>a.t .cv,
nav>div.open>a.t .cv {
   transform: rotate(180deg)
}

nav>div:hover>a.t>.ic:first-child {
   transform: translateY(-2px);
   color: var(--ort)
}

nav a.t:after {
   content: "";
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 4px;
   height: 3px;
   border-radius: 3px;
   background: linear-gradient(90deg, var(--pu), var(--or));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .28s
}

nav>div:hover>a.t:after,
nav a.t.on:after {
   transform: scaleX(1)
}

nav a.t.vc {
   background: linear-gradient(135deg, var(--pu), #9566b0);
   color: #fff;
   border: 0;
   border-radius: 100px;
   padding: 10px 18px;
   box-shadow: 0 8px 20px #70428b40;
   align-self: center
}

nav a.t.vc .ic,
nav>div:hover>a.t.vc>.ic:first-child {
   color: #fff
}

nav a.t.vc:after {
   display: none
}

nav a.t.vc:hover {
   background: linear-gradient(135deg, var(--orb), var(--or));
   color: #fff;
   box-shadow: 0 8px 20px #e2642450
}

.btn .ic {
   width: 1.1em;
   height: 1.1em;
   transition: transform .2s
}

.btn:hover .ic:last-child {
   transform: translateX(4px)
}

.bd {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--pu), #9566b0);
   color: #fff;
   display: grid;
   place-items: center;
   box-shadow: 0 6px 16px #70428b44;
   flex: none;
   font-size: 1.15rem
}

.bd.s {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   box-shadow: none;
   font-size: 1rem;
   background: var(--bg);
   color: var(--pu);
   transition: .2s
}

.mega>div:nth-child(2) .bd,
.mega>div:nth-child(4) .bd {
   background: linear-gradient(135deg, var(--orb), var(--or));
   box-shadow: 0 6px 16px #e2642444
}

.mega a.mgh {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 0 0 12px;
   margin-bottom: 8px;
   border-bottom: 1px dashed var(--ln)
}

.mega a.mgh b {
   display: block;
   font-size: 1rem;
   color: var(--navy)
}

.mega a.mgh small {
   margin: 0;
   font-size: .78rem;
   color: var(--mu)
}

.mega a.i {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 7px 10px;
   margin: 0 -10px;
   border-radius: 9px;
   color: var(--navy);
   transition: .2s
}

.mega a.i:before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--or);
   flex: none;
   transition: .2s
}

.mega a.i:hover {
   background: var(--bg);
   color: var(--pu);
   padding-left: 14px
}

.mgf {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   background: linear-gradient(100deg, var(--bg), #fdeee4);
   padding: 14px 22px;
   font-size: .92rem
}

.mgb {
   display: flex;
   gap: 16px;
   align-items: center;
   flex-wrap: wrap
}

.mgb .btn {
   padding: 10px 20px;
   font-size: .88rem
}

.mega .wl {
   display: inline-flex;
   gap: 7px;
   align-items: center;
   font-weight: 700;
   color: var(--pu);
   padding: 6px 0
}

.mega .wl .ic {
   color: var(--ort)
}

.dd a:has(.bd) {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 8px 10px
}

.dd a b {
   display: block;
   font-weight: 600;
   color: var(--navy);
   font-size: .92rem
}

.dd a small {
   display: block;
   color: var(--mu);
   font-size: .78rem
}

.dd a:hover {
   background: var(--bg)
}

.dd a:hover .bd.s {
   background: var(--pu);
   color: #fff
}

.trust {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
   gap: 22px
}

.trust>span {
   font-size: .8rem;
   letter-spacing: .1em;
   max-width: 150px;
   white-space: normal;
   line-height: 1.35
}

.bar .trust .mq div {
   gap: 46px;
   animation-duration: 120s
}

.lgo {
   height: 48px;
   width: auto;
   max-width: none;
   filter: none;
   opacity: .95;
   flex: none
}

.trust .vall {
   white-space: nowrap;
   font-style: normal;
   font-weight: 700;
   font-size: .84rem;
   color: var(--pu);
   display: inline-flex;
   gap: 6px;
   align-items: center;
   transition: .2s
}

.trust:hover .vall {
   color: var(--ort)
}

.trust:hover .vall .ic {
   transform: translateX(4px)
}

.trust .vall .ic {
   transition: .2s
}

.bar b {
   font-variant-numeric: tabular-nums
}

.pl i .ic {
   width: 18px;
   height: 18px;
   margin-left: 2px
}

.pl:hover i {
   background: var(--or);
   color: #fff;
   border-color: var(--or);
   transform: scale(1.08)
}

.hd2 {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 34px;
   align-items: end;
   margin-bottom: 34px
}

.hd2 p {
   margin-bottom: 18px
}

.sv5 {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 24px
}

.sv5 .cd {
   grid-column: span 2;
   display: flex;
   flex-direction: column;
   border-radius: 22px;
   box-shadow: 0 12px 34px #70428b17;
   transition: .3s
}

.sv5 .cd:hover {
   transform: translateY(-6px);
   box-shadow: 0 22px 50px #70428b2b
}

.sv5 .cd:nth-child(n+4) {
   grid-column: span 3;
   flex-direction: row
}

.sv5 .im {
   aspect-ratio: 4/3;
   flex: none
}

.sv5 .cd:nth-child(n+4) .im {
   aspect-ratio: auto;
   flex: 0 0 44%
}

.sv5 .im img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.sv5 .cd .t {
   padding: 24px 26px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.sv5 .cd h3 {
   font-size: 1.3rem;
   margin-bottom: 8px
}

.sv5 .cd p {
   font-size: 1rem;
   color: var(--mu)
}

.sv5 .cd em {
   margin-top: auto;
   padding-top: 14px;
   font-size: 1.2rem
}

.tl:before {
   display: none
}

.tl {
   gap: 26px;
   margin-top: 44px;
   grid-template-columns: repeat(4, minmax(0, 1fr))
}

.tl .st {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 20px;
   padding: 40px 22px 24px;
   box-shadow: 0 10px 30px #70428b12
}

.tl .st:before {
   content: attr(data-step);
   top: -24px;
   left: 22px
}

.tl .st:after {
   content: "";
   position: absolute;
   top: -2px;
   left: 78px;
   right: -26px;
   height: 0;
   border-top: 2px dashed var(--ln)
}

.tl .st:last-child:after {
   display: none
}

.si {
   margin-bottom: 14px;
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: var(--bg);
   color: var(--pu);
   display: grid;
   place-items: center;
   font-size: 1.2rem
}

.tl .st h3 {
   margin-bottom: 8px;
   font-size: 1.12rem
}

.tl .st p {
   color: var(--mu);
   font-size: .96rem
}

.tg {
   display: inline-block;
   margin-top: 14px;
   font-weight: 700;
   font-size: .78rem;
   color: var(--ort);
   background: #fdeee4;
   padding: 5px 12px;
   border-radius: 100px
}

.chips2 {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 28px
}

.chips2 span {
   border: 1px solid #ffffff3d;
   border-radius: 100px;
   padding: 8px 18px;
   font-weight: 700;
   color: #fff;
   background: #ffffff14
}

.dk .bx i {
   background: linear-gradient(135deg, var(--orb), var(--or))
}

.dk .bx {
   background: #ffffff0f;
   border-color: #ffffff22
}

.dk .bx p {
   color: #dccfe8
}

.bx i .ic {
   width: 22px;
   height: 22px
}

.emp {
   text-align: center;
   padding: 56px 24px;
   border: 2px dashed var(--ln);
   border-radius: 22px;
   background: #fff;
   grid-column: 1/-1
}

.emp h2 {
   margin: 8px 0 10px
}

.emp p {
   margin-bottom: 22px;
   color: var(--mu)
}

/* display:flex applies ONLY above 700px so it can't override the mobile hide rule. */
.wa {
   gap: 9px;
   align-items: center
}

@media(min-width:701px) {
   .wa {
      display: flex
   }
}

.wa .ic {
   width: 22px;
   height: 22px
}

.mb a {
   display: flex;
   gap: 7px;
   align-items: center;
   justify-content: center
}

.mb .ic {
   width: 18px;
   height: 18px
}

@media(max-width:1180px) {
   nav a.t>.ic:first-child {
      display: none
   }
}

.hero .ph {
   overflow: visible;
   -webkit-mask-image: none;
   mask-image: none
}

.ph img {
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%, #000 94%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 46%, #000 94%, transparent);
   object-fit: cover
}

.hero>.w {
   pointer-events: none
}

.hero>.w>* {
   pointer-events: auto
}

.hs {
   z-index: 20
}

.hs:hover,
.hs:focus,
.hs.on {
   z-index: 30
}

.hs span {
   z-index: 31;
   width: 220px;
   box-shadow: 0 14px 34px #1f102966;
   border: 1px solid #ffffff2e;
   font-size: .84rem;
   bottom: calc(100% + 14px);
   pointer-events: none
}

.hs span:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -6px;
   border: 6px solid transparent;
   border-top-color: var(--navy)
}

.hs.r span {
   left: auto;
   right: -12px;
   transform: none
}

.hs.r span:after {
   left: auto;
   right: 18px;
   margin: 0
}

.hs.l span {
   left: -12px;
   transform: none
}

.hs.l span:after {
   left: 18px;
   margin: 0
}

.hs.b span {
   bottom: auto;
   top: calc(100% + 14px)
}

.hs.b span:after {
   top: auto;
   bottom: 100%;
   border-top-color: transparent;
   border-bottom-color: var(--navy)
}

@media(min-width:981px) {
   .mega {
      padding: 0;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid var(--ln);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      box-shadow: 0 34px 80px #2b183840
   }

   .mega>div:not(.mgf) {
      padding: 24px 22px 16px;
      border-right: 1px solid var(--ln)
   }

   .mega>div:nth-child(4) {
      border-right: 0
   }

   .mgf {
      grid-column: 1/-1
   }

   .dd {
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 30px 70px #2b183838;
      border: 1px solid var(--ln)
   }

   .dd.g2 {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      width: min(500px, 92vw);
      left: 50%;
      transform: translateX(-50%)
   }

   .dd.rs {
      width: 290px;
      left: 50%;
      transform: translateX(-50%)
   }
}

@media(max-width:980px) {
   nav a.t>.ic:first-child {
      display: inline-block
   }

   .hd2 {
      grid-template-columns: 1fr
   }

   .sv5 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .sv5 .cd,
   .sv5 .cd:nth-child(n+4) {
      grid-column: span 1;
      flex-direction: column
   }

   .sv5 .cd:nth-child(5) {
      grid-column: 1/-1;
      flex-direction: row
   }

   .sv5 .cd:nth-child(n+4) .im {
      aspect-ratio: 4/3;
      flex: none
   }

   .sv5 .cd:nth-child(5) .im {
      flex: 0 0 44%;
      aspect-ratio: auto
   }

   .tl {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .tl .st:after {
      display: none
   }

   nav a.t:after {
      display: none
   }

   nav a.t {
      padding: 12px 14px
   }

   nav a.t.vc {
      margin: 8px 14px;
      justify-content: center
   }

   .trust .vall {
      margin-top: 2px
   }
}

@media(max-width:560px) {
   .sv5 {
      grid-template-columns: 1fr
   }

   .sv5 .cd:nth-child(5) {
      flex-direction: column
   }

   .sv5 .cd:nth-child(5) .im {
      flex: none;
      aspect-ratio: 4/3
   }

   .tl {
      grid-template-columns: 1fr
   }

   .lgo {
      height: 40px
   }
}

.iph {
   position: relative;
   aspect-ratio: 4/3;
   border-radius: 24px;
   overflow: hidden;
   background: linear-gradient(145deg, var(--pu), var(--navy2));
   box-shadow: 0 26px 60px #2b183833
}

.iph img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.iph.np:after {
   content: attr(data-lbl);
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   text-align: center;
   padding: 24px;
   color: #ffffffcc;
   font-weight: 800;
   font-size: 1.3rem;
   line-height: 1.2
}

.locs {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 18px;
   grid-auto-rows: 1fr;
   margin-top: 30px
}

.loc {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 18px;
   padding: 22px;
   display: flex;
   gap: 14px;
   align-items: flex-start;
   box-shadow: 0 8px 24px #70428b0f
}

.loc b {
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 12px;
   background: var(--bg);
   color: var(--pu);
   display: grid;
   place-items: center;
   font-size: .85rem
}

.loc h3 {
   font-size: 1.02rem;
   margin-bottom: 4px
}

.loc p {
   font-size: .9rem
}

.ind {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 18px
}

.ind a {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   aspect-ratio: 4/5;
   display: block;
   text-decoration: none;
   background: linear-gradient(145deg, var(--pu), var(--navy2));
   box-shadow: 0 12px 30px #0003;
   transition: .3s
}

.ind a:hover {
   transform: translateY(-6px);
   box-shadow: 0 22px 44px #0005
}

.ind img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .5s
}

.ind a:hover img {
   transform: scale(1.07)
}

.ind span {
   position: absolute;
   inset: auto 0 0;
   padding: 50px 16px 16px;
   background: linear-gradient(transparent, #1f1029ee);
   color: #fff;
   font-weight: 700;
   line-height: 1.25;
   display: flex;
   gap: 8px;
   align-items: flex-end;
   justify-content: space-between
}

.ind span .ic {
   width: 20px;
   height: 20px;
   color: #F4A877;
   flex: none
}

.ind.lt a {
   box-shadow: 0 12px 30px #70428b2b
}

.tagrow {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 18px 0
}

.sx {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 22px
}

.sx a {
   text-decoration: none;
   border: 1.5px solid var(--ln);
   border-radius: 100px;
   padding: 7px 14px;
   font-size: .88rem;
   font-weight: 600;
   color: var(--navy);
   background: #fff;
   transition: .2s
}

.sx a:hover {
   border-color: var(--pu);
   color: var(--pu)
}

@media(max-width:1100px) {
   .ind {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }
}

@media(max-width:700px) {
   .ind {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .ind a {
      aspect-ratio: 1/1
   }

   .ind span {
      font-size: .9rem;
      padding: 40px 12px 12px
   }
}

.story {
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   gap: 56px;
   align-items: center
}

.story .ph2 {
   position: relative
}

.story .ph2 img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   border-radius: 24px;
   box-shadow: 0 30px 70px #2b183830;
   display: block;
   background: var(--bg)
}

.story .ph2 .cap {
   position: absolute;
   left: 18px;
   bottom: 18px;
   background: #fff;
   border-radius: 14px;
   padding: 10px 16px;
   font-weight: 700;
   font-size: .86rem;
   color: var(--navy);
   box-shadow: 0 10px 30px #2b183833;
   display: flex;
   gap: 8px;
   align-items: center
}

.cap .ic {
   color: var(--or)
}

.lead {
   font-size: 1.22rem;
   line-height: 1.6;
   color: var(--tx)
}

.tlv {
   position: relative;
   margin-top: 40px;
   display: grid;
   gap: 22px
}

.tlv:before {
   content: "";
   position: absolute;
   left: 27px;
   top: 10px;
   bottom: 10px;
   width: 3px;
   background: linear-gradient(var(--pu), var(--or));
   border-radius: 3px
}

.tlv>div {
   position: relative;
   padding-left: 84px;
   min-height: 56px
}

.tlv .yr .ic {
   width: 24px;
   height: 24px
}

.tlv .yr {
   position: absolute;
   left: 0;
   top: 0;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid var(--pu);
   color: var(--pu);
   display: grid;
   place-items: center;
   font-weight: 800;
   font-size: .8rem;
   z-index: 1
}

.tlv>div:last-child .yr {
   background: var(--or);
   border-color: var(--or);
   color: #fff
}

.tlv h3 {
   margin-bottom: 4px
}

.tlv p {
   max-width: 62ch
}

.abst {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px
}

.abst>div {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 20px;
   padding: 26px;
   text-align: center;
   box-shadow: 0 10px 30px #70428b12
}

.abst .ic {
   width: 30px;
   height: 30px;
   color: var(--or)
}

.abst b {
   display: block;
   font-size: 2.6rem;
   color: var(--pu);
   line-height: 1.1;
   margin: 8px 0 2px;
   font-variant-numeric: tabular-nums
}

.abst span {
   color: var(--mu);
   font-size: .95rem
}

.eq {
   display: grid;
   gap: 22px;
   grid-auto-rows: 1fr
}

.eq4 {
   grid-template-columns: repeat(4, minmax(0, 1fr))
}

.eq3 {
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

.eq2 {
   grid-template-columns: repeat(2, minmax(0, 1fr))
}

.eq>* {
   min-width: 0
}

.bl {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 20px;
   padding: 28px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 10px 30px #70428b10;
   transition: .25s
}

.bl:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 44px #70428b24
}

.bl .bd {
   margin-bottom: 16px
}

.bl h3 {
   margin-bottom: 8px
}

.bl p {
   font-size: .97rem
}

.ppl {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 26px;
   grid-auto-rows: 1fr
}

.pc {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 22px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: 0 12px 34px #70428b14;
   transition: .3s
}

.pc:hover {
   transform: translateY(-6px);
   box-shadow: 0 24px 50px #70428b2b
}

.pc .pic {
   aspect-ratio: 4/5;
   background: linear-gradient(145deg, var(--pu), var(--navy2));
   position: relative;
   overflow: hidden;
   flex: none
}

.pc .pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   display: block
}

.pc .pic.np:after {
   content: attr(data-i);
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   color: #ffffffd9;
   font-weight: 800;
   font-size: 4rem;
   letter-spacing: .04em
}

.pc .pic:before {
   content: "";
   position: absolute;
   inset: auto 0 0;
   height: 40%;
   background: linear-gradient(transparent, #2b183855);
   z-index: 1;
   pointer-events: none
}

.pc .tx {
   padding: 20px 22px 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1
}

.pc h3 {
   font-size: 1.2rem
}

.pc p {
   font-size: .93rem
}

.pc .pill {
   align-self: flex-start
}

.pc .pill.f {
   background: var(--orb);
   color: #fff
}

.rec {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
   grid-auto-rows: 1fr
}

.rec>div {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   background: #ffffff0f;
   border: 1px solid #ffffff24;
   border-radius: 18px;
   padding: 20px
}

.rec .bd {
   background: linear-gradient(135deg, var(--orb), var(--or))
}

.rec h3 {
   font-size: 1.02rem;
   margin-bottom: 4px;
   color: #fff
}

.rec p {
   font-size: .88rem;
   color: #dccfe8
}

.qt {
   font-size: clamp(1.3rem, 2.4vw, 1.9rem);
   font-weight: 700;
   line-height: 1.35;
   color: var(--navy);
   letter-spacing: -.02em;
   max-width: 880px
}

.qt span {
   color: var(--or)
}

.cs {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px
}

.cs>div {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 20px;
   padding: 24px;
   text-align: center
}

.cs b {
   font-size: 2rem;
   color: var(--pu);
   display: block;
   font-variant-numeric: tabular-nums
}

.cs span {
   font-size: .9rem;
   color: var(--mu)
}

.jb {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 22px;
   padding: 26px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   box-shadow: 0 10px 30px #70428b10;
   transition: .25s
}

.jb:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 44px #70428b24;
   border-color: var(--pu)
}

.jb .top {
   display: flex;
   gap: 14px;
   align-items: center
}

.jb h3 {
   font-size: 1.15rem
}

.jb .meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.chip {
   display: inline-flex;
   gap: 6px;
   align-items: center;
   background: var(--bg);
   border: 1px solid var(--ln);
   border-radius: 100px;
   padding: 5px 12px;
   font-size: .82rem;
   font-weight: 600;
   color: var(--navy)
}

.chip .ic {
   width: 14px;
   height: 14px;
   color: var(--pu)
}

.chip.s {
   background: #fdeee4;
   border-color: #f6d3bd;
   color: var(--ort)
}

.chip.s .ic {
   color: var(--ort)
}

.jb ul {
   list-style: none;
   padding: 0;
   display: grid;
   gap: 6px;
   font-size: .93rem;
   color: var(--mu)
}

.jb li {
   padding-left: 22px;
   position: relative
}

.jb li:before {
   content: "";
   position: absolute;
   left: 0;
   top: .6em;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--or)
}

.jb .act {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: auto;
   padding-top: 8px
}

.jb .btn {
   padding: 11px 20px;
   font-size: .88rem
}

.jb .btn.w {
   background: #128C4B
}

.jb .btn.w:hover {
   background: #0e6f3b
}

.stp {
   counter-reset: s;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px
}

.stp>div {
   background: #fff;
   border: 1px solid var(--ln);
   border-radius: 20px;
   padding: 24px;
   position: relative
}

.stp>div:before {
   counter-increment: s;
   content: counter(s);
   position: absolute;
   top: -16px;
   left: 22px;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--pu);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 800
}

.stp h3 {
   margin: 8px 0 6px;
   font-size: 1.05rem
}

.stp p {
   font-size: .92rem
}

.opn {
   background: linear-gradient(100deg, var(--pu), var(--navy));
   color: #fff;
   border-radius: 24px;
   padding: 36px;
   display: flex;
   justify-content: space-between;
   gap: 24px;
   align-items: center;
   flex-wrap: wrap
}

.opn h3 {
   color: #fff;
   font-size: 1.5rem
}

.opn p {
   color: #e0d5ea;
   margin-top: 6px
}

@media(max-width:1100px) {

   .eq4,
   .abst,
   .cs,
   .stp {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .rec {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .ppl {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media(max-width:900px) {
   .story {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .eq3 {
      grid-template-columns: 1fr
   }

   .eq2 {
      grid-template-columns: 1fr
   }
}

@media(max-width:560px) {

   .ppl,
   .rec,
   .eq4,
   .abst,
   .cs,
   .stp {
      grid-template-columns: 1fr
   }

   .tlv>div {
      padding-left: 72px
   }

   .tlv .yr .ic {
      width: 24px;
      height: 24px
   }

   .tlv .yr {
      width: 48px;
      height: 48px
   }

   .tlv:before {
      left: 23px
   }

   .abst b {
      font-size: 2.2rem
   }
}

.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal.active {
    display: flex;
}

.video-modal-content {
    width: 90%;
    max-width: 900px;
    position: relative;
}

.video-modal-content video {
    width: 100%;
    max-height: 80vh;
    background: #000;
    border-radius: 10px;
    display: block;
}

.video-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    background: transparent;
    border: none;
    font-size: 35px;
    cursor: pointer;
}

/* ===== UNIQUO Insights / Blog ===== */
.blog-hero{background:linear-gradient(112deg,#f7f2fa 0%,#f2eaf6 57%,#fbeee5 100%);padding:58px 0 82px;position:relative;overflow:hidden}
.blog-hero:after{content:"";position:absolute;width:410px;height:410px;border:1px solid #70428b20;border-radius:50%;right:-110px;top:-145px;box-shadow:0 0 0 48px #70428b08,0 0 0 96px #70428b06;pointer-events:none}
.blog-hero .w{position:relative;z-index:1}.blog-hero h1{font-size:clamp(2.7rem,6vw,4.8rem);max-width:850px;line-height:1.02;margin-top:12px}.blog-hero h1 span{color:var(--pu)}.blog-hero p{font-size:1.12rem;max-width:650px;margin-top:20px}.blog-hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}.blog-text-link,.blog-view-all{font-weight:700;color:var(--navy);text-decoration:none}.blog-text-link:hover,.blog-view-all:hover{color:var(--or)}.blog-hero-note{display:flex;align-items:center;gap:10px;margin-top:46px;color:var(--mu);font-size:.83rem;font-weight:600}.blog-note-mark{width:28px;height:3px;background:var(--or);border-radius:4px}
.blog-featured-section{padding:72px 0 64px}.blog-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.blog-section-head .eb{margin-bottom:12px}.blog-section-head h2{font-size:clamp(1.8rem,3vw,2.45rem)}.blog-section-head p{margin-top:10px}.blog-featured{display:grid;grid-template-columns:1.12fr 1fr;gap:44px;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:22px;padding:18px;box-shadow:0 16px 45px #2b18380c}.blog-featured-visual{position:relative;display:block;overflow:hidden;border-radius:15px;min-height:310px;background:var(--bg)}.blog-featured-visual img{width:100%;height:100%;min-height:310px;object-fit:cover;display:block;transition:transform .35s}.blog-featured-visual:hover img{transform:scale(1.035)}.blog-featured-visual>span,.blog-image-tag{position:absolute;left:18px;top:18px;background:#fff;color:var(--navy);border-radius:30px;padding:7px 13px;font-size:.72rem;font-weight:800}.blog-featured-copy{padding:22px 26px 22px 0}.blog-meta{display:flex;gap:9px;align-items:center;color:#756980;font-size:.78rem;font-weight:600}.blog-featured-copy h3{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.15;margin:17px 0 14px}.blog-featured-copy h3 a,.blog-card h3 a{text-decoration:none;color:var(--navy)}.blog-featured-copy h3 a:hover,.blog-card h3 a:hover{color:var(--pu)}.blog-featured-copy p{margin-bottom:25px}.blog-list-section{padding:74px 0 90px;background:#fbf9fc}.blog-count{font-size:.85rem;color:var(--mu);font-weight:700;padding-bottom:5px}.blog-filter-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:26px 0 30px}.blog-filter{border:1px solid var(--ln);background:#fff;color:var(--navy);border-radius:30px;padding:10px 17px;font:600 .83rem inherit;font-family:inherit;cursor:pointer}.blog-filter:hover,.blog-filter.is-active{background:var(--navy);border-color:var(--navy);color:#fff}.blog-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ln);border-radius:30px;padding:0 14px;min-width:220px}.blog-search .ic{width:17px;height:17px;fill:none;stroke:var(--mu)}.blog-search input{border:0;margin:0;padding:11px 0;outline:none;min-width:0;font-size:.84rem}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-card{background:#fff;border:1px solid var(--ln);border-radius:17px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:box-shadow .2s,border-color .2s}.blog-card:hover{border-color:#c9b4d5;box-shadow:0 16px 36px #2b183814}.blog-card[hidden]{display:none}.blog-card-image{display:block;position:relative;overflow:hidden;background:var(--bg);aspect-ratio:1.52}.blog-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.blog-card:hover .blog-card-image img{transform:scale(1.035)}.blog-card-body{padding:21px 22px 23px;display:flex;flex-direction:column;flex:1}.blog-card h3{font-size:1.15rem;line-height:1.3;margin:12px 0 10px}.blog-card p{font-size:.88rem;line-height:1.65;margin-bottom:20px}.blog-read-link{margin-top:auto;display:inline-flex;gap:9px;align-items:center;color:var(--or2);font-size:.86rem;font-weight:800;text-decoration:none}.blog-read-link:hover{gap:14px}.blog-no-results{padding:30px;text-align:center;background:#fff;border:1px dashed var(--ln);border-radius:14px}.blog-service-strip{padding:62px 0;background:#fff}.blog-service-strip>.w{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}.blog-service-strip h2{font-size:clamp(1.8rem,3vw,2.4rem)}.blog-service-strip p{margin-top:12px}.blog-service-links{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.blog-service-links a{border:1px solid var(--ln);border-radius:12px;padding:17px 18px;text-decoration:none;font-weight:700;display:flex;justify-content:space-between}.blog-service-links a span{color:var(--or)}.blog-service-links a:hover{border-color:var(--or);color:var(--pu)}
.blog-detail-hero{padding:52px 0 62px}.blog-detail-hero .w{max-width:1000px}.blog-detail-hero h1{font-size:clamp(2.3rem,5.5vw,4.1rem);line-height:1.08;max-width:950px;margin-top:16px}.blog-detail-deck{font-size:1.12rem;max-width:760px;margin-top:18px}.blog-detail-category{display:inline-block;color:var(--or2);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:12px}.blog-detail-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px;color:#74667c;font-size:.82rem;font-weight:600}.blog-detail-layout{display:grid;grid-template-columns:minmax(0,760px) 290px;gap:62px;align-items:start;padding-top:54px;padding-bottom:80px}.blog-article-cover{margin:0 0 34px}.blog-article-cover img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:18px;background:var(--bg)}.blog-article-cover figcaption{font-size:.75rem;color:#81758a;margin-top:8px}.blog-article-content{font-size:1rem;line-height:1.85;color:#4d4255}.blog-article-content p{margin:0 0 19px;color:#51465a}.blog-article-content h2{font-size:1.7rem;line-height:1.2;margin:42px 0 16px}.blog-article-content h3{font-size:1.2rem;line-height:1.3;margin:26px 0 10px}.blog-article-content ul,.blog-article-content ol{padding-left:25px;margin:0 0 23px}.blog-article-content li{padding-left:5px;margin:8px 0;color:#51465a}.blog-article-content a{color:var(--pu);font-weight:700;text-decoration:underline;text-decoration-color:#cbb7d7;text-underline-offset:3px}.blog-article-content a:hover{color:var(--or2)}.blog-article-content strong{color:var(--navy)}.article-source{border-top:1px solid var(--ln);padding-top:18px;font-size:.88rem}.blog-article-cta{display:flex;justify-content:space-between;align-items:center;gap:22px;background:var(--bg);border:1px solid var(--ln);border-radius:16px;padding:26px;margin-top:42px}.blog-article-cta h2{font-size:1.35rem;margin:9px 0}.blog-article-cta p{font-size:.86rem}.blog-article-cta .btn{white-space:nowrap}.blog-back-link{margin-top:28px}.blog-back-link a{color:var(--pu);font-weight:700;text-decoration:none}.blog-detail-aside{position:sticky;top:105px;display:grid;gap:17px}.blog-aside-box{border:1px solid var(--ln);border-radius:15px;padding:22px;background:#fff}.blog-aside-box h3{font-size:1.16rem;line-height:1.3;margin:13px 0}.blog-aside-box p{font-size:.85rem}.blog-aside-box>a:not(.blog-related-card){display:inline-block;margin-top:15px;color:var(--or2);font-weight:800;font-size:.84rem;text-decoration:none}.blog-related-card{display:block;border-top:1px solid var(--ln);padding:14px 0;text-decoration:none}.blog-related-card span{display:block;color:var(--mu);font-size:.7rem;margin-bottom:5px}.blog-related-card b{display:block;color:var(--navy);font-size:.85rem;line-height:1.35}.blog-related-card small{display:block;color:var(--or2);font-weight:700;margin-top:7px}.blog-aside-contact{padding:22px;border-radius:15px;background:var(--navy);color:#fff}.blog-aside-contact b{font-size:1rem}.blog-aside-contact p{font-size:.82rem;color:#e0d5ea;margin:9px 0 14px}.blog-aside-contact a{color:#ffb17e;font-weight:800;text-decoration:none;font-size:.85rem}
@media(max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-detail-layout{grid-template-columns:minmax(0,1fr) 250px;gap:30px}.blog-featured{gap:25px}.blog-featured-copy{padding-right:12px}}
@media(max-width:700px){.blog-hero{padding:42px 0 60px}.blog-hero h1{font-size:clamp(2.45rem,11vw,3.7rem)}.blog-hero-note{margin-top:34px}.blog-featured-section,.blog-list-section{padding:52px 0}.blog-section-head{align-items:start}.blog-view-all{font-size:.8rem;white-space:nowrap;margin-top:8px}.blog-featured{grid-template-columns:1fr;gap:15px;padding:12px}.blog-featured-visual,.blog-featured-visual img{min-height:220px}.blog-featured-copy{padding:12px 10px 16px}.blog-filter-bar{gap:8px}.blog-filter{padding:9px 13px;font-size:.77rem}.blog-search{order:2;width:100%;margin:4px 0 0}.blog-grid{grid-template-columns:1fr;gap:17px}.blog-card-image{aspect-ratio:1.7}.blog-card-body{padding:18px}.blog-service-strip>.w{grid-template-columns:1fr;gap:24px}.blog-service-links{gap:9px}.blog-service-links a{padding:14px;font-size:.86rem}.blog-detail-hero{padding:38px 0 46px}.blog-detail-hero h1{font-size:clamp(2.1rem,9vw,3rem)}.blog-detail-layout{display:flex;flex-direction:column;padding-top:30px;padding-bottom:55px;gap:34px}.blog-detail-aside{position:static;width:100%;grid-template-columns:1fr}.blog-article-content{font-size:.96rem}.blog-article-content h2{font-size:1.45rem;margin-top:34px}.blog-article-cta{align-items:flex-start;flex-direction:column;padding:22px}.blog-article-cover img{border-radius:13px}}
@media(max-width:420px){.blog-section-head{display:block}.blog-view-all{display:inline-block;margin-top:14px}.blog-service-links{grid-template-columns:1fr}.blog-detail-meta{font-size:.75rem}}
/* Contrast adjustments for the light editorial hero (the shared .sub hero is dark by default). */
.blog-hero h1{color:var(--navy)}
.blog-hero p{color:var(--mu)}
.blog-hero .bc{color:var(--mu)}
.blog-hero .bc a{color:var(--navy)}