:root{
--ink:#121212;
--ink-soft:rgba(18,18,18,0.68);
--ink-muted:rgba(18,18,18,0.44);
--white:#ffffff;
--paper:#f9f6f4;
--cream:#f5f0eb;
--gold:#ae8e54;
--navy:#010f27;
--navy-mid:#093350;
--line:rgba(18,18,18,0.10);
--line-soft:rgba(18,18,18,0.06);
--serif:'Campton',system-ui,sans-serif;
--sans:'Campton',system-ui,sans-serif;
--body:'Campton',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
font-family:var(--body);
color:var(--ink);
background:var(--white);
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--sans)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1440px;margin:0 auto;padding:0 24px}
section{padding:120px 0}
section[data-pt="none"]  {padding-top:0}
section[data-pt="small"] {padding-top:60px}
section[data-pt="ara"]   {padding-top:90px}
section[data-pt="large"] {padding-top:180px}
section[data-pb="none"]  {padding-bottom:0}
section[data-pb="small"] {padding-bottom:60px}
section[data-pb="ara"]   {padding-bottom:90px}
section[data-pb="large"] {padding-bottom:180px}
.sec-h2{
font-family:var(--sans);
font-size:60px;
font-weight:500;
line-height:1.05;
color:var(--ink);
}
.sec-h3{
font-family:var(--sans);
font-size:32px;
font-weight:500;
line-height:1.15;
color:var(--ink);
}
.section-head{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:end;
margin-bottom:64px;
}
.sec-p,
.section-head-desc{
font-size:16px;
line-height:1.68;
color:var(--ink-soft);
}
.section-head .section-head-desc{
text-align:right;
}
.section-head--center{
grid-template-columns:1fr;
justify-items:center;
text-align:center;
}
.section-head--center .sec-h2{max-width:20ch}
.section-head--center .section-head-desc{
text-align:center;
max-width:640px;
}
.site-header{
position:fixed;
top:32px;
left:50%;
transform:translateX(-50%);
width:calc(100% - 36px);
max-width:1440px;
z-index:100;
background:rgba(255,255,255,0.96);
backdrop-filter:saturate(1.5) blur(20px);
-webkit-backdrop-filter:saturate(1.5) blur(20px);
border-radius:99px;
padding:14px 28px 14px 32px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
box-shadow:0 6px 24px -10px rgba(18,18,18,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
transition:top .35s ease;
}
.site-header.is-scrolled{top:10px}
.brand{
font-family:var(--serif);
font-weight:600;
font-size:22px;
color:var(--ink);
display:flex;
align-items:center;
gap:2px;
flex-shrink:0;
}
.brand img{height:52px;width:auto;display:block}
.brand .dot{
width:6px;height:6px;
border-radius:99px;
background:var(--ink);
display:inline-block;
margin-left:3px;
align-self:flex-end;
margin-bottom:7px;
}
.menu{
display:flex;
align-items:center;
gap:8px;
font-size:16px;
font-weight:500;
color:var(--ink);
flex:1;
justify-content:center;
}
.menu-item{
position:relative;
}
.menu-item::after{
content:'';
position:absolute;
top:100%;
left:-16px;
right:-16px;
height:40px;
}
.menu-link{
display:inline-flex;
align-items:center;
gap:7px;
padding:12px 13px;
border-radius:6px;
transition:background .2s ease;
white-space:nowrap;
}
.menu-link:hover,.menu-item:hover .menu-link{background:var(--cream)}
.menu-link.is-active{background:var(--cream)}
.menu-link svg{opacity:1;transition:transform .2s ease;flex-shrink:0}
.menu-item:hover .menu-link svg{transform:rotate(180deg)}
.dropdown{
position:absolute;
top:calc(100% + 36px);
left:0;
transform:scale(0.72);
transform-origin:top left;
background:#ffffff;
border-radius:24px;
box-shadow:0 18px 50px -18px rgba(18,18,18,0.18);
padding:25px 30px;
min-width:300px;
opacity:0;
visibility:hidden;
transition:opacity .28s cubic-bezier(0.16,1,0.3,1), transform .28s cubic-bezier(0.16,1,0.3,1), visibility 0s .28s;
z-index:200;
pointer-events:none;
}
.menu-item:hover .dropdown{
opacity:1;
visibility:visible;
transform:scale(1);
transition:opacity .28s cubic-bezier(0.16,1,0.3,1), transform .28s cubic-bezier(0.16,1,0.3,1), visibility 0s;
pointer-events:auto;
}
.dd-item{
display:block;
padding:5.5px 16px;
margin-left:-16px;
border-radius:6px;
text-decoration:none;
transition:background .22s ease;
}
.dd-item:hover,
.dd-item.is-active{
background:var(--cream);
}
.dropdown > .dd-item + .dd-item{margin-top:12px}
.dd-item-head{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
font-weight:500;
color:var(--ink);
line-height:32px;
white-space:nowrap;
}
.dd-item-head svg{flex-shrink:0;width:14px;height:14px;color:var(--gold)}
.dropdown-sep{display:none}
.menu-item--mega{position:static}
.menu-item--mega::after{content:none}
.menu-item--mega .menu-link{position:relative}
.menu-item--mega .menu-link::after{
content:'';
position:absolute;
top:100%;
left:-16px;
right:-16px;
height:40px;
}
.dropdown--mega{
left:0;
right:0;
top:calc(100% + 12px);
min-width:0;
padding:44px 48px;
transform-origin:top center;
transform:scale(0.97) translateY(-10px);
}
.menu-item--mega:hover .dropdown--mega{transform:scale(1) translateY(0)}
.mega-inner{
display:flex;
align-items:stretch;
gap:64px;
}
.mega-content{flex:1;min-width:0}
.mega-title{
font-family:var(--sans);
font-size:28px;
font-weight:600;
color:var(--ink);
margin-bottom:24px;
}
.mega-grid{
display:grid;
grid-template-rows:repeat(4,auto);
grid-auto-flow:column;
column-gap:48px;
row-gap:12px;
}
.mega-media{
flex:0 0 380px;
border-radius:24px;
overflow:hidden;
}
.mega-media img{width:100%;height:100%;object-fit:cover}
.nav-right{
display:flex;
align-items:center;
gap:18px;
flex-shrink:0;
}
.lang{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
color:var(--ink);
font-weight:500;
opacity:0.85;
}
.lang svg{opacity:0.65}
.lang-switcher{
display:inline-flex;
align-items:center;
gap:7px;
padding:3px 12px 3px 3px;
border-radius:99px;
border:1px solid rgba(0,0,0,.14);
transition:background .2s ease,border-color .2s ease;
font-size:14px;
font-weight:600;
color:var(--ink);
letter-spacing:.05em;
line-height:1;
}
.lang-switcher:hover{background:var(--cream);border-color:transparent}
.lang-flag{
width:24px;
height:24px;
border-radius:50%;
object-fit:cover;
display:block;
flex-shrink:0;
box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.icon-btn{
width:38px;height:38px;
border-radius:99px;
background:var(--cream);
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--ink);
transition:background .2s ease;
}
.icon-btn:hover{background:#f0ebe3}
.cta-header{
background:var(--ink);
color:var(--white);
padding:13px 24px;
border-radius:99px;
font-size:14px;
font-weight:500;
display:inline-flex;
align-items:center;
gap:8px;
transition:background .25s ease, transform .25s ease;
}
.cta-header:hover{background:var(--gold)}
.nav-toggle{
display:none;
position:relative;
width:46px;height:46px;
border-radius:99px;
background:var(--gold);
flex-shrink:0;
transition:filter .2s ease;
}
.nav-toggle:hover{filter:brightness(0.94)}
.nav-toggle span{
position:absolute;
left:50%;top:50%;
width:18px;height:2px;
margin:-1px 0 0 -9px;
border-radius:2px;
background:var(--white);
transition:transform .3s cubic-bezier(0.16,1,0.3,1), opacity .2s ease;
}
.nav-toggle span:nth-child(1){transform:translateY(-6px)}
.nav-toggle span:nth-child(3){transform:translateY(6px)}
.nav-toggle.is-open span:nth-child(1){transform:rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:rotate(-45deg)}
.mobile-nav{
display:none;
position:fixed;inset:0;
z-index:90;
background:var(--white);
opacity:0;visibility:hidden;
transition:opacity .3s ease, visibility 0s .3s;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.mobile-nav.is-open{
opacity:1;visibility:visible;
transition:opacity .3s ease;
}
.mobile-nav-inner{
padding:104px 24px 48px;
display:flex;
flex-direction:column;
transform:translateY(10px);
transition:transform .35s cubic-bezier(0.16,1,0.3,1);
}
.mobile-nav.is-open .mobile-nav-inner{transform:translateY(0)}
.m-group,
.mobile-nav-inner>a.m-link{border-bottom:1px solid var(--line-soft)}
.m-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:9px;
width:100%;
padding:14px 8px;
border-radius:6px;
font-size:16px;
font-weight:500;
color:var(--ink);
text-align:left;
transition:background .2s ease;
}
.m-link:hover,
.m-link:active,
.m-link.is-active{background:var(--cream)}
.m-link svg{flex-shrink:0;transition:transform .25s ease}
.m-group.is-open .m-link svg{transform:rotate(180deg)}
.m-sub{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease, padding-top .3s ease;
}
.m-group.is-open .m-sub{grid-template-rows:1fr;padding-top:8px}
.m-sub-inner{overflow:hidden;min-height:0}
.m-sub a{
display:block;
padding:5.5px 16px;
margin-left:8px;
border-radius:6px;
font-size:16px;
font-weight:500;
line-height:32px;
color:var(--ink);
transition:background .22s ease;
}
.m-sub a:hover,
.m-sub a:active,
.m-sub a.is-active{background:var(--cream)}
.m-sub a:last-child{margin-bottom:14px}
.mobile-nav-cta{margin-top:28px}
body.nav-open{overflow:hidden}
.ykc-btn{
display:inline-flex;
align-items:stretch;
gap:0;
text-decoration:none;
cursor:pointer;
flex-shrink:0;
}
.ykc-btn-text{
border-radius:99px;
padding:13px 16px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
transition:border-radius .3s ease;
}
.ykc-btn:hover .ykc-btn-text{border-radius:99px 0 0 99px}
.ykc-btn.no-icon:hover .ykc-btn-text{border-radius:99px}
.ykc-btn-text.ykc-dark {background:var(--ink);color:var(--white)}
.ykc-btn-text.ykc-white{background:var(--white);color:var(--ink)}
.ykc-btn-text.ykc-gold {background:var(--gold);color:var(--white)}
.ykc-btn-text.ykc-outline-light{
border:1px solid rgba(255,255,255,0.45);
background:rgba(255,255,255,0.1);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
color:var(--white);
}
.ykc-btn-text.ykc-outline-dark{
border:1px solid rgba(18,18,18,0.28);
background:transparent;
color:var(--ink);
}
.ykc-text-inner{
position:relative;
overflow:hidden;
font-size:16px;
font-weight:500;
line-height:1.2em;
}
.ykc-label-1,.ykc-label-2{display:block;white-space:nowrap}
.ykc-label-2{
position:absolute;top:0;left:0;width:100%;
transform:translateY(130%);
}
.ykc-btn-icon{
border-radius:99px;
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
flex-shrink:0;
align-self:center;
transition:border-radius .3s ease;
}
.ykc-btn:hover .ykc-btn-icon{border-radius:0 99px 99px 0}
.ykc-btn-icon.ykc-dark {background:var(--ink);color:var(--white)}
.ykc-btn-icon.ykc-white{background:var(--white);color:var(--ink)}
.ykc-btn-icon.ykc-gold {background:var(--gold);color:var(--white)}
.ykc-btn-icon.ykc-outline-light{
border:1px solid rgba(255,255,255,0.45);
background:rgba(255,255,255,0.1);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
color:var(--white);
}
.ykc-btn-icon.ykc-outline-dark{
border:1px solid rgba(18,18,18,0.28);
background:transparent;
color:var(--ink);
}
.ykc-icon-inner{
position:relative;
width:18px;
height:18px;
overflow:hidden;
transition:transform .3s ease;
}
.ykc-btn:hover .ykc-icon-inner{transform:rotate(45deg)}
.ykc-svg-1,.ykc-svg-2{
position:absolute;
top:0;left:0;
width:18px;
height:18px;
display:block;
}
.ykc-svg-2{transform:translate(-100%,100%)}
.cta-hero:hover .arrow-circ{border-color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.06)}
.ykc-btn.header-cta:hover .ykc-btn-text.ykc-gold{background:var(--ink);transition:background .2s ease}
.hero{
position:relative;
width:100%;
padding:0;
min-height:min(100vh, 940px);
min-height:min(100dvh, 940px);
overflow:hidden;
background:#010f27;
}
.hero-bg{
position:absolute;
inset:0;
background-color:#010f27;
background-size:cover;
background-position:center;
overflow:hidden;
}
.hero-bg video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
filter:saturate(0.95) contrast(1.04) brightness(0.88);
opacity:0;
}
.hero-bg video.hero-video-ready{
opacity:1;
}
.hero-bg::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(18,18,18,0.55) 0%, rgba(18,18,18,0.18) 45%, rgba(18,18,18,0) 70%),
linear-gradient(180deg, rgba(18,18,18,0.05) 0%, rgba(18,18,18,0) 30%, rgba(18,18,18,0.4) 100%);
}
.hero-content{
position:relative;
z-index:2;
min-height:min(100vh, 940px);
min-height:min(100dvh, 940px);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:160px 0 120px;
gap:64px;
color:var(--white);
}
.hero-content>.wrap{
width:100%;
}
.hero-eyebrow{
font-family:var(--sans);
font-weight:500;
font-size:16px;
color:var(--white);
text-transform:uppercase;
display:block;
}
.hero .hero-slogan{
font-family:var(--sans);
font-weight:500;
font-size:76px;
line-height:1.1;
color:var(--white);
max-width:1100px;
}
.hero .hero-slogan .line{display:block}
.hero-bottom{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
z-index:3;
}
.hero-bottom-left {
display:flex;
flex-direction:column;
gap:24px;
}
.hero-sub{
color:rgba(255,255,255,0.92);
font-size:20px;
line-height:1.5;
max-width:620px;
font-weight:400;
}
.hero-h1-row{
margin-bottom:64px;
}
.hero-play-btn{
background:none;
border:none;
cursor:pointer;
color:var(--white);
padding:0;
flex-shrink:0;
margin-top:16px;
}
.hero-play-circle{
width:92px;height:92px;
border-radius:50%;
border:1.5px solid rgba(192,39,45,0.7);
display:flex;align-items:center;justify-content:center;
background:#C0272D;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:background .25s ease, border-color .25s ease, transform .25s ease;
position:relative;
}
.hero-play-btn:hover .hero-play-circle{
background:#A8202A;
border-color:rgba(192,39,45,0.9);
transform:scale(1.08);
}
.hero-play-circle::before{
content:'';
position:absolute;inset:0;
border-radius:50%;
border:1.5px solid rgba(192,39,45,0.6);
animation:play-pulse 2.4s ease-out infinite;
}
.hero-play-circle::after{
content:'';
position:absolute;inset:0;
border-radius:50%;
border:1.5px solid rgba(192,39,45,0.6);
animation:play-pulse 2.4s ease-out infinite 1.2s;
}
@keyframes play-pulse{
0%{transform:scale(1);opacity:1}
100%{transform:scale(2);opacity:0}
}
.video-modal{
position:fixed;inset:0;
z-index:500;
display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;
transition:opacity .35s ease, visibility .35s;
}
.video-modal.is-open{opacity:1;visibility:visible}
.video-overlay{
position:absolute;inset:0;
background:rgba(5,8,18,0.88);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
cursor:pointer;
}
.video-box{
position:relative;
width:min(880px, 92vw);
aspect-ratio:16/9;
border-radius:16px;
overflow:hidden;
background:#000;
transform:scale(0.94) translateY(16px);
transition:transform .35s cubic-bezier(.22,.68,0,1.2);
z-index:1;
box-shadow:0 32px 80px rgba(0,0,0,0.6);
}
.video-modal.is-open .video-box{transform:scale(1) translateY(0)}
.video-box iframe{width:100%;height:100%;border:0;display:block}
.video-close{
position:absolute;
top:-44px;right:0;
background:none;border:none;
color:rgba(255,255,255,0.7);
cursor:pointer;
font-size:13px;
font-weight:500;
text-transform:uppercase;
display:flex;align-items:center;gap:6px;
transition:color .2s ease;
padding:0;
}
.video-close:hover{color:#fff}
.services{
background:var(--white);
padding-top:140px;
position:relative;
z-index:2;
border-radius:48px 48px 0 0;
margin-top:-48px;
}
.svc-bento{
display:grid;
grid-template-columns:1.55fr 1fr 1fr;
grid-template-rows:360px 280px;
gap:22px;
}
.svc-item{
position:relative;
border-radius:24px;
overflow:hidden;
background:#010f27;
cursor:pointer;
isolation:isolate;
display:block;
text-decoration:none;
color:inherit;
}
.svc-item:nth-child(1){grid-column:1;grid-row:1/3}
.svc-item:nth-child(2){grid-column:2;grid-row:1}
.svc-item:nth-child(3){grid-column:3;grid-row:1;background:#f9f6f4}
.svc-item:nth-child(4){grid-column:2/4;grid-row:2}
.svc-item img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
filter:brightness(0.62) saturate(0.88);
transition:filter .55s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1);
z-index:1;
}
.svc-item:hover img{
filter:brightness(0.38) saturate(0.72);
transform:scale(1.06);
}
.svc-item:hover .svc-icon img{
filter:none;
transform:none;
}
.svc-item::before{
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(18,18,18,0.08) 0%,rgba(18,18,18,0) 30%,rgba(18,18,18,0.65) 100%);
z-index:2;pointer-events:none;
transition:background .4s ease;
}
.svc-item:nth-child(3)::before{display:none}
.svc-item:hover::before{background:rgba(18,18,18,0.5)}
.svc-item:nth-child(3):hover{background:#f9f6f4}
.svc-item-inner{
position:absolute;inset:0;z-index:3;
padding:36px 38px;
display:flex;flex-direction:column;
justify-content:flex-end;
}
.svc-icon{
margin-bottom:16px;
}
.svc-icon img{
position:static;
inset:auto;
width:52px;
height:52px;
object-fit:contain;
filter:none;
transition:none;
z-index:auto;
display:block;
}
.svc-text{display:flex;flex-direction:column;gap:0}
.svc-item h3{
font-family:var(--sans);font-weight:600;
font-size:32px;
line-height:1.1;
color:var(--white);margin:0;
}
.svc-item:nth-child(3) h3{color:var(--ink)}
.svc-item p{
font-size:16px;line-height:1.6;
color:var(--white);
opacity:0;
max-height:0;overflow:hidden;
padding-top:0;
transform:translateY(6px);
transition:opacity .35s ease .05s, transform .35s ease .05s, max-height .35s ease, padding-top .35s ease;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
}
.svc-item:nth-child(3) p{color:var(--ink-soft)}
.svc-item:hover p{opacity:1;max-height:200px;padding-top:12px;transform:translateY(0)}
.svc-cta{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:600;
color:rgba(255,255,255,0.6);
opacity:0;
max-height:0;overflow:hidden;
padding-top:0;
transform:translateY(6px);
transition:opacity .35s ease .12s, transform .35s ease .12s, max-height .35s ease .05s, padding-top .35s ease .05s;
}
.svc-item:hover .svc-cta{opacity:1;max-height:60px;padding-top:16px;transform:translateY(0)}
.svc-item:nth-child(3) .svc-cta{color:rgba(18,18,18,0.5)}
.svc-cta-arr{
width:24px;height:24px;border-radius:99px;
border:1px solid rgba(255,255,255,0.28);
display:inline-flex;align-items:center;justify-content:center;
transition:transform .25s ease,border-color .22s ease;
flex-shrink:0;
}
.svc-item:nth-child(3) .svc-cta-arr{border-color:rgba(18,18,18,0.2)}
.svc-item:hover .svc-cta-arr{transform:rotate(45deg);border-color:rgba(255,255,255,0.5)}
.svc-item:nth-child(3):hover .svc-cta-arr{border-color:rgba(18,18,18,0.35);transform:rotate(45deg)}
.sectors{
position:relative;
isolation:isolate;
clip-path:inset(0 16px round 20px);
}
.sectors::before{
content:'';
position:absolute;
top:0;bottom:0;
left:16px;right:16px;
background:#f9f6f4;
border-radius:20px;
z-index:-1;
pointer-events:none;
}
.sectors.sectors--plain{clip-path:none}
.sectors.sectors--plain::before{content:none}
.sec-head-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:20px;
}
.view-all-group{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:18px;
flex-shrink:0;
}
.view-all-pill,.view-all-circ{
background:var(--white);
color:var(--ink);
border-radius:99px;
transition:transform .25s ease, background .25s ease, color .25s ease;
box-shadow:0 4px 16px -8px rgba(18,18,18,0.15);
}
.view-all-pill{
padding:13px 22px;
font-size:14px;
font-weight:500;
display:inline-flex;
align-items:center;
}
.view-all-circ{
width:46px;height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.view-all-pill:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.view-all-circ:hover{background:var(--ink);color:var(--white);transform:translateY(-2px) rotate(45deg)}
.sec-rail-container{
position:relative;
}
.sec-rail{
display:flex;
gap:24px;
overflow-x:auto;
scroll-behavior:smooth;
padding:0 max(24px, calc((100vw - 1000px) / 2));
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
cursor:grab;
user-select:none;
}
.sec-rail.dragging{
cursor:grabbing;
scroll-behavior:auto;
}
.sec-rail.dragging .sec-card{pointer-events:none}
.sec-rail::-webkit-scrollbar{display:none}
.sec-rail img{-webkit-user-drag:none;user-drag:none}
.sec-rail .sec-card{-webkit-user-drag:none}
.sec-card{
flex:0 0 1000px;
aspect-ratio:5/3;
position:relative;
border-radius:24px;
overflow:hidden;
background:#010f27;
cursor:pointer;
box-shadow:0 20px 50px -22px rgba(18,18,18,0.28);
opacity:0.38;
transition:opacity .55s cubic-bezier(.2,.65,.3,1), transform .35s ease;
}
.sec-card.is-active{
opacity:1;
}
.sec-card:hover{transform:translateY(-3px)}
.sec-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform 1.2s cubic-bezier(.2,.65,.3,1);
}
.sec-card:hover img{transform:scale(1.04)}
.sec-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,
rgba(18,18,18,0.15) 0%,
rgba(18,18,18,0) 25%,
rgba(18,18,18,0) 50%,
rgba(18,18,18,0.70) 100%);
pointer-events:none;
}
.sec-badge{
position:absolute;
top:28px;
left:32px;
z-index:2;
background:rgba(255,255,255,0.96);
color:var(--ink);
padding:8px 16px;
border-radius:99px;
font-size:11px;
font-weight:600;
text-transform:uppercase;
backdrop-filter:blur(8px);
}
.sec-title{
position:absolute;
bottom:32px;
left:36px;
right:36px;
z-index:2;
color:var(--white);
}
.sec-title h3{
font-family:var(--sans);
font-weight:600;
font-size:44px;
line-height:1.04;
color:var(--white);
margin-bottom:6px;
}
.sec-title .sub{
font-size:16px;
line-height:1.6;
color:var(--white);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
opacity:0;
max-height:0;
padding-top:0;
transform:translateY(6px);
transition:opacity .35s ease .05s, transform .35s ease .05s, max-height .35s ease, padding-top .35s ease;
}
.sec-card:hover .sec-title .sub{
opacity:1;
max-height:120px;
padding-top:10px;
transform:translateY(0);
}
.sec-nav-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:2;
width:54px;height:54px;
border-radius:99px;
background:var(--white);
border:1px solid var(--line);
color:var(--ink);
display:inline-flex;
align-items:center;
justify-content:center;
transition:all .25s ease;
}
#secPrev{left:max(24px, calc((100% - 1440px) / 2 + 24px))}
#secNext{right:max(24px, calc((100% - 1440px) / 2 + 24px))}
.sec-nav-btn:hover{
background:var(--ink);
color:var(--white);
border-color:var(--ink);
}
.sec-dots{
display:none;
justify-content:center;
align-items:center;
gap:8px;
padding:16px 0 4px;
}
.sec-dot{
width:8px;height:8px;
border-radius:99px;
background:rgba(18,18,18,0.18);
border:none;
padding:0;
cursor:pointer;
transition:background .25s ease, width .25s ease;
}
.sec-dot.is-active{
background:var(--ink);
width:22px;
}
.about{
background:var(--white);
}
.about-split{
display:grid;
grid-template-columns:1fr 1.05fr;
gap:80px;
align-items:stretch;
}
.about-left{
display:flex;
flex-direction:column;
}
.about-heading{
margin:0 0 26px;
}
.about-body{
margin:0 0 40px;
}
.about-actions{
display:flex;
align-items:center;
gap:0;
margin-bottom:52px;
}
.about-cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.about-card{
background:var(--cream);
border-radius:18px;
padding:30px 26px;
}
.about-card-title{
font-family:var(--sans);
font-weight:600;
font-size:16px;
line-height:1.35;
color:var(--ink);
margin:0 0 11px;
}
.about-card-body{
font-size:14px;
line-height:1.7;
color:var(--ink-muted);
margin:0;
}
.about-photo-wrap{
border-radius:28px;
overflow:hidden;
position:relative;
min-height:400px;
}
.about-photo-wrap img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
transition:transform 1.2s cubic-bezier(.2,.65,.3,1);
}
.about-photo-wrap:hover img{transform:scale(1.03)}
.portfolio{
background:#f9f6f4;
}
.pf-inner{
display:grid;
grid-template-columns:1fr 2fr;
gap:80px;
align-items:start;
}
.pf-title{
margin:0 0 24px;
}
.pf-tagline{
}
.pf-link{
display:inline-flex;
align-items:center;
gap:10px;
color:rgba(255,255,255,0.6);
font-size:12px;
font-weight:600;
text-transform:uppercase;
text-decoration:none;
transition:color .2s ease;
}
.pf-link:hover{color:var(--white)}
.pf-link-arr{
width:32px;height:32px;
border-radius:99px;
border:1px solid rgba(255,255,255,0.2);
display:inline-flex;
align-items:center;
justify-content:center;
transition:border-color .2s ease,transform .28s ease;
}
.pf-link:hover .pf-link-arr{border-color:rgba(255,255,255,0.5);transform:rotate(45deg)}
.pf-logo-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}
.pf-logo-item{
background:#ffffff;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
padding:20px 16px;
aspect-ratio:5/3;
overflow:hidden;
transition:box-shadow .32s ease, border-color .32s ease;
cursor:default;
}
.pf-logo-item img{
width:60%;
height:75px;
object-fit:contain;
display:block;
filter:brightness(0) opacity(0.7);
transition:filter .32s ease, transform .38s ease;
}
.pf-logo-item:hover img{
filter:brightness(1) invert(0) opacity(1);
transform:scale(1.18);
}
.pf-contact {
background: var(--paper);
border-bottom: 1px solid rgba(0,0,0,.08);
}
.pf-contact-body {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}
.pf-contact-text .sec-h2 { margin-bottom: 24px; }
.pf-contact-desc p { font-size:16px; font-weight:400; line-height:1.68; color:var(--ink-soft); }
.pf-contact-actions {
display: flex;
flex-direction: column;
gap: 16px;
}
.pf-action-card {
display: flex;
align-items: center;
gap: 24px;
background: var(--white);
border-radius: 18px;
padding: 28px 32px;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.pf-action-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.pf-action-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--navy);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--white);
}
.pf-action-card--gold .pf-action-icon {
background: var(--gold);
color: var(--white);
}
.pf-action-title {
font-size: 18px;
font-weight: 500;
color: var(--ink);
display: block;
margin-bottom: 3px;
}
.pf-action-sub {}
.pf-card-arr {
width: 44px;
height: 44px;
border-radius: 99px;
border: 1px solid rgba(0,0,0,.14);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: auto;
color: var(--ink);
transition: transform .28s ease, border-color .22s ease;
}
.pf-action-card:hover .pf-card-arr {
transform: rotate(45deg);
border-color: rgba(0,0,0,.3);
}
.risk-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}
.risk-step{
background:var(--paper);
border-radius:24px;
padding:44px 36px 48px;
min-width:0;
color:var(--ink);
transition:background .38s ease, transform .38s ease, box-shadow .38s ease;
display:flex;
flex-direction:column;
}
.risk-steps.is-entering .risk-step{
transition:background .38s ease;
}
.risk-step:hover{
background:var(--cream);
transform:translateY(-10px);
box-shadow:0 26px 50px -28px rgba(18,18,18,0.22);
}
.risk-steps--white .risk-step,
.risk-steps--white .risk-step:hover{background:var(--white)}
.risk-num{
font-family:var(--sans);
font-weight:600;
font-size: 72px;
line-height:1;
color:var(--gold);
display:block;
margin-bottom:78px;
}
.risk-title{
font-family:var(--sans);
font-weight:600;
font-size:26px;
line-height:1.15;
flex-shrink:0;
}
.risk-body{
font-size:16px;
line-height:1.68;
color:var(--ink-soft);
margin-top:16px;
}
.risk{
background:var(--white);
}
.risk-heading{}
.risk-heading em{
font-style:italic;
font-weight:700;
}
.quote-grid{
display:grid;
grid-template-columns:1fr 1fr;
}
.quote-grid > *{min-width:0}
.quote-split{
border-top:1px solid var(--line);
}
.quote{padding-bottom:0}
.quote-split .quote-grid{
column-gap:120px;
padding-top:64px;
padding-bottom:120px;
position:relative;
}
.quote-split .quote-grid::before{
content:'';
position:absolute;
left:50%;
top:0;
bottom:0;
width:1px;
background:var(--line);
}
.contact .quote-grid{
column-gap:80px;
}
.qf-field{
display:flex;
flex-direction:column;
}
.qf-field + .qf-field{margin-top:18px}
.qf-field input,
.qf-field textarea{
font-family:var(--body);
font-size:16px;
color:var(--ink);
background:var(--white);
border:1px solid var(--line);
border-radius:6px;
padding:10px 20px;
height:56px;
outline:none;
transition:border-color .2s ease;
width:100%;
}
.qf-field textarea{
height:auto;
min-height:161px;
padding:16px 20px;
resize:vertical;
}
.qf-field input::placeholder,
.qf-field textarea::placeholder{color:var(--navy-mid)}
.qf-field input:hover,
.qf-field textarea:hover,
.qf-field input:focus,
.qf-field textarea:focus{border-color:var(--gold)}
.quote-privacy{
font-size:14px;
line-height:1.6;
color:var(--ink-soft);
margin-top:26px;
}
.quote-privacy a{
color:var(--gold);
text-decoration:underline;
text-underline-offset:3px;
}
.quote-form .ykc-btn{margin-top:30px}
.quote-side{position:relative}
.quote-media{
position:absolute;
inset:0;
border-radius:24px;
overflow:hidden;
}
.quote-media img{
width:100%;
height:100%;
object-fit:cover;
}
.qf-feedback{ margin-top:20px }
.form-success,
.form-alert{
border-radius:8px;
padding:16px 22px;
margin-bottom:32px;
font-size:16px;
line-height:1.55;
}
.form-success{
background:#edfaf3;
border:1px solid #6fcf97;
color:#1a5c35;
}
.form-alert{
background:#fff3f3;
border:1px solid #f0a0a0;
color:#8b1a1a;
}
.qf-file-hint{
display:block;
font-size:13px;
line-height:1.5;
color:var(--ink-muted);
margin-top:8px;
}
.qf-error{
display:block;
font-size:14px;
line-height:1.5;
color:#b91c1c;
margin-top:6px;
}
.footer{background:#121212}
.footer .wrap{padding-top:78px;padding-bottom:30px}
.footer-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
padding-bottom:34px;
border-bottom:1px solid rgba(255,255,255,0.05);
}
.footer-headline{
font-family:var(--serif);
font-weight:600;
line-height:1.02;
color:var(--gold);
max-width:14ch;
}
.footer-cta{flex-shrink:0}
.footer-main{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:44px 32px;
padding:56px 0 60px;
border-bottom:1px solid rgba(255,255,255,0.05);
}
.footer-col h3{
font-size:24px;
font-weight:500;
color:var(--white);
margin-bottom:28px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:18px}
.footer-col ul a{
font-size:16px;
font-weight:400;
color:rgba(255,255,255,0.58);
transition:color .2s ease, transform .22s cubic-bezier(0.16,1,0.3,1);
line-height:1.4;
display:inline-block;
}
.footer-col ul a:hover{color:var(--white);transform:translateX(7px)}
.footer-col-gap{margin-top:32px}
.footer-col-split ul{
display:grid;
grid-template-columns:max-content max-content;
column-gap:36px;
row-gap:18px;
}
.footer-contact{display:flex;flex-direction:column;gap:48px;flex:0 1 320px}
.footer-contact ul{gap:18px}
.footer-contact li{
display:flex;
align-items:flex-start;
gap:12px;
font-size:15px;
line-height:1.5;
color:rgba(255,255,255,0.7);
}
.footer-contact li svg{
flex-shrink:0;
margin-top:3px;
color:rgba(255,255,255,0.5);
}
.footer-contact a{color:inherit;transition:color .2s ease}
.footer-contact a:hover{color:var(--white)}
.footer-contact .footer-social-link{color:rgba(255,255,255,0.58);transition:color .22s ease, border-color .22s ease, transform .22s ease}
.footer-contact .footer-social-link:hover{color:var(--white)}
.footer-social{
display:flex;
gap:10px;
}
.footer-social-link{
width:42px;height:42px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.58);
display:inline-flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,0.58);
transition:color .22s ease, border-color .22s ease, transform .22s ease;
flex-shrink:0;
}
.footer-social-link:hover{
color:var(--white);
border-color:var(--white);
transform:scale(1.12);
}
.footer-social-link--dark{
color:var(--ink);
border-color:var(--ink);
}
.footer-social-link--dark:hover{
color:var(--ink);
border-color:var(--ink);
}
.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
padding:24px 0 6px;
gap:20px;
}
.footer-copy{font-size:14px;color:rgba(255,255,255,0.4)}
.footer-copy a{color:rgba(255,255,255,0.4);transition:color .2s ease}
.footer-copy a:hover{color:var(--white)}
.footer-legal{display:flex;gap:28px}
.footer-legal a{
font-size:14px;
color:rgba(255,255,255,0.4);
transition:color .2s ease;
}
.footer-legal a:hover{color:var(--white)}
@media(max-width:1340px){
.menu{display:none}
.nav-toggle{display:block}
.mobile-nav{display:block}
.mobile-nav-inner{padding-top:136px}
.hero .hero-slogan{font-size:64px}
.sec-h2{font-size:52px}
.page-hero .sec-h2{font-size:64px}
.svc-list-grid--quad{grid-template-columns:repeat(2,1fr)}
.blog-list-grid{grid-template-columns:repeat(2,1fr)}
.footer-col-split ul{grid-template-columns:1fr}
.ceo-body{gap:60px}
.pf-contact-body{gap:60px}
}
@media(max-width:980px){
.site-header{padding:9px 9px 9px 20px;top:12px;left:12px;right:12px;transform:none;width:auto}
.site-header.is-scrolled{top:8px}
.brand img{height:40px}
.nav-right{gap:12px}
.nav-right>.ykc-btn{display:none}
.hero-content{padding:120px 0 100px}
.hero .hero-slogan{font-size:44px}
.hero-sub{font-size:17px}
.hero-h1-row{margin-bottom:40px}
.hero-play-circle{width:64px;height:64px}
.hero-bottom{flex-direction:column;align-items:flex-start;gap:28px}
.page-hero .sec-h2{font-size:44px}
.page-hero{min-height:min(46vh, 400px)}
.page-hero::after{height:32px;border-radius:32px 32px 0 0}
.page-hero:not(.page-hero--min)+section{padding-top:48px}
.page-hero-content{padding:130px 0 84px}
.page-hero-sub{font-size:17px}
.page-hero--light .page-hero-content{padding:140px 0 84px}
.page-hero--min .page-hero-content{padding:150px 0 72px}
.page-hero--plain{min-height:0}
.page-hero--plain .page-hero-content{padding:140px 0 72px}
.page-hero--plain .page-hero-content .wrap{grid-template-columns:1fr;row-gap:14px}
.page-hero--plain .page-hero-sub{text-align:left;justify-self:start}
.page-hero-crumb-right,
.page-hero--min .page-hero-content .wrap{grid-template-columns:1fr}
.page-hero-crumb-right .breadcrumb,
.page-hero--min .page-hero-content .wrap .breadcrumb{grid-column:1;grid-row:auto;justify-self:start;margin-top:20px}
.page-hero--plain .page-hero-content .wrap .sec-h2{grid-row:auto}
.page-hero--plain .breadcrumb{grid-column:1;justify-self:start;margin-top:4px}
.breadcrumb{margin-top:20px;font-size:13px}
.svc-list-grid{grid-template-columns:1fr;gap:14px}
.blog-list-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.blog-list-grid .svc-list-card--featured{grid-column:span 2}
.svc-list-card{aspect-ratio:6/5}
.svc-list-inner{padding:20px}
.svc-list-reveal{opacity:1;max-height:240px;padding-top:10px;transform:none;flex-direction:column;align-items:flex-start;gap:14px}
.svc-list-card .ykc-btn-icon{width:40px;height:40px;align-self:flex-start}
.svc-list-card::before{background:linear-gradient(180deg,rgba(18,18,18,0.12) 0%,rgba(18,18,18,0.55) 100%)}
.page-hero-grid{grid-template-columns:1fr;gap:36px}
.page-hero-media{min-height:56vw;border-radius:24px 24px 0 0;margin-bottom:-84px}
section{padding:80px 0}
.services{padding-top:90px}
section[data-pt="small"]{padding-top:40px}
section[data-pt="ara"]  {padding-top:60px}
section[data-pt="large"]{padding-top:120px}
section[data-pb="small"]{padding-bottom:40px}
section[data-pb="ara"]  {padding-bottom:60px}
section[data-pb="large"]{padding-bottom:120px}
.sec-h2{font-size:36px}
.sec-h3{font-size:26px}
.section-head{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
.section-head .section-head-desc{text-align:left}
.section-head--center{justify-items:start;text-align:left}
.svc-bento{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}
.svc-item:nth-child(1),
.svc-item:nth-child(2),
.svc-item:nth-child(3),
.svc-item:nth-child(4){grid-column:1;grid-row:auto;min-height:260px}
.svc-item p,.svc-cta{opacity:1;transform:translateY(0)}
.svc-item::before{background:linear-gradient(180deg,rgba(18,18,18,0.2) 0%,rgba(18,18,18,0.65) 100%)}
.about-split{grid-template-columns:1fr;gap:44px}
.manifesto-inner .sec-h2{margin-bottom:24px}
.manifesto-inner h2{font-size:36px}
.feature-split,.feature-split--reverse{grid-template-columns:1fr;gap:36px}
*+.feature-split{margin-top:72px}
.feature-split--reverse .feature-media{order:0}
.feature-media{min-height:56vw}
.stats-row{margin-top:64px;grid-template-columns:repeat(2,1fr);gap:14px}
.stat{min-height:180px;padding:28px 24px 24px;gap:28px}
.stat-num{font-size:52px}
.vm-row{flex-direction:column}
.vm-media{order:-1;min-height:56vw}
.vm-card{padding:36px 28px}
.policy-grid{grid-template-columns:1fr}
.policy-card{padding:36px 28px}
section.policy--panel{clip-path:inset(0 8px round 14px)}
.policy--panel .policy-card{padding:0}
.manifesto .policy-grid{margin-top:64px}
.cta-band-grid{grid-template-columns:1fr}
.cta-band-card{padding:40px 28px;gap:22px}
.cta-band-card .ykc-btn{margin-top:8px}
.cta-band-media{min-height:56vw}
.process{clip-path:inset(0 8px round 14px)}
.process::before{left:8px;right:8px;border-radius:14px}
.process-layout{grid-template-columns:1fr;gap:44px}
.process-head{position:static}
.process-items{grid-template-columns:1fr;gap:22px}
.media-trio{grid-template-columns:1fr;gap:40px}
.media-trio-media{aspect-ratio:auto;min-height:56vw}
.fa-trio{clip-path:inset(0 8px round 14px)}
.fa-trio::before{left:8px;right:8px;border-radius:14px}
section.trio-panel{clip-path:inset(0 8px round 14px)}
.ik-trio{clip-path:inset(0 8px round 14px)}
.ik-trio::before{left:8px;right:8px;border-radius:14px}
.ik-extra-wrap{margin-top:40px}
.about-photo-wrap{min-height:56vw;border-radius:18px}
.about-cards{gap:12px}
.edu-cycle{clip-path:inset(0 8px round 14px)}
.edu-cycle::before{left:8px;right:8px;border-radius:14px}
.sectors{clip-path:inset(0 8px round 14px)}
.sectors::before{left:8px;right:8px;border-radius:14px}
.sec-head-right{align-items:flex-start}
.sec-card{flex:0 0 85vw;aspect-ratio:5/3}
.sec-rail{gap:16px;padding:0 20px}
.sec-title h3{font-size:28px}
.sec-title .sub{font-size:14px}
.risk-steps{grid-template-columns:1fr}
.risk-step{padding:36px 28px 40px}
.risk-num{margin-bottom:48px}
.portfolio{padding:80px 0 96px}
.pf-inner{grid-template-columns:1fr;gap:48px}
.qf-row{grid-template-columns:1fr;gap:18px}
.contact{padding:80px 0}
.contact-map{height:320px;margin-top:40px}
.contact-panel{padding:44px 32px;gap:40px}
.cp-value{font-size:22px}
.quote-grid{grid-template-columns:1fr;row-gap:56px}
.quote-split .quote-grid{padding-top:44px;padding-bottom:80px}
.quote-split .quote-grid::before{display:none}
.quote-media{position:static}
.quote-media img{aspect-ratio:4/3}
.footer .wrap{padding-top:56px}
.footer-top{flex-direction:column;align-items:flex-start;gap:28px;padding-bottom:30px}
.footer-headline{max-width:100%}
.footer-main{gap:36px 32px;padding:44px 0}
.footer-col-split{flex-basis:100%}
.footer-contact{margin-left:0;flex-basis:100%}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
.footer-legal{flex-wrap:wrap;gap:18px}
.ref-layout{grid-template-columns:1fr;gap:40px}
.ref-logo-box{position:static;max-width:260px}
.pf-contact-body{grid-template-columns:1fr;gap:44px}
.pf-action-card{padding:22px 24px}
.ceo-body{grid-template-columns:1fr;gap:44px}
.ceo-visual{position:static;order:-1}
.ceo-img-frame{padding:0}
.ceo-img-wrap{aspect-ratio:16/9}
}
@media(max-width:640px){
.blog-post{padding-top:40px}
.blog-list-grid{grid-template-columns:1fr}
.blog-list-grid .svc-list-card--featured{grid-column:span 1}
.wrap{padding:0 20px}
.mobile-nav-inner{padding:96px 20px 40px;}
.hero .hero-slogan{font-size:38px}
.sec-h2{font-size:32px}
.page-hero .sec-h2{font-size:38px}
.svc-item-inner{padding:28px 24px}
.pf-logo-grid{grid-template-columns:repeat(2,1fr)}
.pf-action-card{gap:16px;padding:20px}
.sec-title{left:24px;right:24px;bottom:24px}
.sec-title h3{font-size:24px}
.manifesto-inner h2{font-size:32px}
.footer-col-split ul{grid-template-columns:1fr}
.ceo-text .sec-h2{margin-bottom:28px}
.ceo-text .sec-p+.sec-p,.ceo-text p+p{margin-top:18px}
.ceo-attribution{margin-top:36px}
.sec-card{flex:0 0 calc(100vw - 40px)}
.sec-nav-btn{display:none}
.sec-dots{display:flex}
}