.elementor-1319 .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 WORKS PAGE
========================================================= */

:root{
  --leow-black:#101010;
  --leow-red:#741b2b;
  --leow-red-light:#a74355;
  --leow-red-dark:#50111d;

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

  --leow-text:#171717;
  --leow-gray:#77726d;

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

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

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

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


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

body.leoWorksMenuOpen{
  overflow:hidden !important;
}

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

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

  overflow:hidden;

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

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

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

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

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

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

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


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

.leoWorksHeader{
  position:absolute;

  top:0;
  left:0;

  z-index:1000;

  width:100%;
  height:82px;

  color:#171717 !important;

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

.leoWorksHeader.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);
}

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

.leoWorksHeader__inner{
  width:100%;
  height:100%;

  padding:0 46px;

  display:flex;
  align-items:center;
}

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

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

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

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

  object-fit:contain;

  filter:invert(1);
}

.leoWorksHeader__nav{
  margin-left:auto;

  display:flex;
  align-items:center;

  gap:34px;
}

.leoWorksHeader__nav a,
.leoWorksHeader__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;
}

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

  position:absolute;

  left:0;
  bottom:2px;

  width:100%;
  height:1px;

  background:var(--leow-red);

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

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

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

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

.leoWorksHeader__contact,
.leoWorksHeader__contact:visited{
  height:42px;

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

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

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

  display:flex;
  align-items:center;

  gap:22px;

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

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

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

.leoWorksHeader__contact:hover{
  background:var(--leow-red) !important;
  border-color:var(--leow-red) !important;

  color:#fff !important;

  transform:translateY(-2px);
}

.leoWorksMenuButton{
  display:none !important;
}


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

.leoWorksMenu{
  position:fixed;
  inset:0;

  z-index:950;

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

  opacity:0;
  visibility:hidden;

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

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

.leoWorksMenu__inner{
  min-height:100%;

  padding:115px 26px 45px;

  display:flex;
  flex-direction:column;
}

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

.leoWorksMenu 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 ease,
    padding-left .4s var(--leow-ease) !important;
}

.leoWorksMenu nav a:hover{
  padding-left:8px;

  color:#bf6575 !important;
}

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

  width:38px;

  margin-right:7px;

  color:#a54758 !important;

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

  font-size:9px;
}

.leoWorksMenu__inner > p{
  margin:auto 0 0;

  color:#963246 !important;

  font-size:10px;

  letter-spacing:.18em;
}


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

.leoWorksFv{
  position:relative;

  min-height:720px;

  padding:190px 0 95px;

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

.leoWorksFv__line{
  position:absolute;

  top:82px;
  bottom:58px;
  left:61%;

  width:1px;

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

.leoWorksFv__inner{
  display:grid;

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

  gap:90px;
}

.leoWorksFv__main,
.leoWorksFv__side{
  min-width:0;
}

.leoWorksFv__label{
  margin:0 0 72px;

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

  font-family:Georgia,serif;

  font-size:13px;

  letter-spacing:.2em;
}

.leoWorksFv__title{
  margin:0;

  color:#171717 !important;

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

  font-size:
    clamp(
      40px,
      4.1vw,
      65px
    );

  font-weight:500;

  line-height:1.58;

  letter-spacing:.05em;

  word-break:keep-all;
}

.leoWorksFv__title span{
  display:block;

  white-space:nowrap;
}

.leoWorksFv__title em{
  color:var(--leow-red) !important;

  font-style:normal;
}

.leoWorksFv__side{
  padding-top:64px;
}

.leoWorksFv__en{
  margin:0 0 55px;

  color:#bbb5ae !important;

  font-family:Georgia,serif;

  font-size:30px;

  line-height:1.2;

  letter-spacing:.05em;
}

.leoWorksFv__lead{
  max-width:410px;

  margin:0;

  color:#393633 !important;

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

  font-size:14px;

  line-height:2.1;

  letter-spacing:.035em;
}

.leoWorksFv__bottom{
  position:absolute;

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

  min-height:58px;

  padding:0 5vw;

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

  gap:30px;

  background:var(--leow-red) !important;

  color:#fff !important;
}

.leoWorksFv__bottom span{
  color:#fff !important;

  font-size:9px;

  letter-spacing:.18em;
}

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

  border-radius:50%;

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


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

.leoWorksSectionHead{
  display:flex;

  align-items:flex-start;

  gap:18px;
}

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

  margin:2px 0 0;

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

  font-size:10px;
}

.leoWorksSectionHead span{
  display:block;

  font-family:Georgia,serif;

  font-size:14px;

  letter-spacing:.1em;
}

.leoWorksSectionHead small{
  display:block;

  margin-top:6px;

  color:#77726d !important;

  font-size:11px;
}

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

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


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

.leoWorksIntro{
  position:relative;

  overflow:hidden;

  padding:145px 0 165px;

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

.leoWorksIntro__body{
  margin-top:80px;

  display:grid;

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

  gap:90px;
}

.leoWorksIntro__title{
  margin:0;

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

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

  font-weight:500;

  line-height:1.65;

  letter-spacing:.055em;

  word-break:keep-all;
}

.leoWorksIntro__title em{
  color:var(--leow-red) !important;

  font-style:normal;
}

.leoWorksIntro__text{
  max-width:520px;

  color:#3c3936 !important;

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

  font-size:14px;

  line-height:2.1;

  letter-spacing:.035em;
}

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

.leoWorksIntro__word{
  position:absolute;

  right:-15px;
  bottom:-60px;

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

  font-family:Georgia,serif;

  font-size:
    clamp(
      130px,
      18vw,
      280px
    );

  line-height:1;

  pointer-events:none;
}


/* =========================================================
FILTER
========================================================= */

.leoWorksFilter{
  position:relative;

  z-index:5;

  background:var(--leow-white) !important;

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

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

.leoWorksFilter__inner{
  min-height:82px;

  display:flex;

  align-items:center;

  gap:35px;
}

.leoWorksFilter__button{
  position:relative;

  padding:
    12px
    0 !important;

  border:0 !important;

  border-radius:0 !important;

  background:
    transparent !important;

  box-shadow:none !important;

  color:#817b76 !important;

  font-family:
    var(--leow-sans) !important;

  font-size:10px !important;

  font-weight:500 !important;

  line-height:1 !important;

  letter-spacing:.15em;

  cursor:pointer;

  transition:
    color .35s ease !important;
}

.leoWorksFilter__button::after{
  content:"";

  position:absolute;

  left:0;
  bottom:3px;

  width:100%;
  height:1px;

  background:var(--leow-red);

  transform:scaleX(0);

  transform-origin:right;

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

.leoWorksFilter__button:hover,
.leoWorksFilter__button.is-active{
  color:#171717 !important;
}

.leoWorksFilter__button.is-active::after{
  transform:scaleX(1);

  transform-origin:left;
}


/* =========================================================
PROJECTS
========================================================= */

.leoProjects{
  padding:120px 0 160px;

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

.leoProjects__grid{
  display:grid;

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

  gap:
    110px
    34px;

  align-items:start;
}


/* FILTER TRANSITION */

.leoProject{
  min-width:0;

  transition:
    opacity .4s ease,
    transform .5s var(--leow-ease);
}

.leoProject.is-filter-hidden{
  display:none !important;
}


/* -----------------------------------------
PROJECT HERO
----------------------------------------- */

.leoProject--hero{
  grid-column:1 / 13;
}

.leoProject--hero
.leoProject__visual{
  aspect-ratio:
    16 / 8.5;
}


/* -----------------------------------------
HALF
----------------------------------------- */

.leoProject--half{
  grid-column:
    span 6;
}

.leoProject--half
.leoProject__visual{
  aspect-ratio:
    16 / 11;
}

.leoProject--offset{
  margin-top:115px;
}


/* -----------------------------------------
BOTTOM
----------------------------------------- */

.leoProject--wide{
  grid-column:
    1 / 8;
}

.leoProject--wide
.leoProject__visual{
  aspect-ratio:
    16 / 10;
}

.leoProject--small{
  grid-column:
    8 / 13;

  margin-top:110px;
}

.leoProject--small
.leoProject__visual{
  aspect-ratio:
    4 / 3;
}


/* -----------------------------------------
VISUAL
----------------------------------------- */

.leoProject__visual{
  position:relative;

  display:block;

  overflow:hidden;

  background:#e3e0da !important;

  color:#fff !important;

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

.leoProject__visual > img{
  position:absolute;

  inset:0;

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

  object-fit:cover;

  transform:scale(1.001);

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

.leoProject--hero
.leoProject__visual > img{
  object-position:center center;
}

.leoProject--half:first-of-type
.leoProject__visual > img{
  object-position:center top;
}

.leoProject__type{
  position:absolute;

  top:22px;
  left:24px;

  z-index:4;

  margin:0 !important;

  padding:
    8px
    11px;

  background:
    rgba(15,15,15,.72) !important;

  color:#fff !important;

  font-size:8px !important;

  line-height:1;

  letter-spacing:.15em;

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

  backdrop-filter:
    blur(8px);
}

.leoProject__overlay{
  position:absolute;

  inset:0;

  z-index:3;

  display:flex;

  justify-content:center;
  align-items:center;

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

  opacity:0;

  transition:
    opacity .45s ease;
}

.leoProject__overlay > div{
  display:flex;

  align-items:center;

  gap:13px;

  color:#fff !important;
}

.leoProject__overlay small{
  color:#fff !important;

  font-size:9px;

  letter-spacing:.17em;
}

.leoProject__overlay span{
  color:#fff !important;

  font-size:18px;

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

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

.leoProject__visual:hover{
  transform:
    translateY(-5px);

  box-shadow:
    0 26px 55px
    rgba(0,0,0,.11);
}

.leoProject__visual:hover > img{
  transform:scale(1.025);
}

.leoProject__visual:hover
.leoProject__overlay{
  opacity:1;
}

.leoProject__visual:hover
.leoProject__overlay span{
  transform:translate(0,0);
}


/* -----------------------------------------
INFO
----------------------------------------- */

.leoProject__info{
  margin-top:25px;
}

.leoProject__heading > p{
  margin:
    0
    0
    10px !important;

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

  font-size:9px !important;

  font-weight:500;

  line-height:1.5;

  letter-spacing:.15em;
}

.leoProject__heading h2{
  margin:0;

  color:#171717 !important;

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

  font-size:
    clamp(
      23px,
      2vw,
      32px
    );

  font-weight:500;

  line-height:1.5;

  letter-spacing:.03em;
}


/* HERO DETAIL */

.leoProject--hero
.leoProject__info{
  margin-top:35px;

  display:grid;

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

  gap:80px;
}

.leoProject__detail{
  min-width:0;
}

.leoProject__detail dl{
  margin:0;

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

.leoProject__detail dl > div{
  min-height:55px;

  padding:
    14px
    0;

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

  display:grid;

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

  align-items:center;
}

.leoProject__detail dt{
  color:#8a847f !important;

  font-size:8px;

  letter-spacing:.14em;
}

.leoProject__detail dd{
  margin:0;

  color:#363330 !important;

  font-size:11px;

  line-height:1.7;
}

.leoProject__description{
  max-width:590px;

  margin:
    28px
    0
    0;

  color:#4c4844 !important;

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

  font-size:13px;

  line-height:2;
}


/* STANDARD MINI */

.leoProject__mini{
  margin-top:14px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:#77716d !important;
}

.leoProject__mini span{
  color:#77716d !important;

  font-size:11px;
}

.leoProject__mini b{
  color:#171717 !important;

  font-size:17px;

  font-weight:400;
}


/* =========================================================
NOCTA PROJECT
========================================================= */

.leoProject--nocta{
  grid-column:
    1 / 13;

  margin-top:35px;

  padding:
    75px
    70px
    70px;

  background:
    #f5f7f8 !important;

  border:
    1px solid
    rgba(20,55,90,.1);
}

.leoProjectNocta__intro{
  display:grid;

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

  gap:90px;
}

.leoProjectNocta__label{
  margin:
    0
    0
    28px;

  color:#2765a8 !important;

  font-size:9px;

  font-weight:600;

  letter-spacing:.18em;
}

.leoProjectNocta__intro h2{
  margin:0;

  color:#173c63 !important;

  font-family:Georgia,serif;

  font-size:
    clamp(
      42px,
      4vw,
      65px
    );

  font-weight:400;

  line-height:.9;

  letter-spacing:.02em;
}

.leoProjectNocta__intro h2 span{
  display:block;

  margin-top:13px;

  font-size:.4em;

  letter-spacing:.3em;
}

.leoProjectNocta__catch{
  margin:0;

  color:#171717 !important;

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

  font-size:
    clamp(
      27px,
      2.6vw,
      41px
    );

  font-weight:500;

  line-height:1.65;
}

.leoProjectNocta__catch em{
  color:#2765a8 !important;

  font-style:normal;
}

.leoProjectNocta__text{
  max-width:550px;

  margin:
    30px
    0
    0;

  color:#4e5052 !important;

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

  font-size:13px;

  line-height:2;
}

.leoProjectNocta__visual{
  position:relative;

  display:block;

  width:100%;

  margin-top:55px;

  overflow:hidden;

  aspect-ratio:
    16 / 8.9;

  background:#e8edf2 !important;

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

.leoProjectNocta__visual img{
  position:absolute;

  inset:0;

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

  object-fit:cover;

  transition:
    transform .9s var(--leow-ease),
    filter .5s ease;
}

.leoProjectNocta__overlay{
  position:absolute;

  inset:0;

  z-index:2;

  display:flex;

  justify-content:center;
  align-items:center;

  gap:14px;

  background:
    rgba(12,40,68,.38);

  color:#fff !important;

  opacity:0;

  transition:
    opacity .45s ease;
}

.leoProjectNocta__overlay span{
  color:#fff !important;

  font-size:9px;

  letter-spacing:.17em;
}

.leoProjectNocta__overlay b{
  color:#fff !important;

  font-size:19px;

  font-weight:400;

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

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

.leoProjectNocta__visual:hover{
  transform:
    translateY(-5px);

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

.leoProjectNocta__visual:hover img{
  transform:scale(1.022);

  filter:brightness(.94);
}

.leoProjectNocta__visual:hover
.leoProjectNocta__overlay{
  opacity:1;
}

.leoProjectNocta__visual:hover
.leoProjectNocta__overlay b{
  transform:translate(0,0);
}

.leoProjectNocta__bottom{
  margin-top:30px;

  padding-top:28px;

  border-top:
    1px solid
    rgba(20,55,90,.12);

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:60px;
}

.leoProjectNocta__bottom span{
  display:block;

  margin-bottom:7px;

  color:#2765a8 !important;

  font-size:8px;

  letter-spacing:.15em;
}

.leoProjectNocta__bottom p{
  margin:0;

  color:#484b4e !important;

  font-size:11px;

  line-height:1.7;
}


/* EMPTY */

.leoProjectsEmpty{
  display:none;

  padding:100px 0;

  text-align:center;
}

.leoProjectsEmpty.is-show{
  display:block;
}

.leoProjectsEmpty p{
  color:#77726d !important;

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

  font-size:14px;
}


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

.leoWorksStatement{
  padding:145px 0 155px;

  background:var(--leow-black) !important;

  color:#fff !important;
}

.leoWorksStatement__body{
  margin-top:75px;

  display:grid;

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

  gap:90px;

  align-items:end;
}

.leoWorksStatement__title{
  margin:0;

  color:#fff !important;

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

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

  font-weight:500;

  line-height:1.65;

  word-break:keep-all;
}

.leoWorksStatement__title em{
  color:#ba4e61 !important;

  font-style:normal;
}

.leoWorksStatement__text{
  max-width:520px;

  color:#b8b3b3 !important;

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

  font-size:13px;

  line-height:2;
}

.leoWorksStatement__text p{
  margin:0 0 22px;
}

.leoWorksStatement__words{
  margin-top:95px;

  padding:
    52px
    0;

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

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

  display:grid;

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

  align-items:center;
}

.leoWorksStatement__words span{
  color:#fff !important;

  font-family:Georgia,serif;

  font-size:
    clamp(
      25px,
      3vw,
      44px
    );

  text-align:center;

  letter-spacing:.03em;
}

.leoWorksStatement__words i{
  color:#ad4558 !important;

  font-size:21px;

  font-style:normal;

  text-align:center;
}


/* =========================================================
CASE STUDY
========================================================= */

.leoCase{
  padding:145px 0 160px;

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

.leoCase__body{
  margin-top:75px;

  display:grid;

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

  gap:90px;

  align-items:end;
}

.leoCase__title{
  margin:0;

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

  font-size:
    clamp(
      34px,
      3.3vw,
      52px
    );

  font-weight:500;

  line-height:1.65;

  word-break:keep-all;
}

.leoCase__title em{
  color:var(--leow-red) !important;

  font-style:normal;
}

.leoCase__right > p{
  max-width:500px;

  margin:0;

  color:#4c4844 !important;

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

  font-size:13px;

  line-height:2;
}

.leoCase__status{
  margin-top:35px;

  padding:
    18px
    0;

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

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

  display:flex;

  justify-content:space-between;

  align-items:center;
}

.leoCase__status span{
  color:#88827d !important;

  font-size:9px;

  letter-spacing:.15em;
}

.leoCase__status b{
  color:var(--leow-red) !important;

  font-size:9px;

  font-weight:500;

  letter-spacing:.15em;
}


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

.leoWorksContact{
  position:relative;

  overflow:hidden;

  background:#120e0f !important;

  color:#fff !important;
}

.leoWorksContact__bg{
  position:absolute;

  inset:0;

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

.leoWorksContact__inner{
  position:relative;

  z-index:2;

  min-height:520px;

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

.leoWorksContact__label{
  margin:0 0 35px;

  color:#b14b5d !important;

  font-size:10px;

  letter-spacing:.2em;
}

.leoWorksContact__title{
  max-width:850px;

  margin:0;

  color:#fff !important;

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

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

  font-weight:500;

  line-height:1.6;

  word-break:keep-all;
}

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

.leoWorksContact__text{
  max-width:580px;

  margin:
    28px
    0
    0;

  color:#b8b2b3 !important;

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

  font-size:13px;

  line-height:2;
}

.leoWorksContact__button,
.leoWorksContact__button:visited{
  position:absolute;

  right:0;
  bottom:85px;

  width:310px;
  height:92px;

  padding:
    0
    29px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  background:var(--leow-red) !important;

  color:#fff !important;

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

.leoWorksContact__button:hover{
  width:335px;

  background:#91283b !important;

  transform:translateY(-3px);
}

.leoWorksContact__button span{
  color:#fff !important;

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

  font-size:16px;
}

.leoWorksContact__button small{
  display:block;

  margin-bottom:6px;

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

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

  font-size:8px;

  letter-spacing:.15em;
}

.leoWorksContact__button b{
  color:#fff !important;

  font-size:20px;

  font-weight:400;
}


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

.leoWorksFooter{
  padding:
    55px
    0
    27px;

  background:#0e0e0e !important;

  color:#fff !important;
}

.leoWorksFooter__top{
  padding-bottom:45px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:40px;
}

.leoWorksFooter__logo{
  width:82px;

  flex:none;
}

.leoWorksFooter__logo img{
  width:100%;
}

.leoWorksFooter nav{
  display:flex;

  flex-wrap:wrap;

  gap:30px;
}

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

  font-size:10px;

  letter-spacing:.14em;

  transition:
    color .35s ease !important;
}

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

.leoWorksFooter__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;
}

.leoWorksFooter__bottom p{
  margin:0;

  color:inherit !important;
}


/* =========================================================
CURSOR
========================================================= */

.leoWorksCursor{
  position:fixed;

  z-index:9999;

  top:0;
  left:0;

  width:62px;
  height:62px;

  border-radius:50%;

  background:
    rgba(113,27,43,.94) !important;

  color:#fff !important;

  display:flex;

  justify-content:center;

  align-items:center;

  pointer-events:none;

  opacity:0;

  transform:
    translate(-50%,-50%)
    scale(.7);

  transition:
    opacity .2s ease,
    transform .35s var(--leow-ease);
}

.leoWorksCursor span{
  color:#fff !important;

  font-size:8px;

  letter-spacing:.13em;
}

.leoWorksCursor.is-active{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}


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

.leoWorksReveal{
  opacity:0;

  transform:
    translateY(24px);

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

.leoWorksReveal.is-show{
  opacity:1;

  transform:none;
}


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

@media(max-width:1100px){

  .leoWorksContainer{
    width:
      calc(100% - 64px);
  }

  .leoWorksHeader__inner{
    padding:
      0
      30px;
  }

  .leoWorksHeader__nav{
    gap:19px;
  }

  .leoWorksHeader__contact{
    margin-left:22px;
  }

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

    gap:50px;
  }

  .leoWorksFv__title{
    font-size:43px;
  }

  .leoWorksIntro__body,
  .leoWorksStatement__body,
  .leoCase__body{
    gap:55px;
  }

  .leoProject--hero
  .leoProject__info{
    gap:50px;
  }

  .leoProject--nocta{
    padding:
      60px
      50px;
  }

  .leoProjectNocta__intro{
    gap:55px;
  }

}


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

@media(max-width:767px){

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


  /* HEADER */

  .leoWorksHeader{
    height:70px;
  }

  .leoWorksHeader__inner{
    padding:
      0
      20px;
  }

  .leoWorksHeader__logo{
    width:58px;
  }

  .leoWorksHeader__logo img{
    width:53px;
  }

  .leoWorksHeader__nav,
  .leoWorksHeader__contact{
    display:none !important;
  }

  .leoWorksMenuButton{
    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;
  }

  .leoWorksMenuButton span{
    display:block;

    width:24px;
    height:1px;

    background:#171717 !important;

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

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

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

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

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

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

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


  /* FV */

  .leoWorksFv{
    min-height:auto;

    padding:
      130px
      20px
      105px;
  }

  .leoWorksFv__line{
    display:none;
  }

  .leoWorksFv__inner{
    width:100%;

    display:block;
  }

  .leoWorksFv__label{
    margin-bottom:42px;

    font-size:11px;
  }

  .leoWorksFv__title{
    font-size:31px;

    line-height:1.72;
  }

  .leoWorksFv__title span{
    white-space:normal;
  }

  .leoWorksFv__side{
    margin-top:55px;

    padding:0;
  }

  .leoWorksFv__en{
    margin-bottom:28px;

    font-size:20px;
  }

  .leoWorksFv__lead{
    max-width:none;

    font-size:13px;

    line-height:2;
  }

  .leoWorksFv__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;
  }

  .leoWorksFv__bottom span{
    flex:none;

    font-size:8px;
  }


  /* INTRO */

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

  .leoWorksIntro__body{
    margin-top:50px;

    display:block;
  }

  .leoWorksIntro__title{
    font-size:28px;
  }

  .leoWorksIntro__text{
    margin-top:35px;

    max-width:none;

    font-size:13px;
  }

  .leoWorksIntro__word{
    bottom:-15px;

    font-size:85px;
  }


  /* SECTION HEAD */

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

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


  /* FILTER */

  .leoWorksFilter{
    overflow-x:auto;

    -webkit-overflow-scrolling:
      touch;
  }

  .leoWorksFilter__inner{
    width:max-content;

    min-width:100%;
    min-height:64px;

    padding:
      0
      20px;

    gap:27px;
  }

  .leoWorksFilter__button{
    flex:none;

    font-size:9px !important;
  }


  /* PROJECTS */

  .leoProjects{
    padding:
      75px
      0
      100px;
  }

  .leoProjects__grid{
    display:block;
  }

  .leoProject,
  .leoProject--hero,
  .leoProject--half,
  .leoProject--wide,
  .leoProject--small{
    width:100%;

    margin:
      0
      0
      65px;
  }

  .leoProject--offset,
  .leoProject--small{
    margin-top:0;
  }

  .leoProject__visual,
  .leoProject--hero .leoProject__visual,
  .leoProject--half .leoProject__visual,
  .leoProject--wide .leoProject__visual,
  .leoProject--small .leoProject__visual{
    aspect-ratio:
      16 / 10;
  }

  .leoProject__type{
    top:13px;
    left:13px;

    padding:
      7px
      9px;

    font-size:7px !important;
  }

  .leoProject__overlay{
    display:none;
  }

  .leoProject__info{
    margin-top:18px;
  }

  .leoProject__heading > p{
    font-size:8px !important;
  }

  .leoProject__heading h2{
    font-size:20px;
  }

  .leoProject__mini{
    margin-top:10px;
  }

  .leoProject__mini span{
    font-size:11px;
  }


  /* HERO DETAIL */

  .leoProject--hero
  .leoProject__info{
    margin-top:20px;

    display:block;
  }

  .leoProject__detail{
    margin-top:25px;
  }

  .leoProject__detail dl > div{
    grid-template-columns:
      75px
      minmax(0,1fr);
  }

  .leoProject__detail dd{
    font-size:10px;
  }

  .leoProject__description{
    margin-top:23px;

    font-size:12px;
  }


  /* NOCTA */

  .leoProject--nocta{
    margin-top:10px;
    margin-bottom:0;

    padding:
      42px
      20px
      38px;
  }

  .leoProjectNocta__intro{
    display:block;
  }

  .leoProjectNocta__intro h2{
    font-size:43px;
  }

  .leoProjectNocta__intro > div:last-child{
    margin-top:42px;
  }

  .leoProjectNocta__catch{
    font-size:26px;
  }

  .leoProjectNocta__text{
    margin-top:25px;

    font-size:12px;
  }

  .leoProjectNocta__visual{
    margin-top:35px;

    aspect-ratio:
      16 / 10;
  }

  .leoProjectNocta__overlay{
    display:none;
  }

  .leoProjectNocta__bottom{
    margin-top:24px;

    padding-top:23px;

    display:block;
  }

  .leoProjectNocta__bottom > div + div{
    margin-top:22px;
  }

  .leoProjectNocta__bottom p{
    font-size:10px;
  }


  /* STATEMENT */

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

  .leoWorksStatement__body{
    margin-top:48px;

    display:block;
  }

  .leoWorksStatement__title{
    font-size:28px;
  }

  .leoWorksStatement__text{
    margin-top:35px;

    font-size:12px;
  }

  .leoWorksStatement__words{
    margin-top:55px;

    padding:
      30px
      0;

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

    gap:5px;
  }

  .leoWorksStatement__words span{
    font-size:18px;
  }

  .leoWorksStatement__words span:last-of-type{
    grid-column:
      1 / 4;

    margin-top:17px;
  }

  .leoWorksStatement__words i{
    font-size:15px;
  }

  .leoWorksStatement__words i:last-of-type{
    display:none;
  }


  /* CASE */

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

  .leoCase__body{
    margin-top:48px;

    display:block;
  }

  .leoCase__title{
    font-size:28px;
  }

  .leoCase__right{
    margin-top:35px;
  }

  .leoCase__right > p{
    font-size:12px;
  }


  /* CONTACT */

  .leoWorksContact__inner{
    min-height:520px;

    padding:
      75px
      0
      160px;
  }

  .leoWorksContact__title{
    font-size:29px;
  }

  .leoWorksContact__text{
    font-size:12px;
  }

  .leoWorksContact__button{
    left:0;
    right:auto;

    bottom:50px;

    width:100%;
    height:72px;
  }

  .leoWorksContact__button:hover{
    width:100%;

    transform:none;
  }


  /* FOOTER */

  .leoWorksFooter{
    padding-top:45px;
  }

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

  .leoWorksFooter__logo{
    width:68px;
  }

  .leoWorksFooter nav{
    display:grid;

    grid-template-columns:
      1fr
      1fr;

    gap:
      15px
      22px;
  }

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

  .leoWorksFooter__bottom{
    display:block;

    font-size:9px;
  }

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


  .leoWorksCursor{
    display:none;
  }

}


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

@media(max-width:390px){

  .leoWorksFv__title{
    font-size:29px;
  }

  .leoWorksIntro__title,
  .leoWorksStatement__title,
  .leoCase__title{
    font-size:26px;
  }

  .leoProjectNocta__catch{
    font-size:24px;
  }

  .leoWorksContact__title{
    font-size:27px;
  }

}


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

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

  .leoWorksReveal{
    opacity:1 !important;

    transform:none !important;

    transition:none !important;
  }

  .leoProject__visual,
  .leoProject__visual img,
  .leoProjectNocta__visual,
  .leoProjectNocta__visual img{
    transition:none !important;
  }

}/* End custom CSS */