:root{
--white:#fff;
--black:#0a0a0a;
--text:#111;
--muted: rgba(0,0,0,.60);
--mutedOnBlack: rgba(255,255,255,.62);
--max: 1680px;
--pad: 48px;
--h: 110px;
--ease: cubic-bezier(.2,.8,.2,1);
}
a[href^="tel"]{
  color: inherit !important;
  text-decoration: none !important;
}
@font-face{
font-family: "Dress";
src: url("../fonts/Dress.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
font-family:"Aileron";
src:url("../fonts/Aileron.otf") format("opentype");
font-weight:900;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Aileron2";
src:url("../fonts/Aileron2.otf") format("opentype");
font-weight:900;
font-style:normal;
font-display:swap;
}
*{
box-sizing:border-box;
}
html,body{
height:100%;
}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
color: var(--text);
background: var(--white);
}
.topbar{
position: fixed;
top:0;
left:0;
right:0;
height: var(--h);
z-index: 50;
background: var(--white);
border-bottom: 1px solid rgba(0,0,0,.10);
transition:background-color .18s var(--ease),border-color .18s var(--ease);
will-change: background-color;
transform: translateZ(0);
}
.topbar.is-fixed{
background: var(--black);
border-bottom-color: rgba(255,255,255,.12);
}
.topbar-inner{
max-width: var(--max);
height: 100%;
margin: 0 auto;
padding: 0 var(--pad);
display:flex;
align-items:center;
gap: 44px;
}
.logo{
text-decoration:none;
font-weight: 900;
font-size: 56px;
letter-spacing: -0.08em;
color: var(--text);
transition: color .18s var(--ease);
font-family: "Aileron2", sans-serif;
}
.topbar.is-fixed .logo{color:#fff;
}
.sep{
width: 1px;
height: 64px;
background: rgba(0,0,0,.22);
transition: background .18s var(--ease);
}
.topbar.is-fixed .sep{
background: rgba(255,255,255,.22);
}
.menu{
display:flex;
align-items:center;
gap: 74px;
flex: 1;
}
.menu-item{
display:flex;
align-items:flex-start;
gap: 14px;
text-decoration:none;
color: var(--text);
transition: color .18s var(--ease), opacity .18s var(--ease);
}
.menu-item:hover{
opacity:.75;
}
.topbar.is-fixed .menu-item{
color:#fff;
}
.menu-num{
line-height: 1;
display: inline-flex;
align-items: flex-start;
position: relative;
top: 0px;
left: 10px;
line-height: 1;
font-size: 12px;
font-weight: 600;
opacity: .7;
}
.topbar.is-fixed .menu-num{
opacity:.70;
}
.menu-label{
font-size: 18px;
font-weight: 900;
letter-spacing: .01em;
line-height: 1.1;
font-family: "Aileron", sans-serif;
}
.call{
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 260px;
}
.call-btn{
position: relative;
width: 210px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 10px;
background: #fff;
overflow: hidden;
border: 1px solid rgba(0,0,0,.35);
transition: background-color .18s var(--ease), color .18s var(--ease);
}
.topbar.is-fixed .call-btn{
background: #000;
border-color: rgba(255,255,255,.35);
}
.call-icon,.call-text{
position: relative;
z-index: 2;
transition: color .18s var(--ease);
}
.call-icon,.call-text{
color: #000;
}
.topbar.is-fixed .call-icon,.topbar.is-fixed .call-text{
color: #fff;
}
.call:hover .call-btn{
background: #000;
border: 1px solid #fff;
}
.call:hover .call-icon,.call:hover .call-text{
color: #fff;
}
.topbar.is-fixed .call:hover .call-btn{
background: #fff;
}
.topbar.is-fixed .call:hover .call-icon,.topbar.is-fixed .call:hover .call-text{
color: #000;
}
.call-icon{
font-size: 22px;
font-weight: 900;
line-height: 1;
margin-top: -4px;
}
.call-text{
font-size: 15px;
font-weight: 500;
letter-spacing: .02em;
font-family: "Dress", sans-serif;
}
.call-sub{
font-size: 11px;
line-height: 1.2;
font-weight: 700;
letter-spacing: .02em;
color: rgba(0,0,0,.75);
}
.topbar.is-fixed .call-sub{
color: rgba(255,255,255,.75);
}
.page{
padding-top: var(--h);
}
.hero{
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: var(--h);
box-sizing: border-box;
}
.hero-bg{
position: absolute;
inset: 0;
background-image: url("../img/hero.png");
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
}
.hero::before{
content:"";
position:absolute;
inset:0;
background: rgba(0,0,0,.35);
z-index: 1;
}
.hero::after{
content:"";
position:absolute;
inset:0;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%),rgba(255,255,255,var(--halo, 0)),rgba(255,255,255,0) 55%);
mix-blend-mode: screen;
}
.hero-content{
position: relative;
z-index: 3;
text-align: center;
color: #fff;
padding: 0 var(--pad);
transform: translateY(-15vh);
}
.hero-title{
margin: 0;
font-weight: 900;
letter-spacing: -0.07em;
font-size: clamp(55px, 7vw, 120px);
text-shadow: var(--tx, 0px) var(--ty, 0px) 26px rgba(0,0,0,.75);
transition: text-shadow .06s linear;
font-family: "Aileron2", sans-serif;
white-space: nowrap;
}
.hero-sub{
margin: 14px 0 0;
font-size: clamp(16px, 2vw, 22px);
opacity: .92;
}
.block{
padding: 60px 0;
}
.block-inner{
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad);
}
.menu-dd{
position: relative;
display: flex;
align-items: center;
}
.dd-trigger{
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
}
.dd-panel{
position: absolute;
top: calc(100% + 18px);
left: -10px;
min-width: 260px;
padding: 10px;
border-radius: 0px;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .16s var(--ease), transform .16s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.menu-dd.is-open .dd-panel{
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.dd-panel{
background: rgba(255,255,255,.86);
border: 1px solid rgba(0,0,0,.12);
backdrop-filter: blur(10px);
box-shadow: 0 24px 60px rgba(0,0,0,.12);
}
.topbar.is-fixed .dd-panel{
background: rgba(10,10,10,.86);
border-color: rgba(255,255,255,.14);
box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.dd-link{
display: block;
padding: 12px 12px;
border-radius: 0px;
text-decoration: none;
font-weight: 800;
letter-spacing: .02em;
font-size: 12px;
font-family: "Aileron", sans-serif;
color: #111;
transition: background-color .16s var(--ease), opacity .16s var(--ease);
}
.dd-link:hover{
background: rgba(0,0,0,.06);
}
.topbar.is-fixed .dd-link{
color: #fff;
}
.topbar.is-fixed .dd-link:hover{
background: rgba(255,255,255,.08);
}
.intro{
min-height: 75vh;
margin-bottom: -80px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
padding: 120px var(--pad);
font-family: "Dress", sans-serif;
}
.intro-inner{
text-align: center;
max-width: 900px;
width: 100%;
}
.intro-inner p{
margin: 0;
font-size: 22px;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.4;
color: #111;
font-weight: 500;
}
.intro-inner p + p{
margin-top: 38px;
}
.hero-btn{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: clamp(32px, 6vw, 80px);
padding:
clamp(8px, 1.2vw, 14px)
clamp(36px, 6vw, 80px);
font-size: clamp(12px, 1.1vw, 17px);
letter-spacing: clamp(.08em, .5vw, .10em);
border: 1px solid rgba(255,255,255,.75);
font-weight: 100;
font-family: "Dress", sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
transition: background-color .18s var(--ease), color .18s var(--ease);
}
.hero-btn:hover{
background: #fff;
color: #000;
}
.services{
background: #ffffff;
padding: 90px 0;
}
.services-wrap{
width: min(1720px, calc(100% - 120px));
max-width: 1200px;
margin: 0 auto;
background: #ece2d6a4;
padding: 60px 60px 70px;
min-height: 720px;
position: relative;
display: flex;
flex-direction: column;
}
.services-title{
font-size: 60px;
display: flex;
align-items: flex-start;
margin: 0 0 150px;
font-weight: 900;
letter-spacing: -0.02em;
color: #111;
font-family: "Aileron2", sans-serif;
}
.services-title span{
font-size: 27px;
font-weight: 700;
line-height: 1;
margin-top: -12px;
font-family: "Aileron", sans-serif;
margin-top: 5px;
margin-right: 3px;
}
.services-grid{
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 48px;
align-items: stretch;
flex: 1;
margin-top: 5rem;
}
.services-side{
height: 260px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border: 1px solid rgba(0,0,0,.15);
}
.services-side-left{
display: none;
background-image: url("../img/services-left.jpeg");
margin-top: 10rem;
align-self: end;
height: 420px;
}
.services-side-right{
background-image: url("../img/services-right.jpeg");
margin-top: -12rem;
align-self: start;
height: 560px;
}
.services-acc{
position: relative;
height: 100%;
border-top: 1px solid rgba(0,0,0,.35);
margin-top: -5rem;
}
.acc-row{
border-bottom: 1px solid rgba(0,0,0,.35);
}
.acc-head{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
background: transparent;
border: 0;
cursor: pointer;
}
.acc-icon{
width: 16px;
height: 16px;
position: relative;
opacity: .55;
}
.acc-icon::before,.acc-icon::after{
content:"";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 1px;
background: rgba(0,0,0,.55);
transform: translate(-50%,-50%);
}
.acc-icon::after{
transform: translate(-50%,-50%) rotate(90deg);
}
.acc-row.is-open .acc-icon::after{
transform: translate(-50%,-50%) rotate(0deg);
}
.acc-panel{
max-height: 0;
overflow: hidden;
transition: max-height .24s var(--ease);
}
.acc-row.is-open .acc-panel{
max-height: 260px;
}
.acc-box{
width: 420px;
max-width: 100%;
background: #ffffffa9;
border: 1px solid rgba(0,0,0,.18);
padding: 14px 16px 16px;
margin: 6px 0 18px;
}
.acc-text{
font-size: 22px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(0,0,0,.55);
font-family: "Dress", sans-serif;
}
.acc-list{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 1.55;
color: rgba(0,0,0,.78);
text-transform: uppercase;
font-family: "Dress", sans-serif;
letter-spacing: .07em;
}
.acc-list li{
position: relative;
padding-left: 18px;
}
.acc-list li::before{
content: "\f105";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 0.9em;
transform: translateY(-50%);
font-size: 12px;
color: rgba(0,0,0,.45);
}
.acc-cta{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 14px;
width: 140px;
height: 42px;
border: 1px solid rgba(0,0,0,.35);
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #111;
background: transparent;
}
.acc-cta:hover{
background: rgba(0,0,0,.06);
}
.cta{
min-height: 70vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 120px var(--pad);
}
.cta-inner{
text-align: center;
}
.cta-title{
margin: 0 0 40px;
font-size: clamp(34px, 3.2vw, 54px);
font-weight: 500;
letter-spacing: .10em;
text-transform: uppercase;
line-height: 1.15;
color: #111;
font-family: "Dress", sans-serif;
white-space: nowrap;
}
.cta-btn{
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
padding:
clamp(14px, 1.4vw, 18px)
clamp(32px, 5vw, 56px);
font-size: clamp(14px, 1.2vw, 18px);
letter-spacing: clamp(.08em, .5vw, .12em);
border: 1px solid rgba(0,0,0,.45);
background: transparent;
font-weight: 700;
text-transform: uppercase;
font-family: "Dress", sans-serif;
color: #111;
text-decoration: none;
transition: background-color .18s var(--ease), color .18s var(--ease);
}
.cta-btn:hover{
background: #000;
color: #fff;
}
.cta-btn:hover{
background: #000;
color: #fff;
}
.carousel{
background: #fff;
padding: 80px 0;
margin-bottom: 10rem;
}
.carousel-viewport{
  width: 100%;
  overflow: hidden;
}
.carousel-track{
  --gap: 24px;
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.carousel-item{
  flex: 0 0 clamp(220px, 55vw, 420px);
  height: clamp(280px, 80vw, 620px);
}
.carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 2 / 3;
}
.footer{
background: #fff;
}
.footer-black{
background: #000;
}
.footer-black-inner{
max-width: var(--max);
margin: 0 auto;
padding: 28px var(--pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.footer-copy{
color: rgba(255,255,255,.85);
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
font-family: "Dress", sans-serif;
}
.footer-social{
display: flex;
align-items: center;
gap: 22px;
}
.footer-icon{
color: #fff;
text-decoration: none;
font-size: 28px;
line-height: 1;
opacity: .9;
}
.footer-icon:hover{
opacity: .7;
}
.footer-white{
background: #000000;
}
.footer-white-inner{
max-width: var(--max);
margin: 0 auto;
margin-left: auto;
padding: 56px var(--pad);
display: flex;
align-items: flex-start;
gap: 44px;
}
.footer-logo{
font-size: 56px;
color: #ffffff;
}
.footer-sep{
height: 64px;
background: rgba(0,0,0,.22);
}
.footer-menu{
display: grid;
grid-template-columns: repeat(4, auto);
gap: 48px;
justify-content: start;
padding-top: 6px;
flex: 1;
}
.footer-head{
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.footer-num{
position: relative;
top: 0px;
left: 8px;
font-size: 11px;
font-weight: 600;
opacity: .65;
line-height: 1;
color: rgb(255, 255, 255);
}
.footer-title{
font-size: 17px;
font-weight: 800;
letter-spacing: .01em;
line-height: 1.1;
text-transform: uppercase;
font-family: "Aileron", sans-serif;
text-decoration: none;
color: rgb(255, 255, 255);
}
.footer-title:hover{
opacity: .7;
}
.footer-subtitle{
font-size: 12px;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: rgb(255, 255, 255);
margin-bottom: 10px;
}
.footer-link{
display: block;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 11px;
font-weight: 100;
line-height: 1.7;
font-family: "Dress", sans-serif;
text-transform: uppercase;
margin-left: 1.4rem;
}
.footer-link:hover{
opacity: .7;
}
.footer-call{
min-width: 260px;
}
.footer-call .call-btn{
background: #000;
border: 1px solid rgba(255,255,255,.35);
}
.footer-call .call-icon,
.footer-call .call-text{
color: #fff;
}
.footer-call:hover .call-btn{
background: #fff;
border: 1px solid #000;
}
.footer-call:hover .call-icon,
.footer-call:hover .call-text{
color: #000;
}
:root{
--pad: clamp(16px, 3vw, 48px);
--h: clamp(86px, 10vw, 110px);
}
.hero{
height: min(100vh, 900px);
padding-top: var(--h);
}
.hero-content{
transform: translateY(clamp(-10vh, -8vw, -15vh));
}
.intro{
padding: clamp(60px, 10vw, 120px) var(--pad);
}
.intro-inner p{
font-size: clamp(14px, 2.2vw, 22px);
letter-spacing: clamp(.04em, .4vw, .08em);
}
.services{
padding: clamp(48px, 8vw, 90px) 0;
}
.services-wrap{
width: min(1720px, calc(100% - (var(--pad) * 2)));
padding: clamp(22px, 5vw, 60px);
min-height: auto;
}
.services-grid{
margin-top: clamp(18px, 4vw, 5rem);
gap: clamp(18px, 4vw, 36px);
}
.acc-text{
font-size: clamp(16px, 2vw, 20px);
}
.acc-box{
width: min(520px, 100%);
}
.cta{
padding: clamp(60px, 10vw, 120px) var(--pad);
}
.cta-title{
letter-spacing: clamp(.05em, .8vw, .10em);
}
.carousel{
padding: clamp(40px, 7vw, 80px) 0;
margin-bottom: clamp(40px, 10vw, 10rem);
}
.carousel-track{
gap: clamp(12px, 3vw, 24px);
}
.carousel-item{
flex: 0 0 clamp(220px, 55vw, 420px);
height: clamp(280px, 80vw, 620px);
}
.burger{
display: none;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(0,0,0,.18);
background: transparent;
cursor: pointer;
align-items: center;
justify-content: center;
position: relative;
}
.topbar.is-fixed .burger{
border-color: rgba(255,255,255,.22);
}
.burger span{
position: absolute;
width: 20px;
height: 2px;
background: #000;
transition: transform .18s var(--ease), opacity .18s var(--ease), top .18s var(--ease);
}
.topbar.is-fixed .burger span{ background:#fff; }
.burger span:nth-child(1){ top: 15px; }
.burger span:nth-child(2){ top: 21px; }
.burger span:nth-child(3){ top: 27px; }
.topbar.menu-open .burger span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.topbar.menu-open .burger span:nth-child(2){ opacity: 0; }
.topbar.menu-open .burger span:nth-child(3){ top: 21px; transform: rotate(-45deg); }
.menu-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
opacity: 0;
pointer-events: none;
transition: opacity .18s var(--ease);
z-index: 40;
}
.topbar.menu-open ~ .menu-overlay{
opacity: 1;
pointer-events: auto;
}
.menu-dd .dd-trigger{
all: unset;
display: flex;
align-items: flex-start;
gap: 14px;
cursor: pointer;
}
.call-icon i{
margin-top: 7px;
font-size: 0.8em;
}
@media (max-width: 1200px){
:root{
--pad: 24px;
--h: 110px;
}
.menu{ gap: 40px; }
.menu-label{ font-size: 18px; }
.logo{ font-size: 56px; }
.call{ min-width: 220px; }
.call-btn{ width: 220px; }
}
@media (max-width: 1100px){
.footer-white-inner{
flex-direction: column;
gap: 28px;
}
.footer-menu{
grid-template-columns: 1fr;
gap: 0px;
}
.footer-call{ align-self: flex-start; }
.services-grid{ grid-template-columns: 1fr; }
.services-side{ display: none; }
.services-title{ font-size: 40px; margin-bottom: 7rem;}
.services-title span{ font-size: 22px; }
.footer-col:first-child .footer-link:last-of-type{
  margin-bottom: 30px;
}
}

@media (max-width: 1050px){
.services-title{margin-bottom: 7rem;}
.burger{ display: inline-flex; }
.sep{ display: none; }
.call{ display: none; }
.topbar-inner{
gap: 18px;
justify-content: space-between;
}
.menu{
position: fixed;
top: var(--h);
right: 0;
width: min(420px, 86vw);
height: calc(100vh - var(--h));
background: var(--white);
border-left: 1px solid rgba(0,0,0,.10);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 18px;
transform: translateX(100%);
transition: none;
z-index: 60;
}
.topbar.is-fixed .menu{
background: var(--black);
border-left-color: rgba(255,255,255,.12);
}
.topbar.menu-open .menu{ transform: translateX(0); }
.menu-item{
padding: 16px 12px;
border-bottom: 1px solid rgba(0,0,0,.10);
}
.topbar.is-fixed .menu-item{
border-bottom-color: rgba(255,255,255,.12);
}
.menu-num{
left: 0;
min-width: 28px;
}
.menu-label{ font-size: 16px; }
.menu-dd{ display: block; }
.dd-panel{
position: static;
opacity: 1;
pointer-events: auto;
transform: none;
box-shadow: none;
border: 0;
padding: 0 0 10px;
margin: 0 0 10px;
background: transparent;
backdrop-filter: none;
}
.dd-link{
border-radius: 0px;
padding: 12px 12px;
font-size: 12px;
}
.menu-dd:not(.is-open) .dd-panel{ display: none; }
}
@media (max-width: 900px){
.carousel{margin-bottom: 120px;}
.cta{min-height: 60vh;}
.menu .menu-dd{
width: 100%;
}
.menu .menu-dd .dd-trigger{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 16px 12px;
margin-left: 0;
border-bottom: 1px solid rgba(0,0,0,.10);
}
.topbar.is-fixed .menu .menu-dd .dd-trigger{
border-bottom-color: rgba(255,255,255,.12);
}
.menu .menu-dd .dd-trigger .menu-num{
left: 0;
min-width: 28px;
}
.menu .menu-dd .dd-trigger .menu-label{
font-size: 16px;
}
.services-wrap{ min-height: auto; }
.services-grid{ grid-template-columns: 1fr; }
.services-side{ display: none; }
}
@media (max-width: 860px){
.call{ display: none; }
.menu{ gap: 20px; }
}
@media (max-width: 620px){
.logo{ font-size: 44px; }
.hero-btn{
margin-top: 40px;
}
.acc-head{ padding: 14px 0; }
.acc-text{ font-size: 15px; }
.acc-list{ font-size: 11px; }
.cta-title{ font-size: 28px; }
.footer-black-inner{
flex-direction: column;
align-items: flex-start;
}
.footer-copy{ font-size: 12px; }
.intro{
margin-top: 10px;
margin-bottom: -20px;
}
}
@media (max-width: 768px){
  .carousel-track{ animation-duration: 50s; }
  /* .hero-bg{background-image: url("../img/hero2.png");} */
  .hero-bg{background-position: 80% 10%;}
}