/* Brand refinement: warm logo beige and Kiratt blue, on a white foundation. */
:root {
  --color-text: #293b40;
  --color-muted: #5f6d72;
  --color-accent: #129bb9;
  --color-beige: #f5eddc;
  --color-soft: #f5eddc;
  --color-blue-ink: #076f86;
  --color-line: #dce0dc;
}
::selection { background: var(--color-beige); color: var(--color-text); }
a:focus-visible, button:focus-visible { outline-color: var(--color-blue-ink); }
.desktop-nav .nav-contact { background: var(--color-beige); border-color: transparent; padding-inline: 25px; }
.desktop-nav .nav-contact:hover { background: #e1f1f5; }
.desktop-nav a::after { background: var(--color-accent); height: 2px; }
.hero { border-radius: 0 0 0 clamp(50px, 7vw, 120px); }
.hero__english { font-size: clamp(60px, 7.7vw, 122px); animation: none; }
.hero__bottom .text-link { border-bottom-color: var(--color-beige); }
.hero__bottom .arrow { color: var(--color-beige); }
.section-heading__english { color: var(--color-accent); }
.text-link { position: relative; }
.text-link::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
a:hover .text-link::after, a.text-link:hover::after { transform: scaleX(1); transform-origin: left; }
.arrow { color: var(--color-accent); transition: transform .55s var(--ease); }
a:hover .arrow { transform: translate(6px, -6px); }
.about { padding-top: 155px; padding-bottom: 150px; isolation: isolate; }
.about::before { content: ""; position: absolute; z-index: -1; left: 0; top: 125px; width: 31%; height: calc(100% - 170px); background: var(--color-beige); border-radius: 0 48% 48% 0; }
.about__photo { width: clamp(210px, 29vw, 400px); aspect-ratio: 1; border-radius: 45% 48% 43% 48%; }
.about__body { padding-top: 8px; }
.business { background: white; padding-top: 105px; }
.business > .l-inner > .section-heading { margin-bottom: 90px; }
.business > .l-inner > .section-heading .section-heading__english { font-size: clamp(52px, 7.5vw, 108px); }
.flagship { position: relative; isolation: isolate; }
.flagship::before { content: ""; position: absolute; z-index: -1; width: 52%; height: 92%; left: -4%; top: 12%; background: var(--color-beige); border-radius: 0 0 0 100px; }
.flagship__image { width: 59%; aspect-ratio: 1.15; border-radius: 0 90px 0 0; }
.about-gallery figure img,
.editorial-image img,
.flagship__image img {
  filter: brightness(1.18) contrast(1.04);
}
.flagship__body { padding-block: 32px; }
.brand-logo { line-height: 1; display: flex; align-items: center; width: 230px; max-width: 100%; min-height: 76px; margin: 15px 0 22px; }
.brand-logo img { width: 100%; max-height: 100px; object-fit: contain; object-position: left center; }
.flagship h3.brand-logo { font-size: inherit; margin: 22px 0 28px; width: 320px; min-height: 90px; }
.home-brand h3.brand-logo { margin: 6px 0 10px; width: 190px; height: 125px; }
.home-brand h3.brand-logo img { max-height: 125px; }
.brand-logo--cherie { width: 155px; }
.brand-logo--frillnature { width: 215px; }
.brand-logo--chouette { width: 170px; }
.brand-logo--kiratt-tv { width: 205px; }
.brand-logo--beauty-tips { width: 205px; }
.brand-row .brand-logo { margin: 0; min-height: 65px; }
.brand-row .brand-logo img { max-height: 74px; }
.brand-row { padding-block: 26px; transition: padding .6s var(--ease), border-color .4s; }
.brand-row:hover { padding-inline: 12px; border-color: var(--color-accent); }
.brand-row__description { margin-top: 12px; }
.business__secondary { margin-top: 125px; gap: 11%; }
.home-brand { width: 47%; padding-top: 55px; }
.home-brand__image { border-radius: 65px 0 0 0; }
.brand-group { padding-top: 0; }
.support-brands { margin-top: 95px; border-top: 2px solid var(--color-beige); }
.support-brands .brand-row { justify-content: space-between; }
.support-brands .brand-row > div { min-width: 0; }
.business__all { margin-top: 25px; }
.company { padding-block: 75px; background: var(--color-beige); }
.company__inner { max-width: 1150px; }
.company__inner > div:first-child { width: 57%; }
.company .section-heading__english { color: var(--color-text); }
.company__signature { width: 34%; flex-shrink: 0; }
.company__signature img { width: 100%; mix-blend-mode: darken; }
.recruit { padding-top: 140px; padding-bottom: 140px; }
.recruit__inner { gap: 7%; }
.recruit__photo { width: 59%; aspect-ratio: 1.07; border-radius: 0 45% 0 0; }
.recruit__body { padding-top: 70px; }
.contact-strip { background: white; padding-block: 85px; border-top: 1px solid var(--color-line); }
.contact-strip__heading { color: var(--color-accent); font-size: clamp(58px, 8vw, 112px); }
.contact-strip .arrow { flex-shrink: 0; display: flex; width: 90px; height: 90px; border-radius: 50%; background: var(--color-accent); color: white; align-items: center; justify-content: center; margin-left: 15px; }
.site-footer { background: var(--color-beige); }
.page-heading { background: var(--color-beige); border-radius: 0 0 80px 0; }
.page-heading__english { color: var(--color-text); }
.brand-detail__lead { width: 38%; flex-shrink: 0; text-wrap: balance; }
.brand-page-logo { width: min(430px, 80%); height: 175px; display: flex; align-items: center; margin: 0; }
.brand-page-logo img { width: 100%; max-height: 175px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.portfolio-item .brand-logo { margin-top: 15px; margin-bottom: 15px; }
.portfolio-list--featured .portfolio-item__logo { border-radius: 0 60px 0 0; }
.portfolio-list--featured .portfolio-item:nth-child(2) { margin-top: 75px; }
.portfolio-list--rows .portfolio-item__logo { background: transparent; }
.portfolio-list--rows .portfolio-item { transition: background .5s, padding .6s var(--ease); }
.portfolio-list--rows .portfolio-item:hover { background: #fcf9f3; padding-inline: 20px; }
.menu-dialog { background: var(--color-beige); }
.mobile-nav a span { color: var(--color-blue-ink); }

/* Entry choreography. Each word retains its original accessible text. */
.motion-word-mask { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.motion-word { display: inline-block; }
[data-reveal] { transition-duration: 1.25s, 1.4s; }
[data-reveal].is-pending { transform: translateY(42px); }
.about__photo[data-reveal].is-pending { transform: translateY(42px) rotate(-12deg); }
.motion-image { clip-path: inset(0 0 0 0); }
.menu-dialog[open] { animation: menu-open .65s var(--ease) both; }
.menu-dialog[open] .mobile-nav a { animation: menu-item .75s var(--ease) both; }
.menu-dialog[open] .mobile-nav a:nth-child(2) { animation-delay: .05s; }
.menu-dialog[open] .mobile-nav a:nth-child(3) { animation-delay: .1s; }
.menu-dialog[open] .mobile-nav a:nth-child(4) { animation-delay: .15s; }
.menu-dialog[open] .mobile-nav a:nth-child(5) { animation-delay: .2s; }
@keyframes menu-open { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes menu-item { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .flagship__image img, .recruit__photo img, .home-brand__image img {
      animation: photo-depth linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes photo-depth { from { scale: 1.12; translate: 0 4%; } to { scale: 1.12; translate: 0 -4%; } }
  }
}
@media (max-width: 1024px) {
  .flagship { gap: 5%; }
  .flagship__image { width: 53%; }
  .flagship h3.brand-logo { width: 270px; }
  .company__inner { gap: 8%; }
  .recruit__photo { width: 52%; }
  .recruit__body { padding-top: 0; }
  .contact-strip .arrow { width: 65px; height: 65px; font-size: 32px; margin-left: 0; }
}
@media (max-width: 768px) {
  .hero { border-radius: 0 0 0 45px; }
  .hero__english { font-size: clamp(35px, 8.5vw, 65px); }
  .about { padding-top: 85px; padding-bottom: 70px; }
  .about::before { top: auto; bottom: 40px; width: 72%; height: 250px; border-radius: 0 130px 130px 0; }
  .about__body { padding-top: 0; }
  .about__photo { width: 70%; aspect-ratio: 1; margin-top: 65px; }
  .business { padding-top: 55px; padding-bottom: 70px; }
  .business > .l-inner > .section-heading { margin-bottom: 42px; }
  .business > .l-inner > .section-heading .section-heading__english { font-size: 49px; }
  .flagship::before { width: 90%; height: 310px; left: -20px; top: 25px; border-radius: 0 0 0 55px; }
  .flagship__image { width: 100%; aspect-ratio: 1.12; border-radius: 0 55px 0 0; }
  .flagship__body { padding-top: 43px; padding-bottom: 0; }
  .flagship h3.brand-logo { width: 270px; min-height: 70px; margin-block: 15px 24px; }
  .business__secondary { margin-top: 60px; }
  .home-brand { width: 100%; padding-top: 0; }
  .home-brand__image { border-radius: 45px 0 0 0; }
  .home-brand h3.brand-logo { width: 165px; height: 115px; }
  .brand-group { margin-top: 55px; }
  .brand-row { padding-block: 23px; }
  .support-brands { margin-top: 35px; }
  .company { padding-block: 65px; }
  .company__inner > div:first-child { width: 100%; }
  .company__signature { width: 64%; max-width: 290px; margin: 40px auto 0; }
  .recruit { padding-top: 75px; padding-bottom: 70px; }
  .recruit__photo { width: 100%; aspect-ratio: 1.15; }
  .recruit__body { padding-top: 38px; }
  .contact-strip { padding-block: 45px; }
  .contact-strip__heading { font-size: 55px; }
  .contact-strip__link { padding-right: 35px; }
  .contact-strip .arrow { top: 5px; width: 46px; height: 46px; font-size: 27px; }
  .page-heading { border-radius: 0 0 45px 0; }
  .brand-detail__lead { width: 100%; margin-bottom: 30px; }
  .brand-page-logo { height: 125px; width: 85%; }
  .brand-page-logo img { max-height: 125px; }
  .portfolio-list--featured .portfolio-item:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__english, .menu-dialog[open], .menu-dialog[open] .mobile-nav a { animation: none; }
  .motion-word, .motion-image { transform: none; clip-path: none; }
  [data-reveal].is-pending { opacity: 1; transform: none; }
  .about__photo[data-reveal].is-pending { transform: rotate(-7deg); }
  .text-link::after, .brand-row, .portfolio-list--rows .portfolio-item { transition: none; }
  a:hover .arrow { transform: none; }
}

/* Business details stay in the current browsing context. */
html { scrollbar-gutter: stable; }
body.brand-modal-open { overflow: hidden; }
.brand-modal { position: fixed; inset: 0; margin: auto; width: min(760px, calc(100% - 48px)); max-height: calc(100dvh - 64px); padding: 0; border: 0; border-radius: 0 55px 0 0; color: var(--color-text); background: white; overscroll-behavior: contain; }
.brand-modal::backdrop { background: rgb(25 42 47 / .55); backdrop-filter: blur(5px); }
.brand-modal[open] { animation: brand-modal-in .4s var(--ease) both; }
.brand-modal__bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--color-beige); padding: 18px 38px; z-index: 1; font-size: 12px; }
.brand-modal__close { appearance: none; border: 0; background: transparent; color: var(--color-text); padding: 12px; cursor: pointer; font: inherit; font-size: 14px; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.brand-modal__content { padding: 40px 55px 55px; }
.brand-modal__logo { display: flex; align-items: center; height: 125px; margin: 20px 0 30px; }
.brand-modal__logo img { width: min(340px, 100%); height: 100%; object-fit: contain; object-position: left center; }
.brand-modal__content h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1.7; margin-bottom: 20px; }
.brand-modal__meta { color: var(--color-muted); font-size: 12px; margin-top: 20px; }
.brand-modal__photo { width: 100%; aspect-ratio: 1.7; object-fit: cover; margin-top: 28px; border-radius: 0 35px 0 0; }
.brand-modal__content .text-link { display: flex; width: fit-content; min-width: 230px; max-width: 100%; gap: 22px; margin-top: 32px; }
@keyframes brand-modal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) {
  .brand-modal { width: calc(100% - 24px); max-height: calc(100dvh - 32px); border-top-right-radius: 35px; }
  .brand-modal__bar { padding: 10px 18px; }
  .brand-modal__close,
  .brand-modal__close:focus,
  .brand-modal__close:focus-visible { outline: none; border: 0; box-shadow: none; }
  .brand-modal__content { padding: 25px 24px 35px; }
  .brand-modal__logo { height: 105px; margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .brand-modal[open] { animation: none; } }