.elementor-1300 .elementor-element.elementor-element-5f9ff34{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-615aeae *//* =========================================================
LEONOIR SERVICE PAGE
2026 FINAL
========================================================= */

:root{
  --leos-black:#101010;
  --leos-red:#741b2b;
  --leos-red-light:#a74355;
  --leos-red-dark:#4e111c;

  --leos-ivory:#f4f1eb;
  --leos-white:#fbfaf7;

  --leos-text:#171717;

  --leos-line:rgba(17,17,17,.11);
  --leos-light-line:rgba(255,255,255,.14);

  --leos-serif:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  --leos-sans:
    "Helvetica Neue",
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  --leos-ease:
    cubic-bezier(.22,1,.36,1);
}


/* =========================================================
RESET
========================================================= */

body.leoSubMenuOpen{
  overflow:hidden !important;
}

.leoServicePage,
.leoServicePage *{
  box-sizing:border-box;
}

.leoServicePage{
  width:100%;
  max-width:100%;

  overflow:hidden;

  background:var(--leos-ivory) !important;
  color:var(--leos-text) !important;

  font-family:var(--leos-sans);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.leoServicePage a,
.leoServicePage a:visited,
.leoServicePage a:hover,
.leoServicePage a:focus{
  text-decoration:none !important;
}

.leoServicePage img{
  display:block;
  max-width:100%;
}

.leoServicePage h1,
.leoServicePage h2,
.leoServicePage h3,
.leoServicePage p{
  color:inherit;
}

.leoSubContainer{
  width:min(1240px,calc(100% - 120px));
  margin-inline:auto;
}


/* =========================================================
HEADER
========================================================= */

.leoSubHeader{
  position:absolute;
  top:0;
  left:0;
  z-index:1000;

  width:100%;
  height:82px;

  color:#171717 !important;

  transition:
    transform .45s var(--leos-ease),
    background-color .4s ease,
    box-shadow .4s ease;
}

.leoSubHeader.is-fixed{
  position:fixed;

  background:rgba(244,241,235,.96) !important;

  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);

  box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.leoSubHeader.is-hidden{
  transform:translateY(-105%);
}

.leoSubHeader__inner{
  height:100%;

  padding:0 46px;

  display:flex;
  align-items:center;
}

.leoSubHeader__logo{
  width:74px;
  flex:none;

  transition:
    opacity .35s ease,
    transform .4s var(--leos-ease) !important;
}

.leoSubHeader__logo:hover{
  opacity:.65;
  transform:translateY(-1px);
}

.leoSubHeader__logo img{
  width:64px;
  max-height:58px;

  object-fit:contain;

  filter:invert(1);
}

.leoSubHeader__nav{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:34px;
}

.leoSubHeader__nav a,
.leoSubHeader__nav a:visited{
  position:relative;

  padding:10px 0;

  color:#181818 !important;

  font-size:11px;
  font-weight:500;
  letter-spacing:.15em;

  transition:
    opacity .35s ease,
    color .35s ease !important;
}

.leoSubHeader__nav a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:2px;

  width:100%;
  height:1px;

  background:var(--leos-red);

  transform:scaleX(0);
  transform-origin:right;

  transition:
    transform .4s var(--leos-ease);
}

.leoSubHeader__nav a:hover::after,
.leoSubHeader__nav a.is-current::after{
  transform:scaleX(1);
  transform-origin:left;
}

.leoSubHeader__nav a:hover{
  opacity:.62;
}

.leoSubHeader__contact{
  height:42px;

  margin-left:36px;
  padding:0 18px;

  border:1px solid rgba(20,20,20,.45) !important;

  color:#181818 !important;
  background:transparent !important;

  display:flex;
  align-items:center;
  gap:22px;

  font-size:10px;
  letter-spacing:.15em;

  transition:
    background .4s var(--leos-ease),
    color .4s ease,
    transform .4s var(--leos-ease) !important;
}

.leoSubHeader__contact:hover{
  background:var(--leos-red) !important;
  border-color:var(--leos-red) !important;

  color:#fff !important;

  transform:translateY(-2px);
}

.leoSubHeader__contact span,
.leoSubHeader__contact b{
  color:inherit !important;
}

.leoSubMenuButton{
  display:none !important;
}


/* =========================================================
MOBILE MENU
========================================================= */

.leoSubMenu{
  position:fixed;
  inset:0;
  z-index:950;

  background:#111 !important;
  color:#fff !important;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .45s var(--leos-ease),
    visibility .45s;
}

.leoSubMenu.is-open{
  opacity:1;
  visibility:visible;
}

.leoSubMenu__inner{
  min-height:100%;

  padding:115px 26px 45px;

  display:flex;
  flex-direction:column;
}

.leoSubMenu nav{
  display:flex;
  flex-direction:column;
}

.leoSubMenu nav a{
  padding:17px 0;

  border-bottom:
    1px solid rgba(255,255,255,.12);

  color:#fff !important;

  font-family:Georgia,serif;
  font-size:27px;

  transition:
    color .35s,
    padding-left .4s var(--leos-ease) !important;
}

.leoSubMenu nav a:hover{
  padding-left:8px;
  color:#bf6575 !important;
}

.leoSubMenu nav a span{
  display:inline-block;

  width:38px;
  margin-right:7px;

  color:#a54758 !important;

  font-family:var(--leos-sans);
  font-size:9px;
}

.leoSubMenu__inner > p{
  margin:auto 0 0;

  color:#963246 !important;

  font-size:10px;
  letter-spacing:.18em;
}


/* =========================================================
FV
========================================================= */

.leoServiceFv{
  position:relative;

  min-height:720px;

  padding:190px 0 85px;

  background:var(--leos-ivory) !important;
}

.leoServiceFv__line{
  position:absolute;

  top:82px;
  left:50%;

  width:1px;
  height:calc(100% - 82px);

  background:rgba(20,20,20,.09);
}

.leoServiceFv__inner{
  width:min(1240px,calc(100% - 120px));
  margin:auto;

  display:grid;
  grid-template-columns:
    minmax(0,1.45fr)
    minmax(0,.9fr);

  gap:70px;
}

.leoServiceFv__left,
.leoServiceFv__right{
  min-width:0;
}

.leoServiceFv__label{
  margin:0 0 70px;

  color:var(--leos-red) !important;

  font-family:Georgia,serif;

  font-size:13px;
  letter-spacing:.2em;
}

.leoServiceFv__title{
  margin:0;

  font-family:var(--leos-serif);

  font-size:clamp(40px,4.1vw,66px);
  font-weight:500;

  line-height:1.55;
  letter-spacing:.05em;

  word-break:keep-all;
}

.leoServiceFv__title span{
  display:block;
  white-space:nowrap;
}

.leoServiceFv__title em{
  color:var(--leos-red) !important;
  font-style:normal;
}

.leoServiceFv__right{
  padding-top:62px;
}

.leoServiceFv__en{
  margin:0 0 55px;

  color:#b8b1aa !important;

  font-family:Georgia,serif;

  font-size:28px;
  line-height:1.25;
  letter-spacing:.06em;
}

.leoServiceFv__lead{
  max-width:430px;

  margin:0;

  font-family:var(--leos-serif);

  font-size:14px;
  line-height:2.1;
  letter-spacing:.035em;
}

.leoServiceFv__bottom{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  min-height:58px;

  padding:0 5vw;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;

  background:var(--leos-red) !important;
  color:#fff !important;
}

.leoServiceFv__bottom p{
  margin:0;

  color:#fff !important;

  font-size:9px;
  letter-spacing:.16em;
}

.leoServiceFv__bottom i{
  width:3px;
  height:3px;

  flex:none;

  border-radius:50%;

  background:rgba(255,255,255,.5);
}


/* =========================================================
SECTION HEAD
========================================================= */

.leoSubSectionHead{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.leoSubSectionHead > p{
  min-width:22px;

  margin:2px 0 0;

  color:var(--leos-red) !important;

  font-size:10px;
}

.leoSubSectionHead span{
  display:block;

  font-family:Georgia,serif;
  font-size:14px;
  letter-spacing:.1em;
}

.leoSubSectionHead small{
  display:block;

  margin-top:6px;

  color:#77726d !important;

  font-size:11px;
}

.leoSubSectionHead--light{
  color:#fff !important;
}

.leoSubSectionHead--light span{
  color:#fff !important;
}

.leoSubSectionHead--light small{
  color:#858080 !important;
}


/* =========================================================
INTRO
========================================================= */

.leoServiceIntro{
  position:relative;

  overflow:hidden;

  padding:145px 0 175px;

  background:var(--leos-white) !important;
}

.leoServiceIntro__body{
  margin-top:85px;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,.92fr);

  gap:90px;
}

.leoServiceIntro__title{
  min-width:0;

  margin:0;

  font-family:var(--leos-serif);

  font-size:clamp(35px,3.4vw,54px);
  font-weight:500;

  line-height:1.65;
  letter-spacing:.055em;

  word-break:keep-all;
}

.leoServiceIntro__title span{
  display:block;
}

.leoServiceIntro__title em{
  color:var(--leos-red) !important;
  font-style:normal;
}

.leoServiceIntro__content{
  min-width:0;
  max-width:550px;

  padding-top:8px;

  font-family:var(--leos-serif);

  font-size:14px;
  line-height:2.1;
  letter-spacing:.035em;
}

.leoServiceIntro__content p{
  margin:0 0 27px;
}

.leoServiceIntro__big{
  position:absolute;

  right:-16px;
  bottom:-60px;

  margin:0;

  color:rgba(116,27,43,.045) !important;

  font-family:Georgia,serif;

  font-size:clamp(120px,18vw,280px);
  line-height:1;

  pointer-events:none;
}


/* =========================================================
INDEX
========================================================= */

.leoServiceIndex{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  background:var(--leos-black) !important;
  color:#fff !important;
}

.leoServiceIndex a{
  position:relative;

  min-width:0;
  min-height:235px;

  padding:40px 34px;

  border-right:
    1px solid rgba(255,255,255,.13);

  color:#fff !important;

  transition:
    background .45s var(--leos-ease),
    padding .45s var(--leos-ease) !important;
}

.leoServiceIndex a:last-child{
  border-right:0;
}

.leoServiceIndex a:hover{
  padding-top:34px;
  background:var(--leos-red-dark) !important;
}

.leoServiceIndex small{
  color:#857f80 !important;
  font-size:9px;
}

.leoServiceIndex span{
  display:block;

  margin-top:52px;

  color:#b65061 !important;

  font-size:9px;
  letter-spacing:.18em;
}

.leoServiceIndex b{
  display:block;

  margin-top:8px;

  color:#fff !important;

  font-family:Georgia,serif;

  font-size:20px;
  font-weight:400;
}

.leoServiceIndex i{
  position:absolute;

  right:30px;
  bottom:30px;

  color:#fff !important;

  font-size:15px;
  font-style:normal;

  transition:transform .35s var(--leos-ease);
}

.leoServiceIndex a:hover i{
  transform:translateY(5px);
}


/* =========================================================
SERVICE DETAILS
========================================================= */

.leoServiceDetail{
  padding:155px 0 165px;

  background:var(--leos-ivory) !important;
}

.leoServiceDetail--dark{
  background:var(--leos-black) !important;
  color:#fff !important;
}

.leoServiceDetail--creative{
  background:var(--leos-white) !important;
}

.leoServiceDetail--solution{
  background:#ece8e0 !important;
}

.leoServiceDetail__head{
  display:grid;
  grid-template-columns:
    minmax(130px,.35fr)
    minmax(0,1fr);

  gap:50px;
}

.leoServiceDetail__number{
  min-width:0;
}

.leoServiceDetail__number span{
  display:block;

  color:var(--leos-red) !important;

  font-family:Georgia,serif;

  font-size:42px;
  line-height:1;
}

.leoServiceDetail__number small{
  display:block;

  margin-top:14px;

  color:#77726d !important;

  font-size:9px;
  letter-spacing:.17em;
}

.leoServiceDetail--dark .leoServiceDetail__number small{
  color:#817b7d !important;
}

.leoServiceDetail__heading{
  min-width:0;
}

.leoServiceDetail__en{
  margin:0 0 24px;

  color:var(--leos-red) !important;

  font-size:10px;
  letter-spacing:.2em;
}

.leoServiceDetail__title{
  margin:0;

  font-family:var(--leos-serif);

  font-size:clamp(34px,3.2vw,52px);
  font-weight:500;

  line-height:1.6;
  letter-spacing:.05em;

  word-break:keep-all;
}

.leoServiceDetail__title em{
  color:var(--leos-red) !important;
  font-style:normal;
}

.leoServiceDetail__content{
  width:calc(100% - 180px);
  max-width:930px;

  margin:75px 0 0 auto;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:70px;
}

.leoServiceDetail__description,
.leoServiceDetail__services{
  min-width:0;
}

.leoServiceDetail__description{
  font-family:var(--leos-serif);

  font-size:14px;
  line-height:2.1;
  letter-spacing:.035em;
}

.leoServiceDetail__description p{
  margin:0 0 25px;
}

.leoServiceDetail__servicesTitle{
  margin:0 0 24px;

  color:var(--leos-red) !important;

  font-size:9px;
  letter-spacing:.18em;
}

.leoServiceDetail__services ul{
  margin:0;
  padding:0;

  list-style:none;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);
}

.leoServiceDetail__services li{
  position:relative;

  min-width:0;

  padding:12px 14px 12px 18px;

  border-bottom:
    1px solid var(--leos-line);

  font-size:12px;
  line-height:1.6;
}

.leoServiceDetail__services li::before{
  content:"";

  position:absolute;

  left:0;
  top:20px;

  width:5px;
  height:1px;

  background:var(--leos-red);
}

.leoServiceDetail--dark .leoServiceDetail__services li{
  border-color:rgba(255,255,255,.12);
  color:#c0bbbb !important;
}


/* WORKS */

.leoServiceDetail__work{
  margin-top:95px;

  display:grid;
  grid-template-columns:
    minmax(0,1.25fr)
    minmax(0,.75fr);

  gap:30px;

  perspective:1200px;
}

.leoServiceDetail__image{
  position:relative;

  min-width:0;

  overflow:hidden;

  transform-style:preserve-3d;

  transition:
    transform .4s var(--leos-ease),
    box-shadow .4s var(--leos-ease) !important;
}

.leoServiceDetail__image:first-child{
  aspect-ratio:16 / 10;
}

.leoServiceDetail__image:last-child{
  margin-top:90px;

  aspect-ratio:16 / 10;
}

.leoServiceDetail__image img{
  position:absolute;
  inset:0;

  width:100% !important;
  height:100% !important;

  object-fit:cover;

  transition:transform .8s var(--leos-ease);
}

.leoServiceDetail__image:hover{
  box-shadow:0 24px 55px rgba(0,0,0,.12);
}

.leoServiceDetail__image:hover img{
  transform:scale(1.035);
}

.leoServiceDetail__image > span{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:40px 24px 20px;

  color:#fff !important;

  font-family:var(--leos-serif);

  font-size:15px;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.72)
    );
}

.leoServiceDetail__image small{
  display:block;

  margin-bottom:7px;

  color:#d9d4d1 !important;

  font-family:var(--leos-sans);

  font-size:8px;
  letter-spacing:.15em;
}


/* =========================================================
MEDIA NOTE
========================================================= */

.leoMediaNote{
  margin-top:90px;

  padding:55px 60px;

  border:
    1px solid rgba(255,255,255,.15);

  display:grid;
  grid-template-columns:
    minmax(0,.8fr)
    minmax(0,1.2fr);

  gap:55px;
}

.leoMediaNote__left,
.leoMediaNote__right{
  min-width:0;
}

.leoMediaNote__left span{
  display:block;

  color:#a84a5b !important;

  font-size:9px;
  letter-spacing:.17em;
}

.leoMediaNote__left strong{
  display:block;

  margin-top:15px;

  color:#fff !important;

  font-family:Georgia,serif;

  font-size:29px;
  font-weight:400;
}

.leoMediaNote__right{
  color:#bdb8b8 !important;

  font-family:var(--leos-serif);

  font-size:13px;
  line-height:2;
}

.leoMediaNote__right p{
  margin:0 0 12px;
}

.leoMediaNote__right a{
  width:170px;

  margin-top:28px;
  padding-bottom:10px;

  border-bottom:
    1px solid rgba(255,255,255,.55);

  display:flex;
  justify-content:space-between;

  color:#fff !important;

  font-family:var(--leos-sans);

  font-size:9px;
  letter-spacing:.15em;

  transition:
    width .4s var(--leos-ease),
    border-color .35s ease !important;
}

.leoMediaNote__right a:hover{
  width:195px;
  border-color:#a84a5b;
}


/* =========================================================
CREATIVE GALLERY
========================================================= */

.leoCreativeGallery{
  margin-top:95px;

  display:grid;
  grid-template-columns:
    minmax(0,1.2fr)
    minmax(0,.8fr);

  gap:25px;
}

.leoCreativeGallery figure{
  position:relative;

  min-width:0;

  margin:0;

  overflow:hidden;
}

.leoCreativeGallery figure:first-child{
  grid-row:span 2;
  aspect-ratio:4 / 5;
}

.leoCreativeGallery figure:nth-child(2),
.leoCreativeGallery figure:nth-child(3){
  aspect-ratio:16 / 10;
}

.leoCreativeGallery img{
  position:absolute;
  inset:0;

  width:100% !important;
  height:100% !important;

  object-fit:cover;

  transition:
    transform .8s var(--leos-ease),
    filter .5s ease;
}

.leoCreativeGallery figure:hover img{
  transform:scale(1.025);
  filter:brightness(.9);
}


/* =========================================================
NOCTA WORKS
========================================================= */

.leoNocta{
  position:relative;

  width:100%;
  max-width:100%;

  margin-top:115px;

  padding:58px 60px 65px;

  overflow:hidden;

  background:#f8f8f6 !important;

  border:
    1px solid rgba(17,17,17,.1);
}

.leoNocta::before{
  content:"NOCTA";

  position:absolute;

  right:-20px;
  top:-55px;

  color:rgba(20,52,84,.035) !important;

  font-family:Georgia,serif;

  font-size:clamp(110px,16vw,230px);
  line-height:1;

  letter-spacing:-.04em;

  pointer-events:none;
}


/* TOP */

.leoNocta__top{
  position:relative;
  z-index:2;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;

  padding-bottom:35px;

  border-bottom:
    1px solid rgba(17,17,17,.1);
}

.leoNocta__label span{
  display:block;

  color:#234e7c !important;

  font-size:10px;
  font-weight:600;
  letter-spacing:.19em;
}

.leoNocta__label small{
  display:block;

  margin-top:7px;

  color:#85898c !important;

  font-size:8px;
  letter-spacing:.15em;
}

.leoNocta__brand{
  flex:none;

  color:#153b64 !important;

  text-align:right;
}

.leoNocta__brand strong{
  display:block;

  color:#153b64 !important;

  font-family:Georgia,serif;

  font-size:23px;
  font-weight:400;
  line-height:1;
  letter-spacing:.04em;
}

.leoNocta__brand span{
  display:block;

  margin-top:5px;

  color:#153b64 !important;

  font-size:10px;
  letter-spacing:.29em;
}


/* INTRO */

.leoNocta__intro{
  position:relative;
  z-index:2;

  margin-top:55px;

  display:grid;
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(0,.95fr);

  gap:60px;

  align-items:start;
}

.leoNocta__heading,
.leoNocta__description{
  min-width:0;
}

.leoNocta__en{
  margin:0 0 18px;

  color:#2a63a7 !important;

  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
}

.leoNocta__heading h3{
  width:100%;

  margin:0;

  color:#171717 !important;

  font-family:var(--leos-serif);

  font-size:clamp(32px,3vw,46px);
  font-weight:500;

  line-height:1.65;
  letter-spacing:.035em;

  word-break:keep-all;
  overflow-wrap:normal;
}

.leoNocta__heading h3 em{
  color:#235fa8 !important;
  font-style:normal;
}

.leoNocta__description{
  width:100%;

  color:#434546 !important;

  font-family:var(--leos-serif);

  font-size:14px;
  line-height:2.05;
  letter-spacing:.025em;
}

.leoNocta__description p{
  width:100%;
  max-width:100%;

  margin:0 0 22px;

  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}


/* FEATURES */

.leoNocta__features{
  position:relative;
  z-index:2;

  margin-top:46px;

  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.leoNocta__features span{
  padding:8px 11px;

  border:
    1px solid rgba(28,79,133,.2);

  color:#315f8f !important;

  font-size:9px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.1em;
}


/* VISUAL */

.leoNocta__visual{
  position:relative;
  z-index:2;

  display:block;

  width:100%;

  margin-top:42px;

  overflow:hidden;

  background:#e7ecf1 !important;

  aspect-ratio:16 / 9;

  transition:
    transform .55s var(--leos-ease),
    box-shadow .55s var(--leos-ease) !important;
}

.leoNocta__visual img{
  position:absolute;
  inset:0;

  width:100% !important;
  max-width:none !important;
  height:100% !important;

  object-fit:cover;
  object-position:center center;

  transform:scale(1.001);

  transition:
    transform .9s var(--leos-ease),
    filter .55s ease;
}

.leoNocta__visualOverlay{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;

  background:rgba(10,36,66,.43);

  color:#fff !important;

  opacity:0;

  transition:opacity .45s ease;
}

.leoNocta__visualOverlay span{
  color:#fff !important;

  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
}

.leoNocta__visualOverlay b{
  color:#fff !important;

  font-size:19px;
  font-weight:400;

  transform:translate(-5px,5px);

  transition:
    transform .45s var(--leos-ease);
}

.leoNocta__visual:hover{
  transform:translateY(-4px);

  box-shadow:
    0 25px 55px rgba(25,48,72,.14);
}

.leoNocta__visual:hover img{
  transform:scale(1.025);
  filter:brightness(.92);
}

.leoNocta__visual:hover .leoNocta__visualOverlay{
  opacity:1;
}

.leoNocta__visual:hover .leoNocta__visualOverlay b{
  transform:translate(0,0);
}


/* BOTTOM */

.leoNocta__bottom{
  position:relative;
  z-index:2;

  margin-top:30px;

  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:50px;
}

.leoNocta__note{
  min-width:0;
}

.leoNocta__note small{
  color:#2c65a3 !important;

  font-size:8px;
  letter-spacing:.15em;
}

.leoNocta__note p{
  max-width:500px;

  margin:9px 0 0;

  color:#343536 !important;

  font-family:var(--leos-serif);

  font-size:13px;
  line-height:1.85;
}

.leoNocta__link{
  flex:none;

  width:205px;

  padding-bottom:11px;

  border-bottom:
    1px solid #173f69 !important;

  display:flex;
  justify-content:space-between;

  color:#173f69 !important;

  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;

  transition:
    width .45s var(--leos-ease),
    color .35s ease,
    border-color .35s ease !important;
}

.leoNocta__link span,
.leoNocta__link b{
  color:inherit !important;
}

.leoNocta__link b{
  font-size:17px;
  font-weight:400;

  transition:
    transform .4s var(--leos-ease);
}

.leoNocta__link:hover{
  width:225px;

  color:#2d70bd !important;
  border-color:#2d70bd !important;
}

.leoNocta__link:hover b{
  transform:translate(3px,-3px);
}


/* =========================================================
SOLUTION STATEMENT
========================================================= */

.leoSolutionStatement{
  margin-top:100px;
  padding:55px 0;

  border-top:
    1px solid rgba(20,20,20,.15);

  border-bottom:
    1px solid rgba(20,20,20,.15);

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    50px
    minmax(0,1fr)
    50px
    minmax(0,1fr);

  align-items:center;
}

.leoSolutionStatement p{
  margin:0;

  font-family:Georgia,serif;

  font-size:clamp(25px,3vw,45px);
  letter-spacing:.03em;

  text-align:center;
}

.leoSolutionStatement span{
  color:var(--leos-red) !important;

  font-size:25px;
  text-align:center;
}


/* =========================================================
CROSS
========================================================= */

.leoCross{
  padding:150px 0 160px;

  background:var(--leos-ivory) !important;
}

.leoCross__heading{
  margin-top:75px;

  display:grid;
  grid-template-columns:
    minmax(0,1.1fr)
    minmax(0,.9fr);

  gap:80px;

  align-items:end;
}

.leoCross__title{
  margin:0;

  font-family:var(--leos-serif);

  font-size:clamp(35px,3.4vw,54px);
  font-weight:500;

  line-height:1.62;

  word-break:keep-all;
}

.leoCross__title em{
  color:var(--leos-red) !important;
  font-style:normal;
}

.leoCross__lead{
  margin:0;

  font-family:var(--leos-serif);

  font-size:13px;
  line-height:2;
}

.leoCross__grid{
  margin-top:80px;

  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  border-top:
    1px solid var(--leos-line);
}

.leoCrossItem{
  min-width:0;
  min-height:350px;

  padding:38px 40px;

  border-right:
    1px solid var(--leos-line);

  transition:
    background .4s ease,
    transform .4s var(--leos-ease);
}

.leoCrossItem:first-child{
  border-left:
    1px solid var(--leos-line);
}

.leoCrossItem:hover{
  background:#ede8df !important;
}

.leoCrossItem > p:first-child{
  margin:0 0 60px;

  color:var(--leos-red) !important;

  font-size:9px;
}

.leoCrossItem > div{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;

  color:#77716e !important;

  font-size:8px;
  letter-spacing:.13em;
}

.leoCrossItem > div b{
  color:var(--leos-red) !important;
  font-weight:400;
}

.leoCrossItem h3{
  margin:22px 0 0;

  font-family:var(--leos-serif);

  font-size:21px;
  font-weight:500;
}

.leoCrossItem > p:last-child{
  margin:26px 0 0;

  color:#5b5753 !important;

  font-size:12px;
  line-height:1.95;
}


/* =========================================================
PROCESS
========================================================= */

.leoProcess{
  padding:145px 0 155px;

  background:var(--leos-black) !important;
  color:#fff !important;
}

.leoProcess__head{
  margin-top:75px;

  display:grid;
  grid-template-columns:
    minmax(0,1.1fr)
    minmax(0,.9fr);

  gap:80px;

  align-items:end;
}

.leoProcess__title{
  margin:0;

  font-family:var(--leos-serif);

  font-size:clamp(35px,3.4vw,54px);
  font-weight:500;

  line-height:1.62;

  word-break:keep-all;
}

.leoProcess__title em{
  color:#b74e60 !important;
  font-style:normal;
}

.leoProcess__lead{
  margin:0;

  color:#aaa5a5 !important;

  font-family:var(--leos-serif);

  font-size:13px;
  line-height:2;
}

.leoProcess__list{
  margin-top:75px;

  border-top:
    1px solid rgba(255,255,255,.15);
}

.leoProcessItem{
  min-height:140px;

  display:grid;
  grid-template-columns:
    8%
    28%
    minmax(0,64%);

  align-items:center;

  border-bottom:
    1px solid rgba(255,255,255,.15);

  transition:
    background .4s var(--leos-ease),
    padding .4s var(--leos-ease);
}

.leoProcessItem:hover{
  padding-left:15px;
  padding-right:15px;

  background:var(--leos-red-dark) !important;
}

.leoProcessItem > span{
  color:#777071 !important;
  font-size:9px;
}

.leoProcessItem small{
  display:block;

  color:#b04b5d !important;

  font-size:8px;
  letter-spacing:.17em;
}

.leoProcessItem h3{
  margin:6px 0 0;

  font-family:var(--leos-serif);

  font-size:22px;
  font-weight:500;
}

.leoProcessItem > p{
  min-width:0;
  max-width:500px;

  margin:0;

  color:#bbb6b6 !important;

  font-size:12px;
  line-height:1.9;
}


/* =========================================================
CONTACT
========================================================= */

.leoServiceContact{
  position:relative;

  overflow:hidden;

  background:#120e0f !important;
  color:#fff !important;
}

.leoServiceContact__bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(130,30,48,.32),
      transparent 33%
    );
}

.leoServiceContact__inner{
  position:relative;
  z-index:2;

  min-height:520px;

  padding-top:95px;
  padding-bottom:90px;
}

.leoServiceContact__label{
  margin:0 0 35px;

  color:#b14b5d !important;

  font-size:10px;
  letter-spacing:.2em;
}

.leoServiceContact__title{
  max-width:800px;

  margin:0;

  font-family:var(--leos-serif);

  font-size:clamp(33px,3.5vw,55px);
  font-weight:500;

  line-height:1.6;

  word-break:keep-all;
}

.leoServiceContact__title span{
  color:#b74d60 !important;
}

.leoServiceContact__text{
  max-width:570px;

  margin:28px 0 0;

  color:#b8b2b3 !important;

  font-family:var(--leos-serif);

  font-size:13px;
  line-height:2;
}

.leoServiceContact__button{
  position:absolute;

  right:0;
  bottom:85px;

  width:310px;
  height:92px;

  padding:0 29px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:var(--leos-red) !important;
  color:#fff !important;

  transition:
    width .45s var(--leos-ease),
    background .4s ease,
    transform .4s var(--leos-ease) !important;
}

.leoServiceContact__button:hover{
  width:335px;

  background:#91283b !important;

  transform:translateY(-3px);
}

.leoServiceContact__button small{
  display:block;

  margin-bottom:6px;

  color:rgba(255,255,255,.65) !important;

  font-size:8px;
  letter-spacing:.15em;
}

.leoServiceContact__button span{
  color:#fff !important;

  font-family:var(--leos-serif);

  font-size:16px;
}

.leoServiceContact__button b{
  color:#fff !important;

  font-size:20px;
  font-weight:400;
}


/* =========================================================
FOOTER
========================================================= */

.leoSubFooter{
  padding:55px 0 27px;

  background:#0e0e0e !important;
  color:#fff !important;
}

.leoSubFooter__top{
  padding-bottom:45px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:40px;
}

.leoSubFooter__logo{
  width:82px;
  flex:none;
}

.leoSubFooter__logo img{
  width:100%;
}

.leoSubFooter nav{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}

.leoSubFooter nav a{
  color:#aaa5a5 !important;

  font-size:10px;
  letter-spacing:.14em;

  transition:color .35s ease !important;
}

.leoSubFooter nav a:hover{
  color:#fff !important;
}

.leoSubFooter__bottom{
  padding-top:21px;

  border-top:
    1px solid rgba(255,255,255,.11);

  display:flex;
  justify-content:space-between;

  color:#817c7c !important;

  font-size:10px;
  line-height:1.8;
}

.leoSubFooter__bottom p{
  margin:0;
  color:inherit !important;
}


/* =========================================================
REVEAL
========================================================= */

.leoSubReveal{
  opacity:0;

  transform:translateY(24px);

  transition:
    opacity .9s var(--leos-ease),
    transform .9s var(--leos-ease);
}

.leoSubReveal.is-show{
  opacity:1;
  transform:none;
}


/* =========================================================
TABLET
========================================================= */

@media(max-width:1100px){

  .leoSubContainer,
  .leoServiceFv__inner{
    width:calc(100% - 64px);
  }

  .leoSubHeader__inner{
    padding:0 30px;
  }

  .leoSubHeader__nav{
    gap:19px;
  }

  .leoSubHeader__contact{
    margin-left:22px;
  }

  .leoServiceFv__inner{
    grid-template-columns:
      minmax(0,1.25fr)
      minmax(0,.75fr);

    gap:45px;
  }

  .leoServiceFv__title{
    font-size:43px;
  }

  .leoServiceIntro__body{
    gap:55px;
  }

  .leoServiceDetail__content{
    width:calc(100% - 120px);

    gap:45px;
  }

  .leoNocta{
    padding:50px 45px 55px;
  }

  .leoNocta__intro{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:38px;
  }

  .leoNocta__heading h3{
    font-size:clamp(29px,3.3vw,39px);
  }

  .leoNocta__description{
    font-size:13px;
  }

}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .leoSubContainer{
    width:calc(100% - 40px);
  }


  /* HEADER */

  .leoSubHeader{
    height:70px;
  }

  .leoSubHeader__inner{
    padding:0 20px;
  }

  .leoSubHeader__logo{
    width:58px;
  }

  .leoSubHeader__logo img{
    width:53px;
  }

  .leoSubHeader__nav,
  .leoSubHeader__contact{
    display:none;
  }

  .leoSubMenuButton{
    margin-left:auto !important;

    width:42px !important;
    height:42px !important;

    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:transparent !important;

    display:flex !important;

    flex-direction:column;
    align-items:flex-end;
    justify-content:center;

    gap:7px;
  }

  .leoSubMenuButton span{
    width:24px;
    height:1px;

    display:block;

    background:#171717 !important;

    transition:
      width .4s var(--leos-ease),
      transform .4s var(--leos-ease),
      background .3s ease;
  }

  .leoSubMenuButton span:last-child{
    width:16px;
  }

  .leoSubMenuButton.is-open span{
    background:#fff !important;
  }

  .leoSubMenuButton.is-open span:first-child{
    width:23px;

    transform:
      translateY(4px)
      rotate(45deg);
  }

  .leoSubMenuButton.is-open span:last-child{
    width:23px;

    transform:
      translateY(-4px)
      rotate(-45deg);
  }


  /* FV */

  .leoServiceFv{
    min-height:auto;

    padding:130px 20px 105px;
  }

  .leoServiceFv__line{
    display:none;
  }

  .leoServiceFv__inner{
    width:100%;

    display:block;
  }

  .leoServiceFv__label{
    margin-bottom:42px;

    font-size:11px;
  }

  .leoServiceFv__title{
    font-size:31px;
    line-height:1.72;
  }

  .leoServiceFv__title span{
    white-space:normal;
  }

  .leoServiceFv__right{
    margin-top:52px;
    padding:0;
  }

  .leoServiceFv__en{
    margin-bottom:26px;

    font-size:19px;
  }

  .leoServiceFv__lead{
    max-width:none;

    font-size:13px;
    line-height:2;
  }

  .leoServiceFv__bottom{
    position:relative;

    width:calc(100% + 40px);

    margin:75px 0 -105px -20px;

    min-height:51px;

    padding:0 20px;

    justify-content:flex-start;

    gap:20px;

    overflow:hidden;
  }

  .leoServiceFv__bottom p{
    flex:none;

    font-size:8px;
  }


  /* SECTION HEAD */

  .leoSubSectionHead span{
    font-size:12px;
  }

  .leoSubSectionHead small{
    font-size:10px;
  }


  /* INTRO */

  .leoServiceIntro{
    padding:85px 0 105px;
  }

  .leoServiceIntro__body{
    margin-top:50px;

    display:block;
  }

  .leoServiceIntro__title{
    font-size:28px;
  }

  .leoServiceIntro__content{
    margin-top:35px;

    max-width:none;

    font-size:13px;
    line-height:2.05;
  }

  .leoServiceIntro__big{
    bottom:-15px;

    font-size:85px;
  }


  /* INDEX */

  .leoServiceIndex{
    display:block;
  }

  .leoServiceIndex a{
    min-height:0;

    padding:27px 22px;

    border-right:0;

    border-bottom:
      1px solid rgba(255,255,255,.13);

    display:grid;

    grid-template-columns:
      35px
      minmax(0,1fr)
      28px;

    align-items:center;
  }

  .leoServiceIndex a:hover{
    padding:27px 22px;
  }

  .leoServiceIndex span{
    grid-column:2;

    margin:0 0 4px;

    font-size:8px;
  }

  .leoServiceIndex b{
    grid-column:2;

    margin:0;

    font-size:18px;
  }

  .leoServiceIndex i{
    position:static;

    grid-column:3;
    grid-row:1 / 3;

    justify-self:end;
  }


  /* DETAILS */

  .leoServiceDetail{
    padding:90px 0 100px;
  }

  .leoServiceDetail__head{
    display:block;
  }

  .leoServiceDetail__number span{
    font-size:32px;
  }

  .leoServiceDetail__heading{
    margin-top:40px;
  }

  .leoServiceDetail__title{
    font-size:28px;
  }

  .leoServiceDetail__content{
    width:100%;
    max-width:none;

    margin-top:45px;

    display:block;
  }

  .leoServiceDetail__description{
    font-size:13px;
    line-height:2.05;
  }

  .leoServiceDetail__services{
    margin-top:40px;
  }

  .leoServiceDetail__services li{
    font-size:11px;
  }

  .leoServiceDetail__work{
    margin-top:55px;

    display:block;
  }

  .leoServiceDetail__image,
  .leoServiceDetail__image:first-child,
  .leoServiceDetail__image:last-child{
    width:100%;

    aspect-ratio:16 / 10;

    margin:0 0 20px;
  }


  /* MEDIA */

  .leoMediaNote{
    margin-top:55px;

    padding:35px 25px;

    display:block;
  }

  .leoMediaNote__left strong{
    font-size:24px;
  }

  .leoMediaNote__right{
    margin-top:30px;

    font-size:12px;
  }


  /* CREATIVE */

  .leoCreativeGallery{
    margin-top:55px;

    display:block;
  }

  .leoCreativeGallery figure,
  .leoCreativeGallery figure:first-child,
  .leoCreativeGallery figure:nth-child(2),
  .leoCreativeGallery figure:nth-child(3){
    width:100%;

    aspect-ratio:16 / 10;

    margin:0 0 18px;
  }


  /* NOCTA */

  .leoNocta{
    margin-top:65px;

    padding:34px 20px 38px;

    border-left:0;
    border-right:0;
  }

  .leoNocta::before{
    top:-15px;
    right:-5px;

    font-size:82px;
  }

  .leoNocta__top{
    gap:15px;

    padding-bottom:24px;
  }

  .leoNocta__label span{
    font-size:9px;
  }

  .leoNocta__label small{
    font-size:7px;
  }

  .leoNocta__brand strong{
    font-size:18px;
  }

  .leoNocta__brand span{
    margin-top:4px;

    font-size:8px;
  }

  .leoNocta__intro{
    margin-top:35px;

    display:block;
  }

  .leoNocta__en{
    font-size:8px;
  }

  .leoNocta__heading h3{
    font-size:26px;
    line-height:1.72;

    word-break:keep-all;
  }

  .leoNocta__description{
    margin-top:30px;

    font-size:12px;
    line-height:2;
  }

  .leoNocta__features{
    margin-top:30px;

    gap:6px;
  }

  .leoNocta__features span{
    padding:7px 8px;

    font-size:8px;
  }

  .leoNocta__visual{
    margin-top:30px;

    aspect-ratio:16 / 10;
  }

  .leoNocta__visualOverlay{
    display:none;
  }

  .leoNocta__bottom{
    margin-top:25px;

    display:block;
  }

  .leoNocta__note p{
    font-size:12px;
  }

  .leoNocta__link{
    width:100%;

    margin-top:28px;
    padding-bottom:12px;

    font-size:9px;
  }

  .leoNocta__link:hover{
    width:100%;
  }


  /* SOLUTION STATEMENT */

  .leoSolutionStatement{
    margin-top:60px;
    padding:30px 0;

    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      26px
      minmax(0,1fr);

    gap:8px;
  }

  .leoSolutionStatement p{
    font-size:17px;
  }

  .leoSolutionStatement p:last-child{
    grid-column:1 / 4;

    margin-top:15px;
  }

  .leoSolutionStatement span{
    font-size:17px;
  }

  .leoSolutionStatement span:last-of-type{
    display:none;
  }


  /* CROSS */

  .leoCross{
    padding:85px 0 95px;
  }

  .leoCross__heading{
    margin-top:48px;

    display:block;
  }

  .leoCross__title{
    font-size:28px;
  }

  .leoCross__lead{
    margin-top:30px;

    font-size:12px;
  }

  .leoCross__grid{
    margin-top:50px;

    display:block;
  }

  .leoCrossItem{
    min-height:0;

    padding:34px 22px 38px;

    border-left:0 !important;
    border-right:0;

    border-bottom:
      1px solid var(--leos-line);
  }

  .leoCrossItem > p:first-child{
    margin-bottom:35px;
  }


  /* PROCESS */

  .leoProcess{
    padding:85px 0 95px;
  }

  .leoProcess__head{
    margin-top:48px;

    display:block;
  }

  .leoProcess__title{
    font-size:28px;
  }

  .leoProcess__lead{
    margin-top:30px;

    font-size:12px;
  }

  .leoProcess__list{
    margin-top:50px;
  }

  .leoProcessItem{
    min-height:0;

    padding:30px 0;

    grid-template-columns:
      30px
      minmax(0,1fr)
      25px;

    align-items:start;
  }

  .leoProcessItem:hover{
    padding-left:0;
    padding-right:0;

    background:transparent !important;
  }

  .leoProcessItem > span{
    grid-column:1;
  }

  .leoProcessItem > div{
    grid-column:2;
  }

  .leoProcessItem > p{
    grid-column:2 / 4;

    margin-top:18px;

    font-size:11px;
  }


  /* CONTACT */

  .leoServiceContact__inner{
    min-height:520px;

    padding:75px 0 160px;
  }

  .leoServiceContact__title{
    font-size:29px;
  }

  .leoServiceContact__text{
    font-size:12px;
  }

  .leoServiceContact__button{
    left:0;
    right:auto;
    bottom:50px;

    width:100%;
    height:72px;
  }

  .leoServiceContact__button:hover{
    width:100%;
    transform:none;
  }


  /* FOOTER */

  .leoSubFooter{
    padding-top:45px;
  }

  .leoSubFooter__top{
    align-items:flex-start;
  }

  .leoSubFooter__logo{
    width:68px;
  }

  .leoSubFooter nav{
    display:grid;

    grid-template-columns:
      1fr
      1fr;

    gap:15px 22px;
  }

  .leoSubFooter nav a{
    font-size:9px;
  }

  .leoSubFooter__bottom{
    display:block;

    font-size:9px;
  }

  .leoSubFooter__bottom > p{
    margin-top:20px;
  }

}


/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:390px){

  .leoServiceFv__title{
    font-size:29px;
  }

  .leoServiceDetail__title{
    font-size:26px;
  }

  .leoNocta__heading h3{
    font-size:24px;
  }

  .leoCross__title,
  .leoProcess__title{
    font-size:26px;
  }

  .leoServiceContact__title{
    font-size:27px;
  }

}


/* =========================================================
REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .leoSubReveal{
    opacity:1 !important;

    transform:none !important;

    transition:none !important;
  }

  .leoServiceDetail__image,
  .leoServiceDetail__image img,
  .leoCreativeGallery img,
  .leoNocta__visual,
  .leoNocta__visual img{
    transition:none !important;
  }

}/* End custom CSS */