/* =========================================================
   LA PAIX v0.2.159 — EDITORIAL INFORMATION DESIGN SYSTEM
   Purpose:
   - turn long explanations into visual structure
   - use large numerals, rules and whitespace instead of decorative icons
   - keep smartphone reading calm and immediately scannable
   - keep all copy editable in WordPress; theme owns layout only
========================================================= */

:root {
  --lp-ed-rule: rgba(30,29,27,.16);
  --lp-ed-rule-dark: rgba(255,255,255,.18);
  --lp-ed-number: rgba(167,133,96,.22);
  --lp-ed-number-strong: #9f805f;
  --lp-ed-paper: #f7f2ea;
  --lp-ed-paper-2: #efe7dc;
}

/* ---------------------------------------------------------
   01. PERSONAL — choose a path
--------------------------------------------------------- */
.personal-routes__grid--editorial {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin-top: clamp(54px,6vw,82px);
  overflow: hidden;
  background: var(--lp-ed-rule);
  border: 1px solid var(--lp-ed-rule);
}
.personal-routes__grid--editorial .personal-route {
  position: relative;
  min-height: 520px;
  padding: clamp(38px,4.5vw,62px) clamp(30px,3.8vw,52px) clamp(36px,4.5vw,58px);
  overflow: hidden;
  background: #fffdf8;
  isolation: isolate;
}
.personal-routes__grid--editorial .personal-route--labo {
  background: var(--color-deep);
  color: #fff;
}
.personal-routes__grid--editorial .personal-route--update {
  background: #f0e8dd;
}
.personal-route__index {
  position: absolute;
  top: 24px;
  right: 20px;
  z-index: -1;
  color: var(--lp-ed-number);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: clamp(82px,8vw,132px);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.085em;
}
.personal-route--labo .personal-route__index {
  color: rgba(255,255,255,.10);
}
.personal-routes__grid--editorial .personal-route__label {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(74px,7vw,112px);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .19em;
}
.personal-routes__grid--editorial .personal-route h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
  font-size: clamp(24px,2.3vw,34px);
  line-height: 1.52;
}
.personal-routes__grid--editorial .personal-route > div p {
  max-width: 31em;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.78;
  letter-spacing: .01em;
}
.personal-routes__grid--editorial .personal-route--update > div p {
  color: rgba(30,29,27,.66);
}

/* ---------------------------------------------------------
   02. PERSONAL — Brand Me Labo 01 / 02 / 03 map
--------------------------------------------------------- */
.personal-labo-map--editorial {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin-top: clamp(34px,4vw,54px);
  border-top: 1px solid var(--lp-ed-rule);
  border-bottom: 1px solid var(--lp-ed-rule);
}
.personal-labo-map--editorial .personal-labo-map__stage {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 270px;
  padding: 26px 26px 30px;
  border-right: 1px solid var(--lp-ed-rule);
  overflow: hidden;
}
.personal-labo-map--editorial .personal-labo-map__stage:last-child {
  border-right: 0;
}
.personal-labo-map__index {
  display: block;
  margin: 0 0 42px;
  color: var(--lp-ed-number-strong);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: clamp(58px,5.8vw,92px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.075em;
}
.personal-labo-map--editorial .personal-labo-map__stage::after {
  content: "/";
  position: absolute;
  top: 25px;
  right: 24px;
  color: rgba(30,29,27,.24);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
}
.personal-labo-map--editorial .personal-labo-map__label {
  margin-bottom: 12px;
  font-size: 9px;
  letter-spacing: .2em;
}
.personal-labo-map--editorial .personal-labo-map__stage h3 {
  margin: 0 0 14px;
  font-size: clamp(21px,1.8vw,26px);
  line-height: 1.45;
}
.personal-labo-map--editorial .personal-labo-map__items {
  max-width: 27em;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.74;
  letter-spacing: .01em;
}
.personal-labo-map--editorial .personal-labo-map__stage--update {
  background: var(--lp-ed-paper);
}
.personal-labo-map--editorial .personal-labo-map__stage--update h3 {
  max-width: 12em;
  font-size: clamp(19px,1.65vw,24px);
}
.personal-labo-map--editorial .personal-labo-map__note {
  padding: 0;
  text-align: left;
}

/* ---------------------------------------------------------
   03. PERSONAL — 5-step HOW IT WORKS as an editorial rail
--------------------------------------------------------- */
.personal-program__grid--five {
  display: block;
  margin-top: clamp(34px,4vw,60px);
  border-top: 1px solid var(--lp-ed-rule);
}
.personal-program__grid--five .personal-program__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(110px,12vw,178px) minmax(0,1fr);
  gap: clamp(34px,5vw,84px);
  min-height: 0;
  padding: clamp(34px,4vw,54px) 0;
  border: 0;
  border-bottom: 1px solid var(--lp-ed-rule);
}
.personal-program__grid--five .personal-program__item::after {
  content: "";
  position: absolute;
  left: clamp(112px,12vw,180px);
  top: 30px;
  width: 1px;
  height: calc(100% - 60px);
  background: var(--lp-ed-rule);
  transform: rotate(12deg);
  transform-origin: center;
}
.personal-program__index {
  align-self: start;
  color: var(--lp-ed-number-strong);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: clamp(58px,6.2vw,96px);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.08em;
}
.personal-program__content {
  min-width: 0;
  max-width: 690px;
}
.personal-program__content > span {
  display: block;
  margin: 0 0 16px;
  color: var(--color-accent);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .19em;
}
.personal-program__content h3 {
  margin: 0 0 14px;
  font-size: clamp(23px,2.1vw,31px);
  line-height: 1.46;
  font-weight: 400;
}
.personal-program__content > div,
.personal-program__content > div p {
  max-width: 40em;
  margin: 0;
  color: var(--color-soft-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.78;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------
   04. BRAND SITE — six-step process with oversized numerals
--------------------------------------------------------- */
.brand-site-process__grid {
  display: block !important;
  border-top: 1px solid var(--lp-ed-rule) !important;
}
.brand-site-process__grid article,
.brand-site-process__grid article:not(:nth-child(3n+1)) {
  position: relative;
  display: grid !important;
  grid-template-columns: clamp(150px,17vw,245px) minmax(0,1fr);
  grid-template-areas:
    "number label"
    "number title"
    "number body";
  column-gap: clamp(42px,6vw,98px);
  min-height: 0 !important;
  padding: clamp(38px,4.5vw,64px) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lp-ed-rule) !important;
}
.brand-site-process__grid article:nth-child(even) {
  grid-template-columns: minmax(0,1fr) clamp(150px,17vw,245px);
  grid-template-areas:
    "label number"
    "title number"
    "body number";
}
.brand-site-process__grid article > span {
  grid-area: number;
  align-self: start;
  margin: 0 !important;
  color: var(--lp-ed-number) !important;
  font-family: var(--font-latin-ui,Manrope,sans-serif) !important;
  font-size: clamp(92px,12vw,172px) !important;
  font-weight: 600 !important;
  line-height: .72 !important;
  letter-spacing: -.09em !important;
}
.brand-site-process__grid article:nth-child(even) > span {
  text-align: right;
}
.brand-site-process__grid article > p {
  grid-area: label;
  align-self: end;
  margin: 2px 0 14px !important;
  color: var(--color-accent) !important;
  font-family: var(--font-latin-ui,Manrope,sans-serif) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .18em !important;
}
.brand-site-process__grid h3 {
  grid-area: title;
  max-width: 18em;
  margin: 0 0 14px !important;
  font-size: clamp(24px,2.4vw,35px) !important;
  line-height: 1.48 !important;
}
.brand-site-process__grid article > div {
  grid-area: body;
  max-width: 40em;
  color: var(--color-soft-ink) !important;
  font-family: var(--font-sans);
  font-size: 14px !important;
  line-height: 1.78 !important;
  letter-spacing: .01em;
}
.brand-site-process__grid article > div p { margin: 0; }

/* ---------------------------------------------------------
   Smartphone: one clear visual idea per screenful.
--------------------------------------------------------- */
@media (max-width: 900px) {
  .personal-routes__grid--editorial {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }
  .personal-routes__grid--editorial .personal-route {
    min-height: 0;
    padding: 30px var(--lp-mobile-gutter,26px) 34px;
  }
  .personal-route__index {
    top: 18px;
    right: 18px;
    font-size: clamp(64px,21vw,88px);
  }
  .personal-routes__grid--editorial .personal-route__label {
    margin-bottom: 58px;
    font-size: 9px;
  }
  .personal-routes__grid--editorial .personal-route h3 {
    max-width: 12.5em;
    margin-bottom: 18px;
    font-size: clamp(22px,6.2vw,27px) !important;
    line-height: 1.48 !important;
  }
  .personal-routes__grid--editorial .personal-route > div p {
    max-width: 29em;
    font-size: 15px !important;
    line-height: 1.72 !important;
  }
  .personal-routes__grid--editorial .personal-route .text-link {
    padding-top: 34px;
  }

  .personal-labo-map--editorial {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
  .personal-labo-map--editorial .personal-labo-map__stage {
    grid-template-columns: 72px minmax(0,1fr);
    grid-template-rows: auto;
    gap: 18px;
    min-height: 0;
    padding: 28px 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--lp-ed-rule);
    background: transparent;
  }
  .personal-labo-map--editorial .personal-labo-map__stage:last-child {
    border-bottom: 0;
  }
  .personal-labo-map--editorial .personal-labo-map__stage::after {
    display: none;
  }
  .personal-labo-map__index {
    margin: 0;
    font-size: 50px;
    line-height: .82;
  }
  .personal-labo-map__content {
    min-width: 0;
    padding-right: 2px;
  }
  .personal-labo-map--editorial .personal-labo-map__label {
    margin: 2px 0 8px;
  }
  .personal-labo-map--editorial .personal-labo-map__stage h3 {
    margin-bottom: 10px;
    font-size: 21px !important;
    line-height: 1.42 !important;
  }
  .personal-labo-map--editorial .personal-labo-map__items {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }
  .personal-labo-map--editorial .personal-labo-map__stage--update h3 {
    max-width: 16em;
    font-size: 19px !important;
  }

  .personal-program__grid--five {
    margin-top: 30px;
  }
  .personal-program__grid--five .personal-program__item {
    grid-template-columns: 62px minmax(0,1fr) !important;
    gap: 18px !important;
    padding: 30px 0 !important;
  }
  .personal-program__grid--five .personal-program__item::after {
    left: 64px;
    top: 24px;
    height: calc(100% - 48px);
    transform: rotate(8deg);
  }
  .personal-program__index {
    font-size: 46px;
  }
  .personal-program__content > span {
    margin-bottom: 10px;
    font-size: 8px;
  }
  .personal-program__content h3 {
    margin-bottom: 10px;
    font-size: clamp(20px,5.6vw,23px) !important;
    line-height: 1.44 !important;
  }
  .personal-program__content > div,
  .personal-program__content > div p {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .brand-site-process__grid article,
  .brand-site-process__grid article:not(:nth-child(3n+1)),
  .brand-site-process__grid article:nth-child(even) {
    grid-template-columns: 68px minmax(0,1fr) !important;
    grid-template-areas:
      "number label"
      "number title"
      "number body" !important;
    column-gap: 18px !important;
    padding: 30px 0 32px !important;
  }
  .brand-site-process__grid article > span,
  .brand-site-process__grid article:nth-child(even) > span {
    font-size: 48px !important;
    line-height: .82 !important;
    text-align: left !important;
  }
  .brand-site-process__grid article > p {
    margin: 1px 0 9px !important;
    font-size: 8px !important;
  }
  .brand-site-process__grid h3 {
    margin-bottom: 10px !important;
    font-size: clamp(20px,5.6vw,23px) !important;
    line-height: 1.44 !important;
  }
  .brand-site-process__grid article > div {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }
}

@media (max-width: 370px) {
  .personal-labo-map--editorial .personal-labo-map__stage,
  .personal-program__grid--five .personal-program__item,
  .brand-site-process__grid article,
  .brand-site-process__grid article:nth-child(even) {
    grid-template-columns: 54px minmax(0,1fr) !important;
    column-gap: 14px !important;
  }
  .personal-labo-map__index,
  .personal-program__index,
  .brand-site-process__grid article > span {
    font-size: 40px !important;
  }
  .personal-program__grid--five .personal-program__item::after {
    left: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .personal-route__index,
  .personal-labo-map__index,
  .personal-program__index,
  .brand-site-process__grid article > span {
    transform: none !important;
  }
}

/* =========================================================
   v0.2.138 — QUIETER EDITORIAL RHYTHM
   - no decorative diagonal rules
   - tighter semantic heading lines
   - smaller, numbered result lists
   - Brand Me Labo long-form sections become visual rails
========================================================= */

/* 01. PERSONAL HOW IT WORKS — number + content, no faux slash. */
.personal-program__grid--five .personal-program__item,
.personal-program__grid--five .personal-program__item:nth-child(n) {
  grid-template-columns: clamp(88px,9vw,126px) minmax(0,1fr);
  gap: clamp(26px,4vw,58px);
}
.personal-program__grid--five .personal-program__item::after {
  content: none !important;
}
.personal-program__index {
  position: relative;
  padding-bottom: 18px;
  font-size: clamp(48px,5vw,72px);
  letter-spacing: -.07em;
}
.personal-program__index::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: rgba(159,128,95,.66);
}
.personal-program__content h3 {
  max-width: 17em;
  line-height: 1.34;
}
.personal-program__content h3 .responsive-copy__line {
  line-height: inherit;
}

/* 02. PERSONAL WHAT CHANGES — shorter visual scan, not oversized copy. */
.personal-gain__list {
  counter-reset: lp-gain;
}
.personal-gain__list p {
  counter-increment: lp-gain;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  font-size: clamp(16px,1.45vw,20px);
  line-height: 1.56;
}
.personal-page .personal-gain__list p::before {
  content: counter(lp-gain, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  margin-top: .18em;
  background: none;
  color: var(--lp-ed-number-strong);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .13em;
}

/* 03. Brand Me Labo detailed page — THE JOURNEY becomes a clean rail. */
.labo-journey__grid {
  display: block;
  margin-top: clamp(42px,5vw,66px);
  border: 0;
  border-top: 1px solid var(--lp-ed-rule);
  background: transparent;
}
.labo-journey__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(88px,9vw,126px) minmax(210px,.58fr) minmax(0,1fr);
  gap: clamp(26px,4vw,58px);
  min-height: 0;
  padding: clamp(30px,3.6vw,48px) 0;
  border-bottom: 1px solid var(--lp-ed-rule);
  background: transparent;
}
.labo-journey__item > span {
  min-height: 0;
  margin: 0;
  color: var(--lp-ed-number-strong);
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
}
.labo-journey__item h3 {
  margin: 0;
  font-size: clamp(20px,1.9vw,27px);
  line-height: 1.42;
}
.labo-journey__item div,
.labo-journey__item div p {
  margin: 0;
  max-width: 38em;
  color: var(--color-soft-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}

/* 04. Brand Me Labo fit list — use quiet index structure instead of bullets. */
.labo-fit__list {
  counter-reset: lp-fit;
}
.labo-fit__list p {
  counter-increment: lp-fit;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 16px;
  padding: 21px 0;
  font-size: 15px;
  line-height: 1.62;
}
.labo-fit__list p::before {
  content: counter(lp-fit, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  margin: .15em 0 0;
  border: 0;
  transform: none;
  color: #c7af93;
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
}

@media (max-width: 900px) {
  /* Authored lines already create the line break; hide the extra BR to avoid
     the double-leading effect visible in v137 screenshots. */
  .responsive-copy--mobile > br {
    display: none !important;
  }

  .personal-program__grid--five .personal-program__item,
  .personal-program__grid--five .personal-program__item:nth-child(n) {
    grid-template-columns: 54px minmax(0,1fr) !important;
    gap: 16px !important;
    padding: 26px 0 28px !important;
  }
  .personal-program__index {
    padding: 1px 0 16px;
    font-size: 38px !important;
    line-height: .86;
  }
  .personal-program__index::after {
    width: 20px;
  }
  .personal-program__content > span {
    margin: 0 0 8px;
  }
  .personal-program__content h3 {
    margin: 0 0 10px;
    font-size: clamp(19px,5.15vw,21px) !important;
    line-height: 1.31 !important;
  }
  .personal-program__content h3 .responsive-copy__line {
    display: block;
    line-height: 1.31 !important;
  }
  .personal-program__content > div,
  .personal-program__content > div p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .personal-gain__list p {
    grid-template-columns: 38px minmax(0,1fr);
    gap: 12px;
    padding: 19px 0 !important;
    font-size: clamp(17px,4.45vw,19px) !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
  }

  .labo-journey__grid {
    margin-top: 36px;
  }
  .labo-journey__item {
    grid-template-columns: 46px minmax(0,1fr);
    grid-template-areas:
      "label title"
      ". body";
    gap: 8px 14px;
    padding: 24px 0 26px;
  }
  .labo-journey__item > span {
    grid-area: label;
    margin-top: .4em;
    font-size: 8px;
  }
  .labo-journey__item h3 {
    grid-area: title;
    font-size: 20px !important;
    line-height: 1.38 !important;
  }
  .labo-journey__item div {
    grid-area: body;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .labo-fit__list p {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 12px;
    padding: 18px 0;
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 900px) {
  /* Service / product names: keep multi-line names visually connected. */
  .single-menu-page .single-service__title,
  .personal-menu-item__name h3,
  .labo-program__name h3,
  .brand-site-price h3 {
    line-height: 1.34 !important;
  }
  .single-menu-page .single-service__title .responsive-copy__line,
  .personal-menu-item__name h3 .responsive-copy__line,
  .labo-program__name h3 .responsive-copy__line {
    line-height: inherit !important;
  }
}

/* =========================================================
   v0.2.139 — QUIET INFORMATION ARCHITECTURE
   Extend the editorial system without adding decorative noise.
   Long explanations become numbered rails; numerals and short rules
   do the visual work. No diagonal / slash ornaments.
========================================================= */

/* 01. Brand Me Labo map — remove the remaining slash ornament. */
.personal-labo-map--editorial .personal-labo-map__stage::after {
  content: none !important;
}
.personal-labo-map__index {
  position: relative;
  padding-bottom: 18px;
}
.personal-labo-map__index::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: rgba(159,128,95,.66);
}

/* 02. FOR BUSINESS — 4-step process as a calm editorial rail. */
.business-process__grid {
  display: block !important;
  margin-top: clamp(42px,5vw,70px) !important;
  border: 0 !important;
  border-top: 1px solid var(--lp-ed-rule) !important;
  background: transparent !important;
}
.business-process__grid article {
  display: grid !important;
  grid-template-columns: clamp(82px,9vw,124px) minmax(190px,.55fr) minmax(0,1fr);
  grid-template-areas:
    "number label body"
    "number title body";
  gap: 7px clamp(28px,4vw,58px);
  min-height: 0 !important;
  padding: clamp(30px,3.7vw,50px) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lp-ed-rule) !important;
  background: transparent !important;
}
.business-process__grid article > span {
  grid-area: number;
  position: relative;
  align-self: start;
  margin: 0 !important;
  padding: 0 0 17px;
  color: var(--lp-ed-number-strong) !important;
  font-family: var(--font-latin-ui,Manrope,sans-serif) !important;
  font-size: clamp(46px,5vw,70px) !important;
  font-weight: 600 !important;
  line-height: .84 !important;
  letter-spacing: -.07em !important;
}
.business-process__grid article > span::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: rgba(159,128,95,.66);
}
.business-process__grid article > p {
  grid-area: label;
  margin: 1px 0 7px !important;
  color: var(--color-accent) !important;
  font-family: var(--font-latin-ui,Manrope,sans-serif) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .18em !important;
}
.business-process__grid h3 {
  grid-area: title;
  max-width: 14em;
  margin: 0 !important;
  font-size: clamp(21px,1.9vw,28px) !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
}
.business-process__grid article > div {
  grid-area: body;
  align-self: center;
  max-width: 37em;
  color: var(--color-soft-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
  letter-spacing: .01em;
}

/* 03. SINGLE SESSION — HOW IT WORKS follows the same visual grammar. */
.single-menu-flow__grid {
  display: block !important;
  margin-top: clamp(42px,5vw,70px) !important;
  border: 0 !important;
  border-top: 1px solid var(--lp-ed-rule) !important;
}
.single-menu-flow__item,
.single-menu-flow__item:first-child {
  display: grid !important;
  grid-template-columns: clamp(82px,9vw,124px) minmax(210px,.62fr) minmax(0,1fr);
  grid-template-areas:
    "number title body";
  gap: clamp(26px,4vw,58px);
  align-items: start;
  min-height: 0 !important;
  padding: clamp(30px,3.7vw,50px) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lp-ed-rule) !important;
}
.single-menu-flow__item > span {
  grid-area: number;
  position: relative;
  padding-bottom: 17px;
  color: var(--lp-ed-number-strong) !important;
  font-family: var(--font-latin-ui,Manrope,sans-serif) !important;
  font-size: clamp(46px,5vw,70px) !important;
  font-weight: 600 !important;
  line-height: .84 !important;
  letter-spacing: -.07em !important;
  opacity: 1 !important;
}
.single-menu-flow__item > span::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: rgba(159,128,95,.66);
}
.single-menu-flow__item h3 {
  grid-area: title;
  max-width: 14em;
  margin: 0 !important;
  font-size: clamp(21px,1.9vw,28px) !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
}
.single-menu-flow__item > div {
  grid-area: body;
  max-width: 37em;
  margin: 0 !important;
  color: var(--color-soft-ink);
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
  opacity: 1 !important;
}

/* 04. BRAND SITE CASE 01 — BEFORE / DIRECTION / CREATIVE as 3 stages. */
.brand-site-case__facts {
  counter-reset: lp-case;
  border-top: 1px solid rgba(242,237,230,.18) !important;
}
.brand-site-case__facts article {
  counter-increment: lp-case;
  display: grid !important;
  grid-template-columns: 42px minmax(92px,.28fr) minmax(0,1fr) !important;
  gap: 18px 22px !important;
  align-items: start;
  padding: 24px 0 !important;
  border-bottom: 1px solid rgba(242,237,230,.16) !important;
}
.brand-site-case__facts article::before {
  content: counter(lp-case, decimal-leading-zero);
  margin-top: .15em;
  color: #b9946d;
  font-family: var(--font-latin-ui,Manrope,sans-serif);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
}
.brand-site-case__facts article > p {
  margin: .12em 0 0 !important;
  color: rgba(242,237,230,.6) !important;
  font-family: var(--font-latin-ui,Manrope,sans-serif) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .17em !important;
}
.brand-site-case__facts article > div {
  max-width: 37em;
  color: rgba(242,237,230,.76) !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.68 !important;
}

/* 05. Mobile rhythm — same block = visibly same block. */
@media (max-width: 900px) {
  .personal-labo-map__index {
    padding-bottom: 14px;
  }
  .personal-labo-map__index::after {
    width: 20px;
  }

  .business-process__grid,
  .single-menu-flow__grid {
    margin-top: 30px !important;
  }
  .business-process__grid article {
    grid-template-columns: 46px minmax(0,1fr) !important;
    grid-template-areas:
      "number label"
      "number title"
      ". body" !important;
    gap: 6px 14px !important;
    padding: 25px 0 27px !important;
  }
  .business-process__grid article > span,
  .single-menu-flow__item > span {
    padding: 1px 0 14px;
    font-size: 36px !important;
    line-height: .86 !important;
  }
  .business-process__grid article > span::after,
  .single-menu-flow__item > span::after {
    width: 18px;
  }
  .business-process__grid article > p {
    margin: 1px 0 6px !important;
    font-size: 8px !important;
  }
  .business-process__grid h3,
  .single-menu-flow__item h3 {
    margin: 0 !important;
    font-size: clamp(19px,5.1vw,21px) !important;
    line-height: 1.31 !important;
  }
  .business-process__grid article > div {
    margin-top: 6px;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .single-menu-flow__item,
  .single-menu-flow__item:first-child {
    grid-template-columns: 46px minmax(0,1fr) !important;
    grid-template-areas:
      "number title"
      ". body" !important;
    gap: 8px 14px !important;
    padding: 25px 0 27px !important;
  }
  .single-menu-flow__item > div {
    margin-top: 3px !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .brand-site-case__facts article {
    grid-template-columns: 34px minmax(0,1fr) !important;
    grid-template-areas:
      "number label"
      ". body";
    gap: 7px 12px !important;
    padding: 20px 0 !important;
  }
  .brand-site-case__facts article::before {
    grid-area: number;
    margin-top: .2em;
    font-size: 8px;
  }
  .brand-site-case__facts article > p {
    grid-area: label;
    margin: 0 !important;
    font-size: 8px !important;
  }
  .brand-site-case__facts article > div {
    grid-area: body;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  /* Service names and short editorial headlines: slightly tighter than body. */
  .single-service__title,
  .business-service__content h3,
  .brand-site-value__item h3,
  .brand-site-scope__item h3 {
    line-height: 1.28 !important;
  }

  /* Long prose: readable, but not airy. */
  .business-team article > p,
  .business-team__summary,
  .business-message__content > p:last-child,
  .single-menu-labo__body > p,
  .brand-site-case__note {
    font-family: var(--font-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.66 !important;
  }
}

@media (max-width: 370px) {
  .business-process__grid article,
  .single-menu-flow__item,
  .single-menu-flow__item:first-child {
    grid-template-columns: 40px minmax(0,1fr) !important;
    column-gap: 12px !important;
  }
  .business-process__grid article > span,
  .single-menu-flow__item > span {
    font-size: 32px !important;
  }
}


/* ==========================================================================\n   v0.2.141 — MOBILE CLARITY / UPDATE CONTRAST / BEFORE–AFTER COMPARISON\n   ========================================================================== */

/* The shared mobile body rule is intentionally dark on light pages. UPDATE's
   hero is an image-on-dark exception and must keep a high-contrast foreground. */
@media (max-width: 900px) {
  .update-page .update-hero__shade {
    background:
      linear-gradient(0deg, rgba(15,14,12,.92) 0%, rgba(15,14,12,.72) 58%, rgba(15,14,12,.30) 100%) !important;
  }
  .update-page .update-hero__lead,
  .update-page .update-hero__lead p {
    color: rgba(255,255,255,.88) !important;
  }
  .update-page .update-hero__note {
    color: rgba(255,255,255,.74) !important;
  }
  .update-page .update-hero__title {
    color: #fff !important;
  }
}

/* On desktop the transformation spread is intentionally editorial and
   asymmetrical. On phones, comparison wins: BEFORE and AFTER are visible in
   the same viewport so the change reads instantly rather than sequentially. */
@media (max-width: 520px) {
  .transformation-editorial__opening {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) !important;
    gap: 7px !important;
    align-items: center !important;
  }
  .transformation-editorial__before {
    grid-column: 1 !important;
    width: 100% !important;
    padding: 6px !important;
    justify-self: stretch !important;
    box-shadow: 0 14px 34px rgba(58,48,39,.08) !important;
  }
  .transformation-editorial__hero {
    grid-column: 3 !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }
  .transformation-editorial__before img,
  .transformation-editorial__hero img {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .transformation-editorial__bridge {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    overflow: visible !important;
    writing-mode: horizontal-tb !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  .transformation-editorial__bridge span,
  .transformation-editorial__bridge i {
    display: none !important;
  }
  .transformation-editorial__bridge::before {
    content: "→";
    display: block;
    color: var(--transformation-accent);
    font-family: var(--font-latin-ui,Manrope,sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
  }
  .transformation-editorial__label {
    gap: 3px !important;
    margin: 0 0 8px !important;
  }
  .transformation-editorial__label span {
    font-size: 0 !important;
    letter-spacing: .14em !important;
  }
  .transformation-editorial__before .transformation-editorial__label span::after {
    content: "BEFORE";
    font-size: 8px;
  }
  .transformation-editorial__hero .transformation-editorial__label span::after {
    content: "AFTER";
    font-size: 8px;
  }
  .transformation-editorial__label small {
    font-size: 9px !important;
    line-height: 1.45 !important;
    letter-spacing: .04em !important;
  }
}

/* ==========================================================================\n   v0.2.143 — MOBILE BEFORE/AFTER PRESERVATION + ALL-WORKS EDITORIAL GRID\n   ========================================================================== */

/* Keep the BEFORE collage readable on phones. It is a 6-photo board, not a
   single portrait, so cropping it to 4:5 destroys the evidence of change. */
@media (max-width: 520px) {
  .transformation-editorial__opening {
    grid-template-columns: minmax(0,1.08fr) 20px minmax(0,.92fr) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .transformation-editorial__before,
  .transformation-editorial__hero {
    min-width: 0 !important;
  }
  .transformation-editorial__before {
    padding: 5px !important;
    background: rgba(255,253,249,.88) !important;
  }
  .transformation-editorial__before img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #f7f4ee !important;
  }
  .transformation-editorial__hero img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* The photo portfolio now lives entirely on the page. No horizontal drag,
   accidental modal opening, or hidden second gallery. All saved works are
   visible in one editorial grid. */
.brand-visual-photo-works .selected-visuals__stage--all {
  width: 100% !important;
  margin-left: 0 !important;
  padding: clamp(34px,5vw,70px) 0 18px !important;
  overflow: visible !important;
  cursor: default !important;
  touch-action: auto !important;
}
.brand-visual-photo-works .selected-visuals__track--all {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12,minmax(0,1fr)) !important;
  gap: clamp(24px,3.8vw,58px) clamp(16px,2.6vw,38px) !important;
  align-items: start !important;
}
.brand-visual-photo-works .selected-visuals__item--static,
.brand-visual-photo-works .selected-visuals__item--static:nth-child(3n),
.brand-visual-photo-works .selected-visuals__item--static:nth-child(5n),
.brand-visual-photo-works .selected-visuals__item--static:nth-child(10),
.brand-visual-photo-works .selected-visuals__item--static:nth-child(20) {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  grid-column: span 6;
  cursor: default !important;
}
.brand-visual-photo-works .selected-visuals__item--static:nth-child(4n + 1) {
  grid-column: span 7;
}
.brand-visual-photo-works .selected-visuals__item--static:nth-child(4n + 2) {
  grid-column: span 5;
  margin-top: clamp(22px,4vw,64px) !important;
}
.brand-visual-photo-works .selected-visuals__item--static:nth-child(4n + 3) {
  grid-column: span 5;
}
.brand-visual-photo-works .selected-visuals__item--static:nth-child(4n) {
  grid-column: span 7;
  margin-top: clamp(16px,3vw,48px) !important;
}
.brand-visual-photo-works .selected-visuals__item--static:hover,
.brand-visual-photo-works .selected-visuals__item--static:focus-visible {
  transform: none !important;
  outline: none !important;
}
.brand-visual-photo-works .selected-visuals__item--static:hover img {
  transform: none !important;
}
.brand-visual-photo-works .selected-visuals__frame {
  box-shadow: none !important;
  background: #e7e0d6 !important;
}
.brand-visual-photo-works .selected-visuals__caption {
  margin-top: 10px !important;
  gap: 10px !important;
}

/* The yellow cake photograph is intentionally promoted instead of being lost
   as a thumbnail: it works as a strong visual pause in the sequence. */
.brand-visual-photo-works .selected-visuals__item--cake-feature {
  grid-column: 2 / 12 !important;
  margin: clamp(20px,3vw,44px) 0 clamp(10px,2vw,30px) !important;
}
.brand-visual-photo-works .selected-visuals__item--cake-feature .selected-visuals__frame img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .brand-visual-photo-works .selected-visuals__stage--all {
    padding: 26px 0 10px !important;
  }
  .brand-visual-photo-works .selected-visuals__track--all {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 24px 8px !important;
  }
  .brand-visual-photo-works .selected-visuals__item--static,
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(3n),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(5n),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(10),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(20),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(4n + 1),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(4n + 2),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(4n + 3),
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(4n) {
    grid-column: span 1 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  .brand-visual-photo-works .selected-visuals__item--static:nth-child(5n + 1) {
    grid-column: 1 / -1 !important;
    width: min(84%, 330px) !important;
    justify-self: center !important;
  }
  .brand-visual-photo-works .selected-visuals__item--cake-feature {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 8px 0 12px !important;
  }
  .brand-visual-photo-works .selected-visuals__item--cake-feature .selected-visuals__frame {
    width: 100% !important;
  }
  .brand-visual-photo-works .selected-visuals__caption {
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 7px !important;
    margin-top: 7px !important;
    padding: 0 1px !important;
  }
  .brand-visual-photo-works .selected-visuals__caption > span {
    font-size: 8px !important;
    line-height: 1.4 !important;
  }
  .brand-visual-photo-works .selected-visuals__caption small {
    font-size: 9px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }
}

/* v0.2.144 — PHOTO WORKS FINAL VISIBILITY
   v0.2.143 introduced the all-on-page portfolio, but an older mobile rule in
   main.css still hid item 11 onward. Keep the editorial system authoritative. */
@media (max-width: 767px) {
  .brand-visual-photo-works .selected-visuals__track--all > .selected-visuals__item--static:nth-child(n) {
    display: block !important;
  }
}

/* =========================================================
   v0.2.148 — PC FINAL COMPOSITION SAFETY PASS
   - no authored desktop title may disappear outside its column
   - prefer semantic line breaks, but allow a long line to wrap before clipping
   - rebalance UPDATE / PERSONAL wide layouts at 1280–2560px
========================================================= */
@media (min-width: 901px) {
  /* Global desktop fail-safe for all responsive-copy headings. <br> still owns
     the intended phrase boundary; white-space:normal only acts when a phrase
     physically cannot fit its available column. */
  :is(
    .section-title,
    .page-title,
    .personal-hero__title,
    .business-hero__title,
    .works-hero__title,
    .single-menu-hero__title,
    .labo-hero__title,
    .brand-visual-hero__title,
    .update-hero__title,
    .about-hero__title,
    .about-manifesto__title,
    .about-message__title,
    .contact-section-title,
    .faq-hero__title,
    .desktop-copy-precise
  ) .responsive-copy--desktop .responsive-copy__line {
    display: inline;
    width: auto;
    max-width: 100%;
    white-space: normal;
    line-break: strict;
    word-break: normal;
    overflow-wrap: normal;
  }

  /* UPDATE HERO: the previous 100svh photograph read oversized on desktop.
     Keep cinematic presence without making the first screen almost all image. */
  .update-page .update-hero {
    min-height: clamp(680px, 78svh, 840px);
  }
  .update-page .update-hero__media img {
    object-position: center 38%;
    transform: none;
  }
  .update-page .update-hero__copy {
    width: min(100%, 780px);
    padding-top: clamp(120px, 10vw, 170px);
    padding-bottom: clamp(68px, 7vw, 104px);
  }

  /* PERSONAL three-route selector: give AFTERCARE more breathing room on the
     right while keeping Brand Me Labo visually central. */
  .personal-routes__grid--editorial {
    grid-template-columns: .98fr 1.04fr 1.08fr;
  }
  .personal-routes__grid--editorial .personal-route:last-child {
    padding-right: clamp(46px, 4.4vw, 70px);
  }
  .personal-routes__grid--editorial .personal-route h3 {
    max-width: 100%;
    font-size: clamp(24px, 2.05vw, 32px);
    line-height: 1.5;
    text-wrap: balance;
  }

  /* Single-session service names used legacy nowrap helpers. Wide screens keep
     them on one line naturally, while narrower PCs may now wrap instead of
     clipping at the service column edge. */
  .single-menu-page .single-service__title,
  .single-menu-page .single-service__title .service-title__keep--full,
  .single-menu-page .single-service__title .responsive-copy__line,
  .single-menu-page .single-service__tagline,
  .personal-menu-item__name h3 .responsive-copy--desktop .responsive-copy__line {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Brand Me Labo opening: the old two-line desktop phrase exceeded the left
     grid column. More usable width + a three-phrase composition fixes it. */
  .labo-page .labo-intro__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, .62fr);
    gap: clamp(64px, 7vw, 112px);
  }
  .labo-page .labo-intro .section-title {
    max-width: 800px;
    font-size: clamp(38px, 3.15vw, 50px);
    line-height: 1.48;
  }

  /* UPDATE headings and information rails. */
  .update-page .update-section-head,
  .update-page .update-intro__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .60fr);
    gap: clamp(58px, 7vw, 112px);
  }
  .update-page .update-theme {
    grid-template-columns: 64px minmax(0, 1.18fr) minmax(270px, .48fr);
    gap: clamp(28px, 4vw, 60px);
  }
  .update-page .update-theme h3 {
    max-width: 720px;
    font-size: clamp(30px, 2.9vw, 46px);
    line-height: 1.42;
    text-wrap: balance;
  }
  .update-page .update-item-title__line {
    display: inline;
    white-space: nowrap;
  }
  .update-page .update-boundary__grid > div {
    padding-left: clamp(38px, 4vw, 60px);
    padding-right: clamp(38px, 4vw, 60px);
  }
  .update-page .update-boundary h3 {
    max-width: 100%;
    font-size: clamp(26px, 2.25vw, 35px);
    line-height: 1.5;
    text-wrap: balance;
  }
  .update-page .update-faq__grid {
    grid-template-columns: minmax(420px, .78fr) minmax(0, 1fr);
    gap: clamp(58px, 7vw, 112px);
  }
  .update-page .update-faq .section-title {
    max-width: 500px;
    font-size: clamp(34px, 2.9vw, 45px);
    line-height: 1.48;
  }
  .update-page .update-eligibility__inner h2 {
    max-width: 920px;
    font-size: clamp(34px, 3.1vw, 48px);
    line-height: 1.5;
  }

  /* Other long Brand Me Labo card headlines get a calmer maximum size so a
     verb or particle is not left alone on the next line. */
  .labo-page .labo-scenes__card h3 {
    font-size: clamp(28px, 2.65vw, 40px);
    line-height: 1.5;
    text-wrap: balance;
  }

  /* FINAL PORTRAIT: keep the approved landscape frame but move the focal point
     upward so the face is visible instead of cropping above the neck. */
  .labo-page .labo-photo__image img {
    object-position: center 18%;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  /* Mid-size laptops need one extra safety step before typography becomes dense. */
  .personal-routes__grid--editorial .personal-route {
    padding-left: 34px;
    padding-right: 34px;
  }
  .personal-routes__grid--editorial .personal-route:last-child {
    padding-right: 42px;
  }
  .update-page .update-theme {
    grid-template-columns: 52px minmax(0, 1fr) minmax(250px, .52fr);
    gap: 28px;
  }
  .update-page .update-theme h3 {
    font-size: 34px;
  }
  .update-page .update-faq__grid {
    grid-template-columns: minmax(350px, .72fr) minmax(0, 1fr);
    gap: 54px;
  }
}

/* =========================================================
   v0.2.149 — PERSONAL route-card balance
   01 was visually pressing against the divider on 1920px desktop. Give the
   sentence the same breathing room already reserved for AFTERCARE.
========================================================= */
@media (min-width: 901px) {
  .personal-routes__grid--editorial .personal-route:first-child {
    padding-right: clamp(58px, 4.6vw, 76px);
  }
  .personal-routes__grid--editorial .personal-route:first-child h3 {
    max-width: 94%;
    font-size: clamp(24px, 1.98vw, 31px);
  }
  .personal-routes__grid--editorial .personal-route:first-child > div {
    max-width: 94%;
  }
}


/* =========================================================
   v0.2.150 — PERSONAL / Brand Me Labo promise
   Keep the new promise to exactly two authored lines on smartphone widths.
========================================================= */
@media (max-width: 900px) {
  .personal-labo__copy .section-title {
    font-size: clamp(26px, 7vw, 29px) !important;
    line-height: 1.46 !important;
    letter-spacing: -.018em !important;
  }
  .personal-labo__copy .section-title .responsive-copy--mobile .responsive-copy__line {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }
  .personal-labo__body,
  .personal-labo__body p {
    line-height: 1.76 !important;
  }
  .personal-labo__body p + p {
    margin-top: 14px !important;
  }
}


/* =========================================================
   v0.2.151 — PERSONAL Brand Me Labo high-value promise
   Preserve two authored mobile lines without edge crowding.
========================================================= */
@media (max-width: 900px) {
  .personal-labo__copy .section-title {
    font-size: clamp(23px, 6.25vw, 26px) !important;
    line-height: 1.48 !important;
    letter-spacing: -.022em !important;
  }
  .personal-labo__copy .section-title .responsive-copy--mobile .responsive-copy__line {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }
  .personal-labo__body,
  .personal-labo__body p {
    font-size: 14.5px !important;
    line-height: 1.78 !important;
  }
}


/* =========================================================
   v0.2.156 — DESKTOP SERVICE INDEX
   Keep the six primary destinations calm, while FOR YOU / FOR BUSINESS expose
   the same direct service access as mobile. The panel is intentionally narrow:
   numbered editorial rows, no mega-menu wall, no duplicated marketing copy.
========================================================= */
@media (min-width: 901px) {
  .site-nav > ul.menu > li.menu-item-has-children > a {
    position: relative;
    padding-right: 13px;
  }

  .site-nav > ul.menu > li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: .52;
    transform: translateY(-68%) rotate(45deg);
    transition: opacity .18s ease, transform .22s ease;
  }

  .site-nav > ul.menu > li.menu-item-has-children:hover > a::after,
  .site-nav > ul.menu > li.menu-item-has-children:focus-within > a::after {
    opacity: 1;
    transform: translateY(-35%) rotate(225deg);
  }

  .site-nav > ul.menu > li > .sub-menu {
    width: 338px;
    min-width: 338px;
    padding: 7px 0;
    gap: 0;
    counter-reset: laPaixServiceIndex;
    border: 1px solid rgba(255,255,255,.13);
    border-top-color: rgba(195,174,149,.72);
    background: rgba(17,16,14,.975);
    box-shadow: 0 22px 54px rgba(0,0,0,.2);
  }

  .site-nav > ul.menu > li > .sub-menu > li {
    counter-increment: laPaixServiceIndex;
  }

  .site-nav > ul.menu > li > .sub-menu > li + li {
    border-top: 1px solid rgba(255,255,255,.075) !important;
  }

  .site-nav > ul.menu > li > .sub-menu > li > a {
    min-height: 58px;
    grid-template-columns: 28px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 11px 16px;
    transition: background .18s ease, padding-left .22s ease;
  }

  .site-nav > ul.menu > li > .sub-menu > li > a::before {
    content: "0" counter(laPaixServiceIndex);
    display: block;
    font-family: var(--font-latin-sans);
    font-size: 7px;
    line-height: 1;
    letter-spacing: .14em;
    opacity: .4;
  }

  .site-nav > ul.menu > li > .sub-menu > li > a:hover,
  .site-nav > ul.menu > li > .sub-menu > li > a:focus-visible {
    padding-left: 20px;
    background: rgba(255,255,255,.055);
    outline: none;
  }

  .site-nav > ul.menu > li > .sub-menu .menu-child__ja {
    font-family: var(--font-ja-serif);
    font-size: 13px;
    line-height: 1.42;
    letter-spacing: .035em;
  }

  .site-nav > ul.menu > li > .sub-menu .menu-child__en {
    font-family: var(--font-latin-ui);
    font-size: 6.5px;
    line-height: 1.25;
    letter-spacing: .14em;
    opacity: .48;
    text-align: right;
  }
}


/* =========================================================
   v0.2.157 — DESKTOP SERVICE INDEX / RELIABLE TARGETING
   Custom WordPress children do not carry the protected fallback's inner spans,
   so give both native and fallback menu items the same quiet readable styling.
========================================================= */
@media (min-width: 901px) {
  .site-nav > ul.menu > li.menu-item-has-children > .sub-menu > li > a {
    font-family: var(--font-ja-serif);
    font-size: 13px;
    line-height: 1.42;
    letter-spacing: .035em;
  }
  .site-nav > ul.menu > li.menu-item-has-children > .sub-menu > li > a > .menu-child__en {
    font-family: var(--font-latin-ui);
  }
  /* Slightly widen the invisible hover bridge so moving diagonally from the
     label into the panel does not accidentally close it. */
  .site-nav > ul.menu > li.menu-item-has-children::after {
    left: -28px !important;
    right: -28px !important;
    height: 20px !important;
  }
}


/* =========================================================
   v0.2.158 — HOME DESKTOP / HOVER SERVICE INDEX
   The TOP full-screen menu is intentionally spacious. FOR YOU / FOR BUSINESS
   reveal a compact service index to the left on hover/focus, so direct access
   is available without turning the first menu view into a mega-menu wall.
========================================================= */
@media (min-width: 901px) {
  .home .site-nav > ul.menu {
    position: relative;
    overflow: visible !important;
  }

  .home .site-nav > ul.menu > li {
    position: relative;
    overflow: visible !important;
  }

  .home .site-nav > ul.menu > li.menu-item-has-children::after {
    content: none !important;
  }

  .home .site-nav > ul.menu > li.menu-item-has-children > a {
    padding-right: 0 !important;
  }

  .home .site-nav > ul.menu > li.menu-item-has-children > a::after {
    content: "+" !important;
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin-left: 14px;
    border: 0 !important;
    font-family: var(--font-latin-ui);
    font-size: .22em;
    line-height: 1;
    font-weight: 400;
    opacity: .48;
    transform: none !important;
    transition: opacity .18s ease, transform .24s cubic-bezier(.22,.78,.25,1) !important;
  }

  .home .site-nav > ul.menu > li.menu-item-has-children:hover > a::after,
  .home .site-nav > ul.menu > li.menu-item-has-children:focus-within > a::after {
    opacity: 1;
    transform: rotate(45deg) !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 90 !important;
    width: min(338px, 31vw) !important;
    min-width: 292px !important;
    display: grid !important;
    gap: 0 !important;
    padding: 0 0 7px !important;
    margin: 0 !important;
    overflow: visible !important;
    background: rgba(15,14,13,.965) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-top-color: rgba(195,174,149,.78) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,.24) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-16px,-50%,0) !important;
    transition: opacity .18s ease, transform .28s cubic-bezier(.22,.78,.25,1), visibility 0s linear .28s !important;
    counter-reset: laPaixServiceIndex;
  }

  .home .site-nav > ul.menu > li > .sub-menu::before {
    content: "SERVICE INDEX";
    display: block;
    padding: 13px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,.075);
    color: rgba(211,190,164,.82);
    font-family: var(--font-latin-ui);
    font-size: 7px;
    line-height: 1;
    letter-spacing: .2em;
    text-align: left;
  }

  .home .site-nav > ul.menu > li:hover > .sub-menu,
  .home .site-nav > ul.menu > li:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,-50%,0) !important;
    transition-delay: 0s !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu > li {
    overflow: visible !important;
    border: 0 !important;
    counter-increment: laPaixServiceIndex;
  }

  .home .site-nav > ul.menu > li > .sub-menu > li + li {
    border-top: 1px solid rgba(255,255,255,.075) !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu > li > a {
    min-height: 57px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) auto !important;
    gap: 11px !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 10px 15px !important;
    color: #f3f0e8 !important;
    font-family: var(--font-ja-serif) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    letter-spacing: .03em !important;
    white-space: normal !important;
    transition: background .18s ease, padding-left .22s ease !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu > li > a::before {
    content: "0" counter(laPaixServiceIndex) !important;
    display: block !important;
    font-family: var(--font-latin-ui) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
    opacity: .4 !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu > li > a::after {
    content: "→" !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    font-family: var(--font-latin-ui) !important;
    font-size: 10px !important;
    opacity: .4 !important;
    transform: none !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu > li > a:hover,
  .home .site-nav > ul.menu > li > .sub-menu > li > a:focus-visible {
    padding-left: 19px !important;
    background: rgba(255,255,255,.055) !important;
    outline: none !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu .menu-child__ja {
    font-family: var(--font-ja-serif) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    letter-spacing: .03em !important;
    text-align: left !important;
  }

  .home .site-nav > ul.menu > li > .sub-menu .menu-child__en {
    display: none !important;
  }
}

/* =========================================================
   v0.2.159 — MOBILE HOME / SERVICE INDEX LANGUAGE
   Touch has no hover, so the PC interaction is translated rather than copied:
   the six top-level destinations remain calm and legible, while tapping the +
   on FOR YOU / FOR BUSINESS unfolds the same numbered SERVICE INDEX language.
========================================================= */
@media (max-width: 900px) {
  .home .site-nav > ul.menu > li.menu-item-has-children {
    overflow: visible !important;
  }

  .home .site-nav > ul.menu > li.menu-item-has-children > a {
    padding-right: 48px !important;
  }

  .home .site-nav .submenu-toggle {
    top: 12px !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    color: rgba(243,240,232,.82) !important;
  }

  .home .site-nav .sub-menu {
    counter-reset: laPaixMobileServiceIndex;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: rgba(255,255,255,.018) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    text-align: left !important;
    transition: max-height .38s cubic-bezier(.22,.78,.25,1), opacity .18s ease !important;
  }

  .home .site-nav .menu-item-has-children.is-submenu-open > .sub-menu {
    max-height: 330px !important;
    margin: 0 0 16px !important;
    border-top: 1px solid rgba(195,174,149,.54) !important;
    border-bottom: 1px solid rgba(243,240,232,.10) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .home .site-nav .sub-menu::before {
    content: "SERVICE INDEX";
    display: block;
    padding: 11px 2px 8px;
    color: rgba(211,190,164,.78);
    font-family: var(--font-latin-ui);
    font-size: 7px;
    line-height: 1;
    letter-spacing: .20em;
    text-align: right;
  }

  .home .site-nav .sub-menu > li {
    counter-increment: laPaixMobileServiceIndex;
    border-top: 1px solid rgba(243,240,232,.075) !important;
  }

  .home .site-nav .sub-menu > li > a {
    min-height: 47px !important;
    display: grid !important;
    grid-template-columns: 27px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    justify-items: stretch !important;
    padding: 8px 2px !important;
    text-align: right !important;
    background: transparent !important;
  }

  .home .site-nav .sub-menu > li > a::before {
    content: "0" counter(laPaixMobileServiceIndex) !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    align-self: center !important;
    color: rgba(243,240,232,.38) !important;
    font-family: var(--font-latin-ui) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
  }

  .home .site-nav .sub-menu .menu-child__ja {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    color: #f3f0e8 !important;
    font-family: var(--font-ja-serif) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .025em !important;
  }

  .home .site-nav .sub-menu .menu-child__en {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    justify-self: end !important;
    color: rgba(243,240,232,.54) !important;
    font-family: var(--font-latin-ui) !important;
    font-size: 6.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
    text-align: right !important;
  }
}


/* =========================================================
   v0.2.180 — DESKTOP SERVICE MENU / OPAQUE READING PLANE
   The global desktop header normally uses mix-blend-mode:difference so the
   quiet navigation survives both light and dark artwork. When a service
   submenu opens, that group-level blend also composites the submenu against
   the page below; page copy can therefore appear to bleed through the dark
   panel. While FOR YOU / FOR BUSINESS is expanded by hover or keyboard focus,
   temporarily return the header to normal compositing and give the header +
   submenu one solid deep reading plane. Closed navigation remains unchanged.
========================================================= */
@media (min-width: 901px) {
  body:not(.home) .site-header:has(.site-nav > ul.menu > li.menu-item-has-children:hover),
  body:not(.home) .site-header:has(.site-nav > ul.menu > li.menu-item-has-children:focus-within) {
    mix-blend-mode: normal !important;
    isolation: isolate;
    color: #f5f1ea !important;
    background: #11100e;
  }

  body:not(.home) .site-header:has(.site-nav > ul.menu > li.menu-item-has-children:hover) .site-nav > ul.menu > li > .sub-menu,
  body:not(.home) .site-header:has(.site-nav > ul.menu > li.menu-item-has-children:focus-within) .site-nav > ul.menu > li > .sub-menu {
    background: #11100e !important;
    border-color: rgba(255,255,255,.13) !important;
    border-top-color: rgba(195,174,149,.72) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.30) !important;
  }
}